/* tokens.css — design tokens. OKLCH base, single accent, light/dark via color-mix derivatives. Pico v2 reads --pico-* custom properties; we map them to our token system. See DESIGN.md for the contract. */ :root { /* ---- Hues (perceptually-uniform, OKLCH) ----------------------------- */ --hue-ink: 250; /* near-black with a faint blue cast */ --hue-paper: 95; /* warm off-white */ --hue-accent: 160; /* emerald */ /* ---- Surfaces ------------------------------------------------------- */ --paper: oklch(99% 0.005 var(--hue-paper)); --paper-2: oklch(97% 0.008 var(--hue-paper)); /* subtle elevation */ --paper-3: oklch(94% 0.010 var(--hue-paper)); /* sunken / inputs */ --ink: oklch(20% 0.020 var(--hue-ink)); --ink-muted: color-mix(in oklch, var(--ink) 60%, var(--paper)); --ink-subtle: color-mix(in oklch, var(--ink) 40%, var(--paper)); --hairline: color-mix(in oklch, var(--ink) 12%, var(--paper)); --hairline-strong: color-mix(in oklch, var(--ink) 22%, var(--paper)); /* ---- Accent (single saturated colour) ------------------------------- */ --accent: oklch(55% 0.12 var(--hue-accent)); --accent-hover: color-mix(in oklch, var(--accent) 88%, var(--ink)); --accent-soft: color-mix(in oklch, var(--accent) 14%, var(--paper)); --accent-ink: color-mix(in oklch, var(--accent) 70%, var(--ink)); --accent-contrast: var(--paper); /* ---- Semantic aliases (vocabulary over the paper/ink/accent ladder) - Pure indirection — no new hues. Keeps the single-accent direction (DESIGN.md §2) while giving components a meaning-led name to reach for. These inherit dark-theme values automatically via the tokens they map. */ --surface: var(--paper); --surface-raised: var(--paper-2); --surface-sunken: var(--paper-3); --ink-1: var(--ink); --ink-2: var(--ink-muted); --ink-3: var(--ink-subtle); --positive: var(--accent); /* "good" already reads as accent */ --positive-soft: var(--accent-soft); /* The one genuine second colour: danger. Formalised so component CSS never hard-codes a red (was a stray #c53030 in base.css). */ --danger: oklch(50% 0.18 27); --danger-soft: color-mix(in oklch, var(--danger) 14%, var(--paper)); /* ---- Pico mapping (buttons, links, focus) --------------------------- */ --pico-primary-background: var(--accent); --pico-primary-hover-background: var(--accent-hover); --pico-primary-inverse: var(--accent-contrast); --pico-primary: var(--accent); --pico-primary-hover: var(--accent-hover); --pico-primary-focus: color-mix(in oklch, var(--accent) 35%, transparent); --pico-primary-underline: color-mix(in oklch, var(--accent) 55%, transparent); --pico-background-color: var(--paper); --pico-color: var(--ink); --pico-muted-color: var(--ink-muted); --pico-muted-border-color: var(--hairline); --pico-card-background-color: var(--paper); --pico-card-border-color: var(--hairline); /* ---- Typography ----------------------------------------------------- */ --font-display: "Fraunces", "Iowan Old Style", "Charter", "Georgia", serif; --font-body: "Instrument Sans", "Helvetica Neue", "Helvetica", sans-serif; --font-data: "JetBrains Mono", "SF Mono", "Menlo", "Consolas", monospace; --pico-font-family: var(--font-body); --pico-font-family-sans-serif: var(--font-body); --pico-font-family-monospace: var(--font-data); /* Type scale — fluid, modular (1.250 minor third). One ratio only. */ --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem); --text-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.95rem); --text-base: clamp(1rem, 0.97rem + 0.18vw, 1.125rem); --text-lg: clamp(1.125rem, 1.07rem + 0.30vw, 1.35rem); --text-xl: clamp(1.35rem, 1.22rem + 0.50vw, 1.70rem); --text-2xl: clamp(1.70rem, 1.50rem + 0.80vw, 2.25rem); --text-3xl: clamp(2.10rem, 1.80rem + 1.20vw, 2.85rem); --text-4xl: clamp(2.60rem, 2.10rem + 2.00vw, 3.75rem); --leading-tight: 1.15; --leading-snug: 1.3; --leading-body: 1.55; /* ---- Spacing — strict 4 px base ------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* ---- Touch targets (WCAG 2.5.8) ------------------------------------ */ --tap-min: 2.75rem; /* 44px — preferred interactive target */ --tap-min-floor: 1.5rem; /* 24px — absolute floor, only when spaced ≥24px */ /* ---- Responsive doctrine reference (see DESIGN.md §6) -------------- Canonical breakpoints are min-width only: 480 / 768 / 1024 / 1280. Short-viewport (landscape) handling keys off max-height: 600px. CSS @media cannot read custom properties, so these live as a comment for humans + the responsive lint, not as tokens. -------------------- */ /* ---- Radius / elevation -------------------------------------------- */ --rec-radius: 12px; --rec-radius-sm: 8px; --rec-radius-lg: 20px; --rec-maxw: 1120px; --rec-gap: var(--space-4); --header-h: 4rem; /* synced live by components.js initHeaderHeightVar() */ /* Used sparingly: sheet, dialog only. Cards rely on hairline borders. */ --rec-shadow: 0 1px 2px color-mix(in oklch, var(--ink) 6%, transparent), 0 8px 24px color-mix(in oklch, var(--ink) 8%, transparent); --rec-shadow-lg: 0 4px 12px color-mix(in oklch, var(--ink) 10%, transparent), 0 24px 60px color-mix(in oklch, var(--ink) 16%, transparent); /* ---- Focus ring — ≥3:1 against both sides, applied via :focus-visible */ --focus-ring: 0 0 0 3px color-mix(in oklch, var(--accent) 55%, transparent); /* ---- Motion --------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* ---- Dark theme (forced) ------------------------------------------- */ [data-theme="dark"] { --paper: oklch(15% 0.015 var(--hue-ink)); --paper-2: oklch(19% 0.018 var(--hue-ink)); --paper-3: oklch(23% 0.020 var(--hue-ink)); --ink: oklch(94% 0.010 var(--hue-paper)); --ink-muted: color-mix(in oklch, var(--ink) 65%, var(--paper)); --ink-subtle: color-mix(in oklch, var(--ink) 40%, var(--paper)); --hairline: color-mix(in oklch, var(--ink) 14%, var(--paper)); --hairline-strong: color-mix(in oklch, var(--ink) 26%, var(--paper)); --accent: oklch(72% 0.13 var(--hue-accent)); --accent-hover: color-mix(in oklch, var(--accent) 88%, var(--paper)); --accent-soft: color-mix(in oklch, var(--accent) 18%, var(--paper)); --accent-ink: color-mix(in oklch, var(--accent) 70%, var(--ink)); --accent-contrast: oklch(15% 0.04 var(--hue-accent)); --danger: oklch(75% 0.14 25); /* lighter for contrast on dark paper */ --danger-soft: color-mix(in oklch, var(--danger) 20%, var(--paper)); --rec-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45); --rec-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.55), 0 24px 60px rgba(0, 0, 0, 0.6); --focus-ring: 0 0 0 3px color-mix(in oklch, var(--accent) 60%, transparent); } /* Follow system when no explicit theme is chosen */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --paper: oklch(15% 0.015 var(--hue-ink)); --paper-2: oklch(19% 0.018 var(--hue-ink)); --paper-3: oklch(23% 0.020 var(--hue-ink)); --ink: oklch(94% 0.010 var(--hue-paper)); --ink-muted: color-mix(in oklch, var(--ink) 65%, var(--paper)); --ink-subtle: color-mix(in oklch, var(--ink) 40%, var(--paper)); --hairline: color-mix(in oklch, var(--ink) 14%, var(--paper)); --hairline-strong: color-mix(in oklch, var(--ink) 26%, var(--paper)); --accent: oklch(72% 0.13 var(--hue-accent)); --accent-hover: color-mix(in oklch, var(--accent) 88%, var(--paper)); --accent-soft: color-mix(in oklch, var(--accent) 18%, var(--paper)); --accent-ink: color-mix(in oklch, var(--accent) 70%, var(--ink)); --accent-contrast: oklch(15% 0.04 var(--hue-accent)); --danger: oklch(75% 0.14 25); --danger-soft: color-mix(in oklch, var(--danger) 20%, var(--paper)); --rec-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45); --rec-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.55), 0 24px 60px rgba(0, 0, 0, 0.6); --focus-ring: 0 0 0 3px color-mix(in oklch, var(--accent) 60%, transparent); } }