/* * LuvPM Design System — tokens.css * Three-layer token architecture per 01_Design-System-Spec.md: * 1. Reference (--ref-*) raw color ramps, type/space/radius/motion scales * 2. Semantic (--surface-*, --text-*, --border-*, --accent-*, --status-*) * 3. Component (--card-*, --chip-*) * * Theming: light is the default. Dark applies via * @media (prefers-color-scheme: dark), then an explicit [data-theme="dark"] * or [data-theme="light"] attribute on always wins over both the * default and the system preference (higher selector specificity). * Components must consume semantic/component tokens only — never --ref-*. */ /* ---------------------------------------------------------------------- */ /* 1. Reference layer */ /* ---------------------------------------------------------------------- */ :root { /* Slate ramp — neutral surface + text scale, 0 (white) through 900 (near-black) */ --ref-slate-0: #ffffff; --ref-slate-50: #f8fafc; --ref-slate-100: #f1f5f9; --ref-slate-200: #e2e8f0; --ref-slate-300: #cbd5e1; --ref-slate-400: #94a3b8; --ref-slate-500: #64748b; --ref-slate-600: #475569; --ref-slate-700: #334155; --ref-slate-800: #1e293b; --ref-slate-900: #0f172a; --ref-slate-950: #060a14; /* Indigo — the single interactive accent */ --ref-indigo-50: #eef2ff; --ref-indigo-100: #e0e7ff; --ref-indigo-200: #c7d2fe; --ref-indigo-300: #a5b4fc; --ref-indigo-400: #818cf8; --ref-indigo-500: #6366f1; --ref-indigo-600: #4f46e5; --ref-indigo-700: #4338ca; --ref-indigo-800: #3730a3; --ref-indigo-900: #312e81; /* Status ramps */ --ref-green-50: #ecfdf5; --ref-green-100: #d1fae5; --ref-green-300: #6ee7b7; --ref-green-500: #10b981; --ref-green-600: #059669; --ref-green-700: #047857; --ref-green-900: #064e3b; --ref-amber-50: #fffbeb; --ref-amber-100: #fef3c7; --ref-amber-300: #fcd34d; --ref-amber-500: #f59e0b; --ref-amber-600: #d97706; --ref-amber-700: #b45309; --ref-amber-900: #78350f; --ref-red-50: #fef2f2; --ref-red-100: #fee2e2; --ref-red-300: #fca5a5; --ref-red-500: #ef4444; --ref-red-600: #dc2626; --ref-red-700: #b91c1c; --ref-red-900: #7f1d1d; /* Stale — amber-gray, deliberately distinct from attention amber */ --ref-stale-50: #f7f4ee; --ref-stale-100: #ede5d4; --ref-stale-300: #cbb98e; --ref-stale-500: #a1854f; --ref-stale-600: #866d3e; --ref-stale-700: #6a5630; --ref-stale-900: #3a2f1c; /* Typography */ --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 2rem; --leading-body: 1.5; --leading-heading: 1.2; /* 4px base grid */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; /* Shape */ --radius-control: 6px; --radius-card: 10px; --radius-full: 999px; /* Motion — respects prefers-reduced-motion at the component layer */ --motion-fast: 120ms; --motion-base: 160ms; --motion-slow: 200ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ---------------------------------------------------------------------- */ /* 2. Semantic layer — light (default) */ /* ---------------------------------------------------------------------- */ :root { color-scheme: light; --surface-0: var(--ref-slate-50); --surface-1: var(--ref-slate-0); --surface-2: var(--ref-slate-100); --surface-overlay: var(--ref-slate-0); --text-primary: var(--ref-slate-900); --text-secondary: var(--ref-slate-600); --text-muted: var(--ref-slate-400); --text-on-accent: #ffffff; --border-default: var(--ref-slate-200); --border-strong: var(--ref-slate-300); --accent: var(--ref-indigo-600); --accent-hover: var(--ref-indigo-700); --accent-active: var(--ref-indigo-800); --accent-contrast: #ffffff; --accent-soft: var(--ref-indigo-50); --accent-soft-border: var(--ref-indigo-100); --status-ok: var(--ref-green-700); --status-ok-bg: var(--ref-green-50); --status-ok-border: var(--ref-green-100); --status-attention: var(--ref-amber-700); --status-attention-bg: var(--ref-amber-50); --status-attention-border: var(--ref-amber-100); --status-problem: var(--ref-red-700); --status-problem-bg: var(--ref-red-50); --status-problem-border: var(--ref-red-100); --status-neutral: var(--ref-slate-600); --status-neutral-bg: var(--ref-slate-100); --status-neutral-border: var(--ref-slate-200); --status-stale: var(--ref-stale-700); --status-stale-bg: var(--ref-stale-50); --status-stale-border: var(--ref-stale-100); --focus-ring: var(--ref-indigo-500); --shadow-color: 220 40% 20%; --shadow-overlay: 0 16px 40px -12px hsl(var(--shadow-color) / 0.35); --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.06); --danger: var(--ref-red-600); --danger-hover: var(--ref-red-700); } /* ---------------------------------------------------------------------- */ /* 2b. Semantic layer — dark (system preference) */ /* ---------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --surface-0: var(--ref-slate-950); --surface-1: var(--ref-slate-900); --surface-2: var(--ref-slate-800); --surface-overlay: var(--ref-slate-900); --text-primary: var(--ref-slate-50); --text-secondary: var(--ref-slate-300); --text-muted: var(--ref-slate-500); --text-on-accent: #ffffff; --border-default: var(--ref-slate-800); --border-strong: var(--ref-slate-700); --accent: var(--ref-indigo-400); --accent-hover: var(--ref-indigo-300); --accent-active: var(--ref-indigo-200); --accent-contrast: var(--ref-slate-950); --accent-soft: rgb(99 102 241 / 0.14); --accent-soft-border: rgb(99 102 241 / 0.28); --status-ok: var(--ref-green-300); --status-ok-bg: rgb(16 185 129 / 0.12); --status-ok-border: rgb(16 185 129 / 0.28); --status-attention: var(--ref-amber-300); --status-attention-bg: rgb(245 158 11 / 0.12); --status-attention-border: rgb(245 158 11 / 0.28); --status-problem: var(--ref-red-300); --status-problem-bg: rgb(239 68 68 / 0.14); --status-problem-border: rgb(239 68 68 / 0.3); --status-neutral: var(--ref-slate-300); --status-neutral-bg: var(--ref-slate-800); --status-neutral-border: var(--ref-slate-700); --status-stale: var(--ref-stale-300); --status-stale-bg: rgb(161 133 79 / 0.16); --status-stale-border: rgb(161 133 79 / 0.32); --focus-ring: var(--ref-indigo-300); --shadow-color: 220 60% 2%; --shadow-overlay: 0 16px 40px -12px hsl(var(--shadow-color) / 0.6); --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.4); --danger: var(--ref-red-500); --danger-hover: var(--ref-red-300); } } /* ---------------------------------------------------------------------- */ /* 2c. Explicit theme override — always wins over default and system */ /* ---------------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --surface-0: var(--ref-slate-50); --surface-1: var(--ref-slate-0); --surface-2: var(--ref-slate-100); --surface-overlay: var(--ref-slate-0); --text-primary: var(--ref-slate-900); --text-secondary: var(--ref-slate-600); --text-muted: var(--ref-slate-400); --text-on-accent: #ffffff; --border-default: var(--ref-slate-200); --border-strong: var(--ref-slate-300); --accent: var(--ref-indigo-600); --accent-hover: var(--ref-indigo-700); --accent-active: var(--ref-indigo-800); --accent-contrast: #ffffff; --accent-soft: var(--ref-indigo-50); --accent-soft-border: var(--ref-indigo-100); --status-ok: var(--ref-green-700); --status-ok-bg: var(--ref-green-50); --status-ok-border: var(--ref-green-100); --status-attention: var(--ref-amber-700); --status-attention-bg: var(--ref-amber-50); --status-attention-border: var(--ref-amber-100); --status-problem: var(--ref-red-700); --status-problem-bg: var(--ref-red-50); --status-problem-border: var(--ref-red-100); --status-neutral: var(--ref-slate-600); --status-neutral-bg: var(--ref-slate-100); --status-neutral-border: var(--ref-slate-200); --status-stale: var(--ref-stale-700); --status-stale-bg: var(--ref-stale-50); --status-stale-border: var(--ref-stale-100); --focus-ring: var(--ref-indigo-500); --shadow-color: 220 40% 20%; --shadow-overlay: 0 16px 40px -12px hsl(var(--shadow-color) / 0.35); --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.06); --danger: var(--ref-red-600); --danger-hover: var(--ref-red-700); } :root[data-theme="dark"] { color-scheme: dark; --surface-0: var(--ref-slate-950); --surface-1: var(--ref-slate-900); --surface-2: var(--ref-slate-800); --surface-overlay: var(--ref-slate-900); --text-primary: var(--ref-slate-50); --text-secondary: var(--ref-slate-300); --text-muted: var(--ref-slate-500); --text-on-accent: #ffffff; --border-default: var(--ref-slate-800); --border-strong: var(--ref-slate-700); --accent: var(--ref-indigo-400); --accent-hover: var(--ref-indigo-300); --accent-active: var(--ref-indigo-200); --accent-contrast: var(--ref-slate-950); --accent-soft: rgb(99 102 241 / 0.14); --accent-soft-border: rgb(99 102 241 / 0.28); --status-ok: var(--ref-green-300); --status-ok-bg: rgb(16 185 129 / 0.12); --status-ok-border: rgb(16 185 129 / 0.28); --status-attention: var(--ref-amber-300); --status-attention-bg: rgb(245 158 11 / 0.12); --status-attention-border: rgb(245 158 11 / 0.28); --status-problem: var(--ref-red-300); --status-problem-bg: rgb(239 68 68 / 0.14); --status-problem-border: rgb(239 68 68 / 0.3); --status-neutral: var(--ref-slate-300); --status-neutral-bg: var(--ref-slate-800); --status-neutral-border: var(--ref-slate-700); --status-stale: var(--ref-stale-300); --status-stale-bg: rgb(161 133 79 / 0.16); --status-stale-border: rgb(161 133 79 / 0.32); --focus-ring: var(--ref-indigo-300); --shadow-color: 220 60% 2%; --shadow-overlay: 0 16px 40px -12px hsl(var(--shadow-color) / 0.6); --shadow-card: 0 1px 2px hsl(var(--shadow-color) / 0.4); --danger: var(--ref-red-500); --danger-hover: var(--ref-red-300); } /* ---------------------------------------------------------------------- */ /* 3. Component layer — only where reuse warrants a dedicated token */ /* ---------------------------------------------------------------------- */ :root { --card-bg: var(--surface-1); --card-border: var(--border-default); --card-radius: var(--radius-card); --card-padding: var(--space-6); --card-shadow: var(--shadow-card); --chip-radius: var(--radius-full); --chip-padding-y: 2px; --chip-padding-x: var(--space-3); --chip-font-size: var(--text-xs); --chip-gap: var(--space-1); /* Cross-surface chart palette aliases — src/views/charts.mjs (WO-PM-012 * Reports) renders SVG fills/strokes against these names directly (they * were the old public/app.css's dark-only palette). Aliasing them to the * theme-aware semantic tokens above (rather than loading the old, * dark-only app.css) makes charts recolor correctly with the light/dark * toggle with zero changes to chart-rendering code. One indirection * layer, defined once — CSS custom properties re-resolve per theme * automatically, no per-theme duplication needed. */ --cyan: var(--accent); --violet: var(--accent-hover); --orchid: var(--accent-active); --blue: var(--status-ok); --amber: var(--status-attention); --red: var(--status-problem); --muted: var(--text-muted); --border: var(--border-default); --ink: var(--text-primary); } @font-face { font-family: Inter; src: url("/assets/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }