/* Cheldrop — Stillwater+ design tokens. Light (Paper) is the default. Dark via [data-theme="dark"] on . Faces are self-hosted OFL woff2 (Fontsource) — no CDN call, no tracking. */ @font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/familjen-grotesk-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/familjen-grotesk-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/familjen-grotesk-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Familjen Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/familjen-grotesk-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/public-sans-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/public-sans-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/public-sans-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/public-sans-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/public-sans-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/public-sans-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root { /* surfaces */ --bg: #F3EFE2; --surface: #FBF8EE; --raised: #FFFFFF; --border: #DED6BF; /* text */ --text: #1C231D; /* 15.12:1 on surface */ --muted: #56635A; /* 5.94:1 on surface */ --faint: #8B9388; /* 2.98:1 — captions/placeholders ONLY */ /* accent (pond green) */ --accent: #1F4D42; /* 8.30:1 on bg */ --accent-ink: #255348; /* 8.20:1 on surface */ --on-accent: #F6F2E4; /* 8.52:1 */ /* semantic */ --success: #35714A; --danger: #A93E2C; /* pond — the inverted brand panel */ --pond: #21493F; --on-pond: #F6F2E4; /* 8.97:1 */ --pond-muted: #C4D2C4; /* 6.40:1 */ --pond-btn: #F6F2E4; --on-pond-btn: #21493F; /* type */ --font-display: 'Familjen Grotesk', sans-serif; --font-ui: 'Public Sans', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --display-weight: 600; --display-tracking: -0.02em; /* geometry */ --radius-sm: 6px; --radius: 10px; --radius-lg: 18px; --radius-pill: 999px; /* spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; /* elevation */ --shadow-sm: 0 1px 3px rgba(32,40,30,.07); --shadow-md: 0 6px 18px rgba(32,40,30,.08); --shadow-lg: 0 18px 44px rgba(32,40,30,.10); /* focus */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); --scrim: rgba(13,20,17,.45); /* motion — the Ripple */ --dur-fall: 430ms; --ease-fall: cubic-bezier(.55,.06,.9,.55); --dur-wavefront: 1150ms; --ease-wavefront: linear; --dur-settle: 620ms; --ease-settle: cubic-bezier(.2,.8,.25,1); --dur-ripple-app: 700ms; --ease-water: cubic-bezier(.16,.84,.28,1); --dur-fast: 150ms; --dur-base: 250ms; } [data-theme="dark"] { --bg: #0D1411; --surface: #14201A; --raised: #1C2A22; --border: #263329; --text: #E9E7D8; --muted: #A8B4A6; --faint: #6C7A6E; --accent: #9ED0B8; --accent-ink: #9ED0B8; --on-accent: #0D1411; --success: #7FBF8E; --danger: #E08072; --pond: #F1ECDC; --on-pond: #1E3B33; --pond-muted: #52685C; --pond-btn: #1F4D42; --on-pond-btn: #F1ECDC; --shadow-sm: 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 6px 18px rgba(0,0,0,.4); --shadow-lg: 0 18px 44px rgba(0,0,0,.55); --scrim: rgba(5,9,7,.6); } @media (prefers-reduced-motion: reduce) { :root { --dur-fall: 0ms; --dur-wavefront: 240ms; --dur-settle: 0ms; --dur-ripple-app: 240ms; } }