/* ───────────────────────────────────────────────────────────────── BCF Design Tokens — Single Source of Truth Canonical version: 2026-04-28 (BCF_Site_Redesign_Plan.md §4) Reskinning the entire site is editing this file. Components and pages reference semantic variables (--cta-bg, --text-primary, etc.), never raw color values. ───────────────────────────────────────────────────────────────── */ :root { /* ─── Brand ───────────────────────────────────────────────────── */ --bcf-amber: #f97316; --bcf-amber-hover: #ea670c; --bcf-amber-light: #ffedd5; --bcf-gold: #fbbf24; /* ─── Neutrals ────────────────────────────────────────────────── */ --bcf-ink: #0f172a; --bcf-ash: #475569; --bcf-ash-lt: #94a3b8; --bcf-rule: #e2e8f0; --bcf-stone: #f1f5f9; --bcf-cream: #fafaf9; --bcf-white: #ffffff; --bcf-dark: #0b1120; /* ─── Status ──────────────────────────────────────────────────── */ --bcf-success: #22c55e; --bcf-danger: #ef4444; --bcf-warn: #f59e0b; --bcf-info: #3b82f6; /* ─── Semantic — consumed by components ───────────────────────── */ --bg-page: var(--bcf-cream); --bg-card: var(--bcf-white); --bg-section: var(--bcf-stone); --bg-section-dark: var(--bcf-dark); --text-primary: var(--bcf-ink); --text-secondary: var(--bcf-ash); --text-tertiary: var(--bcf-ash-lt); --text-on-dark: #ffffff; --border-default: var(--bcf-rule); --cta-bg: var(--bcf-amber); --cta-bg-hover: var(--bcf-amber-hover); --accent: var(--bcf-gold); /* Scrim used by overlays + mobile drawers */ --scrim: rgba(11,17,32,0.55); /* Focus ring — for keyboard a11y */ --focus-ring: 0 0 0 3px rgba(249,115,22,0.35); /* ─── Typography ──────────────────────────────────────────────── */ --ff-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ff-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: clamp(24px, 4vw, 32px); --fs-3xl: clamp(28px, 5vw, 40px); --fs-4xl: clamp(32px, 6vw, 48px); --fs-display: clamp(40px, 8vw, 72px); --fs-input: 18px; --fs-input-overlay: clamp(22px, 5vw, 28px); --lh-tight: 1.15; --lh-base: 1.5; --lh-loose: 1.7; --tracking-display: -0.015em; --tracking-heading: 0.01em; --tracking-eyebrow: 0.12em; /* ─── Spacing ─────────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* ─── Radius ──────────────────────────────────────────────────── */ --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px; /* ─── Shadows ─────────────────────────────────────────────────── */ --shadow-1: 0 1px 2px rgba(15,23,42,0.04); --shadow-2: 0 4px 12px rgba(15,23,42,0.08); --shadow-3: 0 12px 32px rgba(15,23,42,0.12); --shadow-glow: 0 0 0 3px rgba(249,115,22,0.20); /* ─── Motion ──────────────────────────────────────────────────── */ --t-fast: 150ms ease-out; --t-base: 200ms ease-out; --t-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1); /* ─── Layout ──────────────────────────────────────────────────── */ --container-max: 1200px; --header-h: 64px; --header-h-sm: 56px; /* ─── Z-index scale ───────────────────────────────────────────── */ --z-nav: 50; --z-drawer: 60; --z-overlay: 70; --z-modal: 80; --z-toast: 90; } /* ─── Themes ───────────────────────────────────────────────────── Apply via `data-theme="…"` on . Themes only override brand tokens; neutrals, spacing, typography stay constant across themes. Default (no attribute) = amber. ───────────────────────────────────────────────────────────────── */ /* Steel Blue — literal "blue collar" play, industrial-trustworthy */ [data-theme="steel"] { --bcf-amber: #1d4ed8; --bcf-amber-hover: #1e3a8a; --bcf-amber-light: #dbeafe; --bcf-gold: #60a5fa; --cta-bg: var(--bcf-amber); --cta-bg-hover: var(--bcf-amber-hover); --accent: var(--bcf-gold); --shadow-glow: 0 0 0 3px rgba(29,78,216,0.20); --focus-ring: 0 0 0 3px rgba(29,78,216,0.35); } /* Navy + Amber Accent — blue does the heavy lifting, amber stays as accent */ [data-theme="navy"] { --bcf-amber: #1e3a8a; --bcf-amber-hover: #172554; --bcf-amber-light: #dbeafe; --bcf-gold: #fbbf24; --cta-bg: var(--bcf-amber); --cta-bg-hover: var(--bcf-amber-hover); --accent: var(--bcf-gold); --shadow-glow: 0 0 0 3px rgba(30,58,138,0.20); --focus-ring: 0 0 0 3px rgba(30,58,138,0.35); } /* Forest — earthy, trades-grounded green */ [data-theme="forest"] { --bcf-amber: #166534; --bcf-amber-hover: #14532d; --bcf-amber-light: #dcfce7; --bcf-gold: #84cc16; --cta-bg: var(--bcf-amber); --cta-bg-hover: var(--bcf-amber-hover); --accent: var(--bcf-gold); --shadow-glow: 0 0 0 3px rgba(22,101,52,0.20); --focus-ring: 0 0 0 3px rgba(22,101,52,0.35); } /* Rust — industrial, weathered, job-site */ [data-theme="rust"] { --bcf-amber: #9a3412; --bcf-amber-hover: #7c2d12; --bcf-amber-light: #fed7aa; --bcf-gold: #d97706; --cta-bg: var(--bcf-amber); --cta-bg-hover: var(--bcf-amber-hover); --accent: var(--bcf-gold); --shadow-glow: 0 0 0 3px rgba(154,52,18,0.20); --focus-ring: 0 0 0 3px rgba(154,52,18,0.35); } /* Slate — minimalist monochrome with a hint of warmth */ [data-theme="slate"] { --bcf-amber: #334155; --bcf-amber-hover: #1e293b; --bcf-amber-light: #e2e8f0; --bcf-gold: #f59e0b; --cta-bg: var(--bcf-amber); --cta-bg-hover: var(--bcf-amber-hover); --accent: var(--bcf-gold); --shadow-glow: 0 0 0 3px rgba(51,65,85,0.20); --focus-ring: 0 0 0 3px rgba(51,65,85,0.35); } /* Honor reduced-motion users universally */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; } }