/* Crown Leads design tokens — Session 20. * * Single source of truth for color, typography, spacing, radius, shadow, * transition, and z-index across the dashboard. Loaded BEFORE app.css so * every existing selector can reference tokens via var(--token-name). * * Theme switching: `data-theme` attribute on . Light is the default * (`:root` block); dark theme overrides via `[data-theme="dark"]` block. * An external pre-paint script (`/static/js/theme-init.js`, CSP-safe; the * dashboard's `script-src 'self'` directive forbids inline scripts) reads * localStorage and applies the attribute before first render to prevent * theme-flash. * * Token taxonomy (per ADR-style design notes in docs/design/design_system.md): * - color-bg-* : surface backgrounds, progressively elevated * - color-text-* : text on those surfaces (primary/secondary/muted/inverse) * - color-border-* : subtle / default / strong border hierarchy * - color-accent-* : single interactive-element accent (primary/hover/active) * - color-{state}-* : semantic state pairs (success/warning/danger/info; -bg + -fg) * - color-focus-ring : a11y focus state * - font-{family,size,weight}, line-height, tracking : typography scale * - space-{n} : 4px-base spacing (0.25rem * n) * - radius-{size} : 0 / sm / md / lg / full * - shadow-{size} : sm / md / lg / focus-ring * - duration-/ease- : transition primitives * - z-{tier} : stacking hierarchy * * Backward-compat: legacy short-name variables (--fg, --bg, --card, etc.) * declared in app.css continue to exist and now alias to the new tokens. * * Deliberate file-size exception: this file may exceed the 500 LOC project * convention (CLAUDE.md § 3.4). Tokens are configuration data, not logic; * splitting them across files defeats the single-source-of-truth purpose. */ /* =========================================================================== LIGHT THEME (default) ========================================================================= */ :root { /* --- Color: surface --- */ --color-bg-primary: #ffffff; --color-bg-secondary: #f5f6f8; --color-bg-tertiary: #eef1f4; --color-bg-elevated: #f8f9fb; /* --- Color: text --- */ --color-text-primary: #1c1f23; --color-text-secondary: #3b4046; --color-text-muted: #5a6470; --color-text-inverse: #ffffff; /* --- Color: border --- */ --color-border-subtle: #e3e6ea; --color-border-default: #d8dde2; --color-border-strong: #b0b8c1; /* --- Color: accent (single blue) --- */ --color-accent-primary: #1d4ed8; --color-accent-primary-hover: #1e40af; --color-accent-primary-active: #1e3a8a; --color-accent-subtle-bg: #e8f0fe; /* --- Color: semantic state (-bg / -fg pairs) --- */ --color-success-bg: #dcfce7; --color-success-fg: #166534; --color-warning-bg: #fef3c7; --color-warning-fg: #92400e; --color-danger-bg: #fee2e2; --color-danger-fg: #b91c1c; --color-info-bg: #e8f0fe; --color-info-fg: #1a4f9d; /* --- Color: focus ring --- */ --color-focus-ring: rgba(29, 78, 216, 0.45); /* --- Typography: family --- */ --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; /* --- Typography: size (8-step scale + display) --- */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-display: 2.25rem; /* 36px */ /* --- Typography: line-height --- */ --line-height-tight: 1.2; --line-height-base: 1.5; --line-height-loose: 1.75; /* --- Typography: weight --- */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* --- Typography: tracking --- */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; /* --- Spacing (4px base) --- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* --- Border radius --- */ --radius-none: 0; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-full: 9999px; /* --- Shadows --- */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05); --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.05); --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.05); --shadow-focus-ring: 0 0 0 3px var(--color-focus-ring); /* --- Transitions --- */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 300ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* --- Z-index stack --- */ --z-base: 1; --z-sticky: 10; --z-dropdown: 100; --z-modal: 1000; --z-toast: 10000; /* --- Backwards-compat aliases (legacy app.css var names) --- */ --fg: var(--color-text-primary); --bg: var(--color-bg-secondary); --card: var(--color-bg-primary); --muted: var(--color-text-muted); --border: var(--color-border-default); --accent: var(--color-accent-primary); --accent-fg: var(--color-text-inverse); --error: var(--color-danger-fg); --error-bg: var(--color-danger-bg); --ok: var(--color-success-fg); --ok-bg: var(--color-success-bg); } /* =========================================================================== DARK THEME Overrides only the color tokens (typography + spacing + radius are theme-agnostic). Shadow opacities increase since shadows must be more prominent on dark backgrounds to register. ========================================================================= */ [data-theme="dark"] { /* --- Color: surface (slate-900 ⇒ slate-800 hierarchy) --- */ --color-bg-primary: #0f172a; /* slate-900 */ --color-bg-secondary: #1e293b; /* slate-800 */ --color-bg-tertiary: #334155; /* slate-700 */ --color-bg-elevated: #2a3a52; /* between slate-800 and slate-700 */ /* --- Color: text (slate-100 baseline; never pure white) --- */ --color-text-primary: #f1f5f9; /* slate-100 */ --color-text-secondary: #cbd5e1; /* slate-300 */ --color-text-muted: #94a3b8; /* slate-400 */ --color-text-inverse: #0f172a; /* --- Color: border --- */ --color-border-subtle: #334155; --color-border-default: #475569; --color-border-strong: #64748b; /* --- Color: accent (slightly desaturated in dark) --- */ --color-accent-primary: #60a5fa; --color-accent-primary-hover: #93c5fd; --color-accent-primary-active: #3b82f6; --color-accent-subtle-bg: #1e3a8a; /* --- Color: semantic state --- */ --color-success-bg: #14532d; --color-success-fg: #86efac; --color-warning-bg: #78350f; --color-warning-fg: #fcd34d; --color-danger-bg: #7f1d1d; --color-danger-fg: #fca5a5; --color-info-bg: #1e3a8a; --color-info-fg: #93c5fd; /* --- Color: focus ring --- */ --color-focus-ring: rgba(96, 165, 250, 0.55); /* --- Shadows (heavier opacity for dark surfaces) --- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.3); /* Backward-compat aliases re-resolve through the dark color tokens above. */ } /* =========================================================================== `prefers-color-scheme` fallback Used only when the operator has NO explicit localStorage preference; the pre-paint script handles this and sets data-theme accordingly. The CSS media query stays as a defense-in-depth fallback for environments where JavaScript is disabled. ========================================================================= */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Inherit dark-theme tokens. Defensive: only triggers when the inline script never ran (JS disabled) and `data-theme` is not explicitly set to "light". Avoids surprising the operator who has chosen light. */ } }