/* ============================================================================ * tokens.css — SINGLE SOURCE OF TRUTH for design tokens (Stage 7a) * ---------------------------------------------------------------------------- * Load this FIRST in every page's , before style.css and all other * stylesheets, so :root cascades everywhere. * * 7a is ADDITIVE and ZERO-VISUAL-CHANGE: style.css / project.css still define * the legacy tokens and, because they load AFTER this file, their values win * for now. The alias block at the bottom is a dormant landing pad — it only * takes effect in 7b+ when the legacy :root blocks are removed. The single * exception is --link, which no file defines today (a latent bug), so defining * it here is the one intended fix in 7a. * * Dark mode: prefers-color-scheme ONLY (verified 7a precondition — the app has * no manual theme toggle; the [data-theme]/.dark selectors in components are * dead code, retired in 7c/7d). Accents (Okabe-Ito) are CONSTANT across themes; * only surface/text/border flip. * ==========================================================================*/ :root { /* ---- Okabe-Ito raw palette (colorblind-safe; theme-independent) -------- */ --oi-black: #000000; --oi-orange: #E69F00; --oi-sky: #56B4E9; --oi-green: #009E73; --oi-yellow: #F0E442; --oi-blue: #0072B2; --oi-vermilion: #D55E00; --oi-purple: #CC79A7; /* ---- Semantic ACCENTS — CONSTANT in light & dark ---------------------- */ --color-primary: var(--oi-orange); /* brand / primary action */ --color-primary-hover: #cf8f00; /* darkened orange for :hover */ --color-primary-ink: #1a1a1a; /* dark text on orange */ --color-link: var(--oi-blue); --color-info: var(--oi-blue); --color-success: var(--oi-green); --color-danger: var(--oi-vermilion);/* destructive */ --color-danger-ink: #000000; /* text on vermilion (WCAG: #000=5.43:1 pass; #fff=3.87 fails normal AA) */ --color-warning: var(--oi-orange); --color-focus: var(--oi-blue); /* focus ring */ /* ---- RADIUS scale ----------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; --radius-circle: 50%; /* ---- SPACING scale (4px base) ----------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* ---- TYPE scale ------------------------------------------------------- */ --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-brand: var(--font-body); /* 7f replaces with a real font */ --fs-sm: 0.85rem; --fs-base: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; --lh-body: 1.6; /* ---- Z-INDEX layering ------------------------------------------------- */ --z-overlay: 1000; --z-modal: 1010; --z-popover: 1020; --z-toast: 1030; /* ---- SURFACE / TEXT / BORDER — LIGHT defaults ------------------------- */ --surface: #ffffff; --surface-raised: #f5f6f8; --surface-sunken: #eef0f3; --surface-header: #eef0f3; --surface-overlay: #ffffff; --text: #1a1d21; --text-muted: #5b6470; --text-on-accent: var(--color-primary-ink); --border: #d9dde2; --border-strong: #c2c8cf; --divider: rgba(0, 0, 0, .12); --backdrop: rgba(0, 0, 0, .55); --shadow-color: rgba(0, 0, 0, .18); --overlay-busy: rgba(20, 22, 30, .55); /* ---- ELEVATION (depends on --shadow-color above) --------------------- */ --shadow-1: 0 1px 3px var(--shadow-color); --shadow-2: 0 4px 12px var(--shadow-color); --shadow-3: 0 12px 32px rgba(0, 0, 0, .28); /* modals */ } @media (prefers-color-scheme: dark) { :root { --surface: #0f1113; --surface-raised: #191c1f; --surface-sunken: #23272b; --surface-header: #16191c; --surface-overlay: #1c1f24; --text: #f1f3f5; --text-muted: #aeb6bf; --border: #343a40; --border-strong: #454b52; --divider: rgba(255, 255, 255, .12); --backdrop: rgba(0, 0, 0, .65); --shadow-color: rgba(0, 0, 0, .5); --overlay-busy: rgba(10, 11, 15, .6); /* accents (--color-*) intentionally NOT overridden */ } } /* ============================================================================ * BACKWARD-COMPAT ALIASES (dormant in 7a — legacy :root blocks still win) * ---------------------------------------------------------------------------- * These map every legacy global token onto a new token so that, when the * legacy :root blocks are removed in 7b/7c, existing component CSS keeps * resolving. They are shadowed today by style.css / project.css (which load * after this file), so 7a is zero-visual-change. Per-site retriage of the * accent semantics (blue->orange on ai-title/jump, amber->orange highlights, * grey --danger -> vermilion) happens as each component migrates in 7b/7c. * ==========================================================================*/ :root { /* accents */ --primary: var(--color-focus); /* legacy blue #4a89dc -> blue focus token */ --secondary: var(--text-muted); /* legacy grey #888 (button/grey roles retriaged 7b) */ --important: var(--color-primary); /* legacy amber #ffc440 -> brand orange */ --danger: var(--color-danger); /* legacy GREY #dbdbdb -> real vermilion (7b triage) */ --link: var(--color-link); /* FIX: was undefined -> Okabe-Ito blue */ /* text */ --mute: var(--text-muted); --text-main: var(--text); --text-secondary: var(--text); --text-button: var(--text); --text-footer: var(--text-muted); /* surfaces */ --background-main: var(--surface); --background-sidebar: var(--surface-raised); --background-card: var(--surface-raised); --background-secondary: var(--surface-raised); --background-header: var(--surface-header); --background-status: var(--surface-sunken); --background-input: var(--surface-sunken); --background-action: var(--surface-sunken); --background-busy: var(--overlay-busy); /* borders */ --border-generic: var(--border); --border-input: var(--border-strong); /* modal (legacy names from project.css) */ --panel: var(--surface-overlay); --panel-bg: var(--surface-overlay); }