/* BarFlow Design System v2 — Tokens * Sprint 7.1 * Reference: design_system/HANDOFF.md sections 2.1–2.7 * Spec: docs/superpowers/specs/2026-05-06-frontend-refactor-design-system-v2-design.md * * Hydration contract: * * * Coexistence note: * Legacy `--bf-*` variables remain defined inline in base.html during the * migration window (Sprint 7.1 → 7.18). They are aliased to the new tokens * below so existing `bf-*` classes keep working until cleanup in 7.18. */ /* ========================================================================= * 1. ROOT — fonts, spacing, radius, shadow, accent (OKLCH parameterised) * ========================================================================= */ :root { /* Typography */ --font-display: 'Fraunces', 'Times New Roman', serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Radius scale */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* Shadow scale */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.22); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.30); --shadow-glow: 0 0 0 1px var(--accent-line), 0 0 24px -8px var(--accent); /* Z-index scale — semantic layers (shell sidebar/topbar use 40-50). dropdown sits just above the sticky chrome; modals/toasts/tooltips above. */ --z-dropdown: 60; --z-modal-backdrop: 200; --z-modal: 210; --z-toast: 300; --z-tooltip: 400; /* Accent — parameterised in OKLCH so only the hue varies between presets */ --accent-h: 38; /* default = gold */ --accent-s: 0.13; --accent-l: 0.65; --accent: oklch(var(--accent-l) var(--accent-s) var(--accent-h)); --accent-fg: #0e0d0c; --accent-soft: oklch(var(--accent-l) var(--accent-s) var(--accent-h) / 0.16); --accent-line: oklch(var(--accent-l) var(--accent-s) var(--accent-h) / 0.32); } /* ========================================================================= * 2. ACCENT PRESETS — only the hue changes * ========================================================================= */ :root[data-accent="gold"] { --accent-h: 38; } :root[data-accent="emerald"] { --accent-h: 155; } :root[data-accent="azure"] { --accent-h: 230; } :root[data-accent="violet"] { --accent-h: 295; } :root[data-accent="copper"] { --accent-h: 25; } /* ========================================================================= * 3. THEME — dark (default) and light * ========================================================================= */ :root, :root[data-theme="dark"] { --bg: #0e0d0c; --bg-elev-1: #161413; --bg-elev-2: #1c1a18; --bg-elev-3: #232120; --text: #ece9e2; --text-muted: #a39e94; --text-dim: #868079; --border: rgba(255, 251, 240, 0.08); --border-strong: rgba(255, 251, 240, 0.14); --surface-1: rgba(255 255 255 / 0.04); /* subtle fill (card/kpi bg) */ --surface-2: rgba(255 255 255 / 0.08); /* control fill (secondary buttons, chips) */ --surface-hover: rgba(255 255 255 / 0.06); /* hover fill */ --surface-strong: rgba(255 255 255 / 0.14); /* active/strong fill */ --shell-surface: rgba(10 10 10 / 0.8); --shell-surface-strong: rgba(10 10 10 / 0.95); --success: oklch(0.72 0.13 155); --warn: oklch(0.78 0.14 75); --danger: oklch(0.68 0.18 25); --info: oklch(0.72 0.10 230); } :root[data-theme="light"] { --bg: #faf8f3; --bg-elev-1: #ffffff; --bg-elev-2: #ffffff; --bg-elev-3: #f4f1ea; --text: #1a1816; --text-muted: #5b554d; --text-dim: #747065; --border: rgba(20, 18, 14, 0.10); --border-strong: rgba(20, 18, 14, 0.18); --surface-1: rgba(20 18 14 / 0.03); --surface-2: rgba(20 18 14 / 0.05); --surface-hover: rgba(20 18 14 / 0.04); --surface-strong: rgba(20 18 14 / 0.09); --shell-surface: rgba(255 255 255 / 0.8); --shell-surface-strong: rgba(255 255 255 / 0.92); --success: oklch(0.55 0.13 155); --warn: oklch(0.60 0.14 75); --danger: oklch(0.50 0.18 25); --info: oklch(0.55 0.10 230); } /* ========================================================================= * 4. TYPOGRAPHY VARIANTS * serif-display = default (Fraunces display + Inter body) * sans = Inter for everything * mono-display = JetBrains Mono for display * ========================================================================= */ :root[data-type="serif-display"] { /* default — no overrides */ } :root[data-type="sans"] { --font-display: var(--font-sans); } :root[data-type="mono-display"] { --font-display: var(--font-mono); } /* ========================================================================= * 5. DENSITY — controls padding scale across cards/cells * Components opt-in via padding: var(--density-pad-*). * ========================================================================= */ :root, :root[data-density="comfortable"] { --density-pad-card: var(--space-6); --density-pad-cell: var(--space-4); --density-row-h: 44px; } :root[data-density="compact"] { /* Multiplier of 0.75 per HANDOFF section 2.5 */ --density-pad-card: 18px; --density-pad-cell: 12px; --density-row-h: 36px; } /* ========================================================================= * 6. CARDS VARIANTS * flat = no shadow, border only * elevated = default — uses --shadow-md * glass = translucent surface + backdrop blur * ========================================================================= */ :root, :root[data-cards="elevated"] { --card-bg: var(--bg-elev-2); --card-shadow: var(--shadow-md); --card-blur: 0; } :root[data-cards="flat"] { --card-bg: var(--bg-elev-2); --card-shadow: 0 0 0 0 transparent; --card-blur: 0; } :root[data-cards="glass"] { --card-bg: rgba(255, 255, 255, 0.04); --card-shadow: var(--shadow-md); --card-blur: 20px; } /* ========================================================================= * 7. BASE ELEMENTS — minimal surface application of the tokens. * Components.css (Sprint 7.5+) provides primitives. tokens.css only * establishes baseline body/text so any unstyled page already respects * the theme. * ========================================================================= */ html { color-scheme: dark; font-family: var(--font-sans); background-color: var(--bg); color: var(--text); } html[data-theme="light"] { color-scheme: light; } body { font-family: var(--font-sans); }