/* ============================================================ BOLTON Signal — 01 TOKENS (dual dark/light, v0.1.4) Single source of truth for the design system in CSS land. Colour tokens are MODE-AWARE via CSS light-dark(): the value is chosen from the element's resolved color-scheme. Default color-scheme is "light dark" (follows the OS); an explicit user choice forces it via :root[data-theme="light"|"dark"]. The no-flash prepaint (header.php) sets data-theme before first paint. PROGRESSIVE ENHANCEMENT: every mode-aware colour is declared TWICE — first a plain DARK value (universally supported, the brand default), then the light-dark() form. Browsers without light-dark() ignore the second declaration and keep the dark value (graceful dark-only), so colours are never broken; modern browsers get full dual-mode. Components consume SEMANTIC tokens; older raw names are kept as back-compat aliases. Accent (gold) is the brand constant — only the *mood* flips. ============================================================ */ @layer tokens { :root { /* Default: follow the OS preference. Forced by :root[data-theme] below. */ color-scheme: light dark; /* =========================================================== SEMANTIC COLOUR TOKENS (dark fallback ; light-dark override) =========================================================== */ /* Backgrounds (cool off-white in light, never pure white) */ --bx-bg-page: #0A1A2F; --bx-bg-page: light-dark(#EDF1F7, #0A1A2F); --bx-bg-section: #0E2238; --bx-bg-section: light-dark(#F5F8FC, #0E2238); --bx-bg-deep: #06101F; --bx-bg-deep: light-dark(#E3E9F2, #06101F); /* Surfaces / elevated / glass */ --bx-surface: rgba(255,255,255,0.035); --bx-surface: light-dark(#FFFFFF, rgba(255,255,255,0.035)); --bx-surface-elev: rgba(255,255,255,0.06); --bx-surface-elev: light-dark(#FFFFFF, rgba(255,255,255,0.06)); --bx-surface-border: rgba(200,162,76,0.18); --bx-surface-border: light-dark(#D6DEEA, rgba(200,162,76,0.18)); --bx-glass: rgba(255,255,255,0.035); --bx-glass: light-dark(rgba(255,255,255,0.66), rgba(255,255,255,0.035)); --bx-glass-blur: 14px; /* Text */ --bx-text: #F4F7FB; --bx-text: light-dark(#0E2238, #F4F7FB); --bx-text-2: #C9D4E2; --bx-text-2: light-dark(#3C4F68, #C9D4E2); --bx-text-muted: #8DA2BC; --bx-text-muted: light-dark(#586A82, #8DA2BC); /* Lines / dividers (signal-line hairline, mode-aware) */ --bx-line: #1C3350; --bx-line: light-dark(#D6DEEA, #1C3350); --bx-divider: #16304F; --bx-divider: light-dark(#E1E7F0, #16304F); /* Accent ramp — gold is the brand constant; link/strong variants are AA-safe per mode */ --bx-accent: #C8A24C; /* invariant brand gold */ --bx-accent-hover: #DCC288; --bx-accent-hover: light-dark(#A8842F, #DCC288); --bx-accent-strong: #DCC288; --bx-accent-strong: light-dark(#7E6320, #DCC288); /* Links */ --bx-link: #DCC288; --bx-link: light-dark(#7E6320, #DCC288); --bx-link-hover: #E8D6AC; --bx-link-hover: light-dark(#5E4A1B, #E8D6AC); /* Buttons */ /* RFQ primary CTA — champagne/cream text on a richer brand-gold (v0.2.0). WCAG AA verified: #F4ECD8 on #7E6320 = 4.83; hover #6E5114 = 6.26. Brand gold #C8A24C stays for decoration/glow (--bx-gold). Both modes. */ --bx-btn-primary-bg: #7E6320; /* richer brand-gold, both modes */ --bx-btn-primary-fg: #F4ECD8; /* champagne/cream text (AA on the above) */ --bx-btn-primary-hover-bg: #6E5114; /* darker on hover → more contrast */ --bx-btn-primary-active-bg: #5E4A1B; --bx-btn-secondary-fg: #F4F7FB; --bx-btn-secondary-fg: light-dark(#0E2238, #F4F7FB); --bx-btn-secondary-border: rgba(200,162,76,0.40); --bx-btn-secondary-border: light-dark(#C2CDDD, rgba(200,162,76,0.40)); /* Form fields */ --bx-field-bg: rgba(255,255,255,0.04); --bx-field-bg: light-dark(#FFFFFF, rgba(255,255,255,0.04)); --bx-field-border: #1C3350; --bx-field-border: light-dark(#C2CDDD, #1C3350); --bx-field-text: #F4F7FB; --bx-field-text: light-dark(#0E2238, #F4F7FB); --bx-placeholder: #8DA2BC; --bx-placeholder: light-dark(#67768C, #8DA2BC); /* Disabled controls */ --bx-disabled-bg: rgba(255,255,255,0.04); --bx-disabled-bg: light-dark(#EBEFF5, rgba(255,255,255,0.04)); --bx-disabled-fg: #5C7088; --bx-disabled-fg: light-dark(#6B7B92, #5C7088); /* Status (AA foregrounds) + soft notice backgrounds */ --bx-success: #3FB984; --bx-success: light-dark(#1F8A5B, #3FB984); --bx-warning: #E0A53B; --bx-warning: light-dark(#9C6612, #E0A53B); --bx-danger: #E2574C; --bx-danger: light-dark(#C0392B, #E2574C); --bx-info: #4F9BD9; --bx-info: light-dark(#2C6FA8, #4F9BD9); --bx-success-bg: rgba(63,185,132,0.12); --bx-success-bg: light-dark(#E6F4EC, rgba(63,185,132,0.12)); --bx-warning-bg: rgba(224,165,59,0.12); --bx-warning-bg: light-dark(#FBF0DC, rgba(224,165,59,0.12)); --bx-danger-bg: rgba(226,87,76,0.12); --bx-danger-bg: light-dark(#FBE9E7, rgba(226,87,76,0.12)); --bx-info-bg: rgba(79,155,217,0.12); --bx-info-bg: light-dark(#E6F0F9, rgba(79,155,217,0.12)); /* Shadows / overlays (compose composites from a mode-aware colour) */ --bx-shadow-color-1: rgba(0,0,0,0.40); --bx-shadow-color-1: light-dark(rgba(16,34,56,0.12), rgba(0,0,0,0.40)); --bx-shadow-color-2: rgba(0,0,0,0.60); --bx-shadow-color-2: light-dark(rgba(16,34,56,0.20), rgba(0,0,0,0.60)); --bx-shadow-1: 0 1px 2px var(--bx-shadow-color-1); --bx-shadow-2: 0 12px 40px -16px var(--bx-shadow-color-2); --bx-overlay: rgba(6,16,31,0.70); --bx-overlay: light-dark(rgba(14,34,56,0.45), rgba(6,16,31,0.70)); /* Signal-grid backdrop line — faint dark lines on light, faint light lines on dark. */ --bx-grid-line: rgba(255,255,255,0.045); --bx-grid-line: light-dark(rgba(11,26,46,0.055), rgba(255,255,255,0.045)); /* Focus ring (perceivable on both backgrounds) */ --bx-focus-ring: #C8A24C; --bx-focus-ring: light-dark(#7E6320, #C8A24C); --bx-focus: 0 0 0 3px var(--bx-focus-ring); /* Navigation states */ --bx-nav-fg: #F4F7FB; --bx-nav-fg: light-dark(#0E2238, #F4F7FB); --bx-nav-hover: #C8A24C; --bx-nav-active: #C8A24C; /* Gold glow — gold is invariant, so this is mode-neutral */ --bx-glow-gold: 0 0 0 1px rgba(200,162,76,0.25), 0 8px 40px -12px rgba(200,162,76,0.35); /* "Ink" = invariant dark. The cinematic hero band uses these so it stays dark in BOTH modes (a deliberate premium pattern preserving the signal-line identity). Documented in CLARIFICATIONS. */ --bx-ink: #0A1A2F; --bx-ink-2: #06101F; --bx-ink-line: #1C3350; --bx-ink-text: #F4F7FB; --bx-ink-text-2: #C9D4E2; --bx-ink-muted: #8DA2BC; /* =========================================================== BACK-COMPAT ALIASES — existing component layers consume these raw names; aliasing to the semantic tokens makes them flip. =========================================================== */ --bx-base: var(--bx-bg-page); --bx-base-midtone: var(--bx-bg-section); --bx-navy-deep: var(--bx-bg-deep); --bx-navy-line: var(--bx-line); --bx-contrast: var(--bx-text); --bx-contrast-midtone: var(--bx-text-2); --bx-steel: var(--bx-text-muted); --bx-steel-dim: #5C7088; --bx-steel-dim: light-dark(#586A82, #5C7088); --bx-surface-2: var(--bx-surface-elev); --bx-gold-deep: var(--bx-accent-strong); --bx-gold: var(--bx-accent); --bx-gold-light: #DCC288; --bx-gold-light: light-dark(#A8842F, #DCC288); --bx-gold-pale: #E8D6AC; --bx-gold-pale: light-dark(#8A6E26, #E8D6AC); --bx-champagne: #F4ECD8; --bx-champagne: light-dark(#8A7330, #F4ECD8); --bx-cream: var(--bx-text); /* display/headings → primary text (flips) */ --bx-border-hair: 1px solid var(--bx-line); /* --- Typography (mode-invariant) --- */ --bx-font-sans: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --bx-font-display: var(--bx-font-sans); --bx-font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; --bx-fs-xs: 0.78rem; --bx-fs-sm: 0.875rem; --bx-fs-base: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem); --bx-fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); --bx-fs-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); --bx-fs-2xl: clamp(2rem, 1.6rem + 2vw, 3rem); --bx-fs-display: clamp(2.5rem, 1.8rem + 3.4vw, 4.5rem); --bx-fs-hero: clamp(3rem, 2rem + 5vw, 6rem); --bx-lh-tight: 1.12; --bx-lh-snug: 1.35; --bx-lh-body: 1.7; --bx-tracking-label: 0.14em; /* --- Spacing --- */ --bx-sp-20: 0.5rem; --bx-sp-30: 1rem; --bx-sp-40: 1.5rem; --bx-sp-50: 2.5rem; --bx-sp-60: 4rem; --bx-sp-70: 6rem; --bx-sp-80: 9rem; /* --- Layout --- */ --bx-content: 760px; --bx-wide: 1200px; --bx-gutter: clamp(1rem, 4vw, 2rem); --bx-header-offset: 76px; /* --- Borders / radius --- */ --bx-radius-sm: 4px; --bx-radius: 8px; --bx-radius-lg: 16px; --bx-radius-pill: 999px; /* --- Motion --- */ --bx-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --bx-dur-1: 180ms; --bx-dur-2: 320ms; --bx-dur-3: 600ms; } /* Explicit user selection forces the scheme (overrides the OS default). */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Reduced motion neutralises durations globally. */ @media (prefers-reduced-motion: reduce) { :root { --bx-dur-1: 0.001ms; --bx-dur-2: 0.001ms; --bx-dur-3: 0.001ms; } } }