/* ============================================================ tokens.css โ€” BR Scripts design tokens (Tiger direction) Single source of truth for all design tokens, light + dark. Loaded BEFORE theme_br.css, AFTER styles.css/layout_v2_wide.css. Do NOT paraphrase these into different variable names. ============================================================ */ :root { /* ----- geometry ----- */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --sidebar-w: 232px; --sidebar-w-collapsed: 60px; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Polish 2: --font-display now resolves to Inter. Hierarchy comes from weight + size, not a family-switch. (Plan v1 / Spec v1 ยง3 still names Fraunces; that doc cleanup is deferred to a separate PR.) */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* ----- light surfaces ----- */ --bg: #f7f9fc; --bg-elev: #ffffff; --surface: #ffffff; --surface-2: #eef3f8; --surface-hover: #e5ecf3; --border: #dde4ec; --border-strong: #c7d1dc; --text: #1b2433; --text-muted: #5a6778; --text-subtle: #8a95a5; /* ----- brand ----- */ --brand: #e86a2c; --brand-fg: #ffffff; --brand-soft: #fde5d6; --brand-deep: #c8541c; --accent: #2b6cb0; --accent-soft: #dceaf7; /* ----- status ----- */ --ok: #2f9e65; --ok-soft: #d4ede0; --warn: #d68c1c; --warn-soft: #fbe9c8; --danger: #d0453a; --danger-soft: #f8dad5; --info: #2b6cb0; --info-soft: #dceaf7; /* ----- sidebar ----- */ --sidebar-bg: #ffffff; --sidebar-fg: #374151; --sidebar-muted: #8a95a5; --sidebar-active-bg: #fde5d6; --sidebar-active-fg: #c8541c; --sidebar-border: #e5ebf2; /* ----- charts ----- */ --chart-1: #e86a2c; --chart-2: #2b6cb0; --chart-3: #8b5cf6; --chart-4: #2f9e65; /* ----- elevation ----- */ --shadow-sm: 0 1px 2px rgba(20, 30, 50, 0.04); --shadow: 0 2px 8px rgba(20, 30, 50, 0.06); --shadow-lg: 0 10px 30px rgba(20, 30, 50, 0.08); } /* ============================================================ DARK THEME โ€” toggled via . FOUC-prevention bootstrap (theme_bootstrap.js) sets data-theme before any stylesheet renders. ============================================================ */ :root[data-theme="dark"] { --bg: #0f131a; --bg-elev: #171c25; --surface: #1b2230; --surface-2: #222a39; --surface-hover: #2a3345; --border: #2c3547; --border-strong: #3b465c; --text: #e6eaf2; --text-muted: #9aa5b8; --text-subtle: #6e7a8f; --brand: #ff8750; /* --brand-fg is the text/icon color stamped on a --brand surface (primary buttons, active filter chips, sidebar mark). White on the dark-mode brand #ff8750 = 2.38 contrast (WCAG AA fail); near-black gives ~9. (P0 dark-mode contrast fix 2026-05-26.) */ --brand-fg: #1f1106; --brand-soft: #3b2517; --brand-deep: #ff8750; --accent: #4f8cc9; --accent-soft: #182a3e; --ok: #3ab87d; --ok-soft: #1a3024; --warn: #e0a33a; --warn-soft: #3a2d12; --danger: #e85c4d; --danger-soft: #3a1f1a; --info: #4f8cc9; --info-soft: #182a3e; --sidebar-bg: #0a0e15; --sidebar-fg: #c3cbd9; --sidebar-muted: #6e7a8f; --sidebar-active-bg: #3b2517; --sidebar-active-fg: #ff8750; --sidebar-border: #1a2030; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow: 0 2px 10px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6); } /* ============================================================ FULL-BLEED CONTRACT โ€” load-bearing. Prevents inner wrappers from re-introducing max-widths. ============================================================ */ body.has-sidebar main, body.has-sidebar main > * { max-width: none !important; } /* Single-column read-width override for narrow forms / prose. */ .form-narrow, .prose { max-width: 720px !important; }