/* On Cue design tokens. Ported from design/system "Electric Sunset" (_ds on-cue-design-system). Light values live on :root; pages opt into dark with data-theme="dark" on . The homepage is deliberately dark; legal and support pages are deliberately light. That split is part of the approved design. */ /* Fonts. Newsreader (SIL OFL) is self-hosted as a variable woff2 (latin subset, opsz + wght axes, roman + italic). SF Pro Display is NOT self-hosted: Apple's font license does not permit redistributing the binaries on the public web, so --font-ui relies on the system stack, which resolves to SF on Apple devices, the first-class audience for this site. */ @font-face { font-family: "Newsreader"; src: url("../assets/fonts/newsreader-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; 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: "Newsreader"; src: url("../assets/fonts/newsreader-italic-latin.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; 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; } :root { /* base neutrals (light) */ --paper-0: #F7F5FB; --paper-1: #FFFFFF; --paper-2: #EFECF6; --paper-3: #E3DFEE; --ink-1: #1E1B2B; --ink-2: #55516A; --ink-3: #787587; --ink-4: #A9A6B8; --hairline: rgba(23,21,34,0.10); --hairline-strong: rgba(23,21,34,0.18); /* cue: the brand accent, Cue Violet */ --cue: #7C5CFF; --cue-strong: #6847E8; --cue-soft: rgba(124,92,255,0.12); --cue-on: #FFFFFF; /* flourishes: small bursts of personality, never all at once */ --peach: #FF8A65; --peach-soft: rgba(255,138,101,0.14); --mint: #5ED6C1; --mint-soft: rgba(94,214,193,0.16); --gold: #FFD166; --gold-soft: rgba(255,209,102,0.18); /* semantic */ --save: #3DB9A2; --save-soft: rgba(94,214,193,0.18); --danger: #E0554D; --danger-soft: rgba(224,85,77,0.10); /* semantic aliases */ --bg-canvas: var(--paper-0); --surface-card: var(--paper-1); --surface-sunken: var(--paper-2); --surface-raised: var(--paper-1); --text-body: var(--ink-1); --text-secondary: var(--ink-2); --text-tertiary: var(--ink-3); --text-accent: var(--cue); --fill-control: rgba(23,21,34,0.06); --fill-control-press: rgba(23,21,34,0.12); --tint: var(--cue); --separator: var(--hairline); --artwork-wash: rgba(124,92,255,0.06); /* typography */ --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --text-caption2: 11px; --text-caption: 12px; --text-footnote: 13px; --text-subhead: 15px; --text-body-size: 17px; --text-headline: 17px; --text-title3: 20px; --text-title2: 22px; --text-title1: 28px; --text-large-title: 34px; --text-display: 44px; --leading-tight: 1.15; --leading-snug: 1.25; --leading-body: 1.45; --weight-regular: 400; --weight-medium: 510; --weight-semibold: 590; --weight-bold: 700; --tracking-tight: -0.02em; --tracking-body: -0.01em; --tracking-caps: 0.06em; --display-opsz: "opsz" 32; /* spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --inset-screen: 20px; --gap-list: 12px; --gap-section: 32px; --hit-target: 44px; /* radius */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-capsule: 999px; --radius-artwork-sm: 8px; --radius-artwork: 12px; --radius-artwork-lg: 18px; /* shadows and materials */ --shadow-card: 0 1px 2px rgba(23,21,34,0.05), 0 4px 16px rgba(23,21,34,0.06); --shadow-raised: 0 2px 6px rgba(23,21,34,0.08), 0 12px 32px rgba(23,21,34,0.10); --shadow-sheet: 0 -8px 40px rgba(23,21,34,0.18); --shadow-artwork: 0 4px 12px rgba(23,21,34,0.18), 0 16px 40px rgba(23,21,34,0.14); --blur-material: saturate(180%) blur(20px); --material-thin: rgba(247,245,251,0.72); /* motion */ --ease-settle: cubic-bezier(0.32,0.72,0,1); --ease-out-soft: cubic-bezier(0.25,0.1,0.25,1); --ease-in-out: cubic-bezier(0.45,0,0.25,1); --dur-instant: 120ms; --dur-quick: 200ms; --dur-settle: 420ms; --dur-land: 650ms; } [data-theme="dark"] { --paper-0: #171522; --paper-1: #211E30; --paper-2: #2A2740; --paper-3: #353150; --ink-1: #F2F0F7; --ink-2: #C6C2D6; --ink-3: #918DA6; --ink-4: #676380; --hairline: rgba(242,240,247,0.10); --hairline-strong: rgba(242,240,247,0.18); --cue: #937AFF; --cue-strong: #A98FFF; --cue-soft: rgba(147,122,255,0.18); --cue-on: #14102A; --peach: #FF9C7D; --peach-soft: rgba(255,156,125,0.16); --mint: #6FE0CC; --mint-soft: rgba(111,224,204,0.16); --gold: #FFD97F; --gold-soft: rgba(255,217,127,0.16); --save: #6FE0CC; --save-soft: rgba(111,224,204,0.16); --danger: #F0776F; --danger-soft: rgba(240,119,111,0.14); --bg-canvas: var(--paper-0); --surface-card: var(--paper-1); --surface-sunken: #110F1B; --surface-raised: var(--paper-2); --fill-control: rgba(242,240,247,0.08); --fill-control-press: rgba(242,240,247,0.16); --artwork-wash: rgba(147,122,255,0.10); --shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 4px 16px rgba(0,0,0,0.28); --shadow-raised: 0 2px 6px rgba(0,0,0,0.35), 0 12px 32px rgba(0,0,0,0.40); --shadow-sheet: 0 -8px 40px rgba(0,0,0,0.55); --shadow-artwork: 0 4px 12px rgba(0,0,0,0.45), 0 16px 40px rgba(0,0,0,0.40); --material-thin: rgba(23,21,34,0.72); } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-quick: 0ms; --dur-settle: 0ms; --dur-land: 0ms; } }