/** * tokens.css — the entire visual language of the app, as custom properties. * * Contract §6: app.css never contains a raw colour. Everything resolves through * a token defined here, which is what makes rebranding a five-property write on * document.documentElement instead of a stylesheet rewrite. * * Four tokens are owned by the branding record and overwritten at runtime by * js/app.mjs → applyBranding(): --brand-accent, --brand-accent-2, * --brand-surface, --font-display. Everything else derives from them. */ :root { /* ---- Brand-owned. Overwritten at runtime from /api/branding. ---------- */ --brand-accent: #B4436C; /* berry — primary action, focus, active nav */ --brand-accent-2: #3F7D5C; /* leaf — success, growth, secondary accent */ --brand-surface: #FBF7F2; /* warm paper ground */ /* ---- Typography ------------------------------------------------------ */ /* No webfonts: the CSP is `default-src 'self'` and the app must work with no network at all. These stacks pick the best resident face on each platform. */ --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --font-sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace; /* Fluid type: locked to the viewport so a 360px phone and a 1440px desktop both get sensible measure without a media query per step. */ --t-xs: 0.6875rem; --t-sm: 0.8125rem; --t-base: 0.9375rem; --t-md: 1.0625rem; --t-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); --t-xl: clamp(1.6rem, 1.3rem + 1.6vw, 2.25rem); --t-2xl: clamp(2rem, 1.5rem + 2.6vw, 3.25rem); --lh-tight: 1.15; --lh-body: 1.55; --track-caps: 0.09em; /* ---- Space: a 4px scale. Only these values appear in app.css. --------- */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ---- Light theme surfaces -------------------------------------------- */ --bg: var(--brand-surface); --bg-sunk: color-mix(in oklab, var(--brand-surface) 92%, #6B5B4B); --surface: #FFFFFF; --surface-2: color-mix(in oklab, var(--brand-surface) 60%, #FFFFFF); --surface-3: color-mix(in oklab, var(--brand-surface) 88%, #8A7A68); --hairline: color-mix(in oklab, var(--ink) 12%, transparent); --hairline-2: color-mix(in oklab, var(--ink) 22%, transparent); --ink: #1F2A24; /* deep green-black, easier on the eye than #000 */ --ink-2: color-mix(in oklab, var(--ink) 72%, var(--bg)); --ink-3: color-mix(in oklab, var(--ink) 52%, var(--bg)); --ink-invert: #FCFAF7; --accent: var(--brand-accent); --accent-ink: #FFFFFF; --accent-soft: color-mix(in oklab, var(--brand-accent) 12%, var(--surface)); --accent-line: color-mix(in oklab, var(--brand-accent) 40%, transparent); --leaf: var(--brand-accent-2); --leaf-soft: color-mix(in oklab, var(--brand-accent-2) 14%, var(--surface)); /* Semantic state colours, tuned to sit beside any brand hue. */ --ok: #2F7D57; --warn: #B4761F; --danger: #B03A34; --ok-soft: color-mix(in oklab, var(--ok) 13%, var(--surface)); --warn-soft: color-mix(in oklab, var(--warn) 15%, var(--surface)); --danger-soft: color-mix(in oklab, var(--danger) 13%, var(--surface)); /* Difficulty has its own ramp: it is the most-scanned attribute in the glossary, so it gets a dedicated, consistent green→amber→rust signal. */ --diff-easy: #3E7D5B; --diff-moderate: #B4761F; --diff-challenging: #A6483C; /* ---- Elevation. Two-layer shadows; the tight layer does the work. ----- */ --sh-1: 0 1px 2px color-mix(in oklab, var(--ink) 8%, transparent), 0 1px 1px color-mix(in oklab, var(--ink) 4%, transparent); --sh-2: 0 2px 4px color-mix(in oklab, var(--ink) 7%, transparent), 0 8px 20px -6px color-mix(in oklab, var(--ink) 14%, transparent); --sh-3: 0 4px 8px color-mix(in oklab, var(--ink) 8%, transparent), 0 24px 48px -12px color-mix(in oklab, var(--ink) 22%, transparent); --sh-glow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); /* ---- Motion. One easing family so nothing feels borrowed. ------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 520ms; /* ---- Layout ----------------------------------------------------------- */ --measure: 68ch; --page-max: 1180px; --nav-h: 4.25rem; --header-h: 3.5rem; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); color-scheme: light dark; } /* ---- Dark theme --------------------------------------------------------- Not an inversion: the paper ground becomes a night-garden ground, and the brand hues are lifted so they keep their chroma against it. Every token redefined here also has a light definition above, so a partial cascade can never leave a colour undefined. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #14191A; --bg-sunk: #0E1213; --surface: #1C2224; --surface-2: #212829; --surface-3: #2A3234; --hairline: color-mix(in oklab, #FFFFFF 11%, transparent); --hairline-2: color-mix(in oklab, #FFFFFF 20%, transparent); --ink: #E9E6E0; --ink-2: color-mix(in oklab, var(--ink) 76%, var(--bg)); --ink-3: color-mix(in oklab, var(--ink) 55%, var(--bg)); --ink-invert: #14191A; --accent: color-mix(in oklab, var(--brand-accent) 78%, #FF9DBE); --accent-soft: color-mix(in oklab, var(--brand-accent) 22%, var(--surface)); --leaf: color-mix(in oklab, var(--brand-accent-2) 70%, #7FE0AE); --leaf-soft: color-mix(in oklab, var(--brand-accent-2) 24%, var(--surface)); --ok: #5FBE8A; --warn: #E0A34A; --danger: #E2776C; --diff-easy: #5FBE8A; --diff-moderate: #E0A34A; --diff-challenging: #E2776C; --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 2px 6px rgba(0,0,0,.42), 0 10px 24px -8px rgba(0,0,0,.5); --sh-3: 0 6px 12px rgba(0,0,0,.44), 0 28px 56px -14px rgba(0,0,0,.62); } } /* Explicit toggle wins over the system preference in both directions. */ :root[data-theme="dark"] { --bg:#14191A; --bg-sunk:#0E1213; --surface:#1C2224; --surface-2:#212829; --surface-3:#2A3234; --hairline: color-mix(in oklab, #FFFFFF 11%, transparent); --hairline-2: color-mix(in oklab, #FFFFFF 20%, transparent); --ink:#E9E6E0; --ink-invert:#14191A; --ink-2: color-mix(in oklab, var(--ink) 76%, var(--bg)); --ink-3: color-mix(in oklab, var(--ink) 55%, var(--bg)); --accent: color-mix(in oklab, var(--brand-accent) 78%, #FF9DBE); --accent-soft: color-mix(in oklab, var(--brand-accent) 22%, var(--surface)); --leaf: color-mix(in oklab, var(--brand-accent-2) 70%, #7FE0AE); --leaf-soft: color-mix(in oklab, var(--brand-accent-2) 24%, var(--surface)); --ok:#5FBE8A; --warn:#E0A34A; --danger:#E2776C; --diff-easy:#5FBE8A; --diff-moderate:#E0A34A; --diff-challenging:#E2776C; --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 2px 6px rgba(0,0,0,.42), 0 10px 24px -8px rgba(0,0,0,.5); --sh-3: 0 6px 12px rgba(0,0,0,.44), 0 28px 56px -14px rgba(0,0,0,.62); } /* A sans-first brand option, selectable from Settings → Branding. */ :root[data-font="sans"] { --font-display: var(--font-sans); } @media (prefers-reduced-motion: reduce) { :root { --dur-1:0ms; --dur-2:0ms; --dur-3:0ms; --dur-4:0ms; } }