/* Design tokens — see DESIGN.md (project root) for the canonical spec. * * Dark-default. Light theme via [data-theme="light"] on ; the dark * palette also lives under the [data-theme="dark"] selector so the explicit * attribute is honored even when prefers-color-scheme disagrees. * * Font axis: --font-sans defaults to Atkinson Hyperlegible; [data-font="dyslexic"] * swaps it to OpenDyslexic. Cookie-backed (sm_font), mirrors data-theme/data-density. * * Palette tuned for eye comfort (2026-06-03): backgrounds lifted off near-black * and text eased off pure-bright to kill halation; default type scale raised for * legibility. See docs/superpowers/specs/2026-06-03-eye-friendly-themes-design.md. * * OKLCH throughout. Never #000 / #fff. All neutrals tinted toward hue 250° * (cool graphite) at low chroma (0.005–0.014). */ /* ============================================================ * Theme-independent tokens (typography, spacing, radii, motion) * ============================================================ */ :root { /* Type families */ --font-sans: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Type scale (1.125–1.2 modular, fixed rem — no fluid clamps) */ --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 30px; /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Spacing (4px base, modular scale) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; /* Radii */ --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 14px; /* island radius — cards, panels, floating topbar */ --r-pill: 999px; /* Motion */ --ease-standard: cubic-bezier(0.16, 1, 0.3, 1); --ease-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0); --dur-fast: 100ms; --dur-base: 150ms; --dur-slow: 250ms; } /* ============================================================ * Dark theme (default) * ============================================================ */ :root, [data-theme="dark"] { /* Neutrals */ --bg-base: oklch(0.165 0.010 250); --bg-elev: oklch(0.205 0.010 250); --bg-soft: oklch(0.245 0.012 250); --border-subtle: oklch(0.28 0.010 250); --border: oklch(0.35 0.012 250); --border-strong: oklch(0.45 0.014 250); --text-dim: oklch(0.52 0.010 250); --text-muted: oklch(0.68 0.012 250); --text-secondary: oklch(0.82 0.010 250); --text-primary: oklch(0.91 0.005 250); /* Accent (cool blue) */ --accent: oklch(0.74 0.12 240); --accent-soft: oklch(0.32 0.06 240); --accent-strong: oklch(0.79 0.14 240); /* Status */ --success: oklch(0.74 0.15 145); --success-soft: oklch(0.20 0.04 145); --warning: oklch(0.79 0.14 75); --warning-soft: oklch(0.20 0.04 75); --danger: oklch(0.70 0.16 25); --danger-soft: oklch(0.20 0.04 25); --info: oklch(0.75 0.10 230); --info-soft: oklch(0.20 0.04 230); --muted: oklch(0.68 0.012 250); --muted-soft: oklch(0.20 0.04 250); /* Elevation */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); /* Content-card elevation — unified to the same lit-edge recipe as the * floating chrome (owner choice 2026-06-04). var() resolves lazily, so the * forward reference to the island-* tokens just below is fine. */ --shadow-island: var(--island-edge), var(--island-shadow); --shadow-island-sm: 0 2px 8px rgba(0, 0, 0, 0.22); /* Island depth — layered drop + lit top edge (see DESIGN.md → Elevation) */ /* Dark elevation reads via a bevel (top catch-light + crisp bottom contact * line), NOT a soft drop — shadows vanish on a dark canvas. */ --island-shadow: 0 1px 0 oklch(0 0 0 / 0.55), 0 2px 4px rgba(0,0,0,0.35), 0 16px 34px -12px rgba(0,0,0,0.6); --island-edge: inset 0 1px 0 oklch(1 0 0 / 0.14); } /* ============================================================ * Light theme * ============================================================ */ [data-theme="light"] { /* Neutrals */ --bg-base: oklch(0.975 0.003 250); --bg-elev: oklch(0.96 0.005 250); --bg-soft: oklch(0.94 0.007 250); --border-subtle: oklch(0.92 0.008 250); --border: oklch(0.86 0.010 250); --border-strong: oklch(0.72 0.012 250); --text-dim: oklch(0.62 0.010 250); --text-muted: oklch(0.48 0.012 250); --text-secondary: oklch(0.30 0.010 250); --text-primary: oklch(0.21 0.008 250); /* Accent (cool blue) */ --accent: oklch(0.50 0.17 240); --accent-soft: oklch(0.92 0.05 240); --accent-strong: oklch(0.42 0.19 240); /* Status */ --success: oklch(0.52 0.18 145); --success-soft: oklch(0.95 0.04 145); --warning: oklch(0.58 0.17 75); --warning-soft: oklch(0.95 0.04 75); --danger: oklch(0.52 0.20 25); --danger-soft: oklch(0.95 0.04 25); --info: oklch(0.50 0.13 230); --info-soft: oklch(0.95 0.04 230); --muted: oklch(0.48 0.012 250); --muted-soft: oklch(0.95 0.04 250); /* Elevation — slightly stronger because dark shadows lose contrast on white. */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12); --shadow-island: var(--island-edge), var(--island-shadow); --shadow-island-sm: 0 2px 6px rgba(0, 0, 0, 0.06); --island-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 10px 28px -10px rgba(0,0,0,0.14); --island-edge: inset 0 1px 0 oklch(1 0 0 / 0.65); } /* ============================================================ * Font axis — Atkinson Hyperlegible default (see --font-sans in * :root); [data-font="dyslexic"] swaps the sans stack to * OpenDyslexic. Mono (code/logs) is unaffected. Cookie-backed, * mirrors data-theme / data-density. * ============================================================ */ [data-font="dyslexic"] { --font-sans: "OpenDyslexic", "Atkinson Hyperlegible", system-ui, sans-serif; } /* ============================================================ * Reduced motion — comprehension never depends on animation. * ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } } /* ============================================================ * Compact density — tighter spacing + slightly smaller base type. * Applies globally; dense regions (roster/tables) benefit most. * Only mid-range spacing vars and base font are touched. * Color tokens and theme blocks are intentionally not modified. * ============================================================ */ :root[data-density="compact"] { --fs-base: 13px; /* comfortable: 15px → compact: 13px (~87%) */ --s-2: 5px; /* comfortable: 8px → compact: 5px (~63%) */ --s-3: 8px; /* comfortable: 12px → compact: 8px (~67%) */ --s-4: 10px; /* comfortable: 16px → compact: 10px (~63%) */ --s-5: 16px; /* comfortable: 24px → compact: 16px (~67%) */ --s-6: 20px; /* comfortable: 32px → compact: 20px (~63%) */ }