/* WISP Livestream — shared design tokens
Palette adapted for dark UI from the WISP Electrical brand brief
(bush-green + brass) locked 2026-04-23. Semantic state colours
(danger/success/warning) kept distinct from brand.
DO NOT edit per-file — change here, bump ?v= cache-buster in . */
:root {
/* --- Brand --- */
--bush-green: #1e3a2f;
--bush-green-light: #2d5d4a;
--bush-green-dark: #0d1f17;
--brass: #a16207;
--brass-light: #d4a55a;
--brass-bright: #e8b870;
--brass-dark: #854f0b;
--paper: #faf7f0;
/* --- Surfaces (dark theme) ---
Body is a neutral charcoal; the page header is the bush-green brand
moment (applied in per-page .header / .site-header rules). Cards
above the body lift to a slightly lighter neutral. Keeps green as
a *deliberate* anchor at the top of every page instead of staining
the whole canvas. */
--bg: #101014; /* body — neutral charcoal */
--bg-raised: #17171a; /* top bars, sub-panels — neutral */
--surface: #22222a; /* cards, modals — lifted neutral */
--surface-alt: #2c2c36; /* hover, nested cards */
--surface-input: #0d0d11; /* form field bg — slightly below body */
/* Page-header gradient: the brand moment on every page.
Use via `background: linear-gradient(135deg, var(--header-from), var(--header-to));`. */
--header-from: #0d1f17; /* bush-green-dark */
--header-to: #1e3a2f; /* bush-green */
/* --- Borders --- */
--border-subtle: #1c1c22;
--border: #2c2c32; /* neutral */
--border-strong: #41414a; /* neutral */
/* --- Text --- */
--fg: #f0ebdc; /* body */
--fg-bright: #faf7f0; /* headings / strong */
--fg-muted: #c4b89a; /* secondary labels */
--fg-faint: #a09680; /* hint text (bumped from #484f58 for AA) */
/* --- Accents --- */
--accent: #d4a55a; /* brass-light — links, focus, active */
--accent-hover: #e8b870;
--accent-bg: rgba(212, 165, 90, 0.14);
--accent-border: rgba(212, 165, 90, 0.35);
/* --- Semantic (kept outside brand so status is always legible) --- */
--danger: #da3633;
--danger-bright: #ff7b72;
--danger-bg: rgba(218, 54, 51, 0.14);
--success: #3fb950;
--success-dark: #238636;
--success-bg: rgba(63, 185, 80, 0.14);
--warning: #d29922;
--warning-bg: rgba(210, 153, 34, 0.14);
--info: #d4a55a;
/* --- Radius (aligned with brand guidelines §10) --- */
--r-sm: 8px; /* buttons, inputs, small accents */
--r-md: 12px; /* standard cards */
--r-lg: 16px; /* hero cards, prominent surfaces */
--r-xl: 24px; /* feature blocks */
/* --- Shadow, motion --- */
--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--dur: 0.15s;
--dur-slow: 0.6s; /* brand spec — subtle reveals */
/* --- Typography (brand guidelines §4) ---
Headings: Plus Jakarta Sans 700 (load via Google Fonts in each page)
Body: Inter 400/500. System fallbacks ensure content renders pre-font-load. */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
--font-display: 'Plus Jakarta Sans', var(--font-sans);
--font-mono: 'SF Mono', 'Cascadia Code', ui-monospace, monospace;
/* --- Spacing scale (brand §10) --- */
--gap: 2rem;
--section-pad: clamp(4rem, 8vw, 7rem);
/* --- Focus ring (WCAG 3:1 against --bg) --- */
--focus-ring: 2px solid var(--accent);
--focus-offset: 2px;
}
/* Legacy theme switch — in case a page wants the old dark-blue look.
Attach to to opt out. */
html[data-theme="legacy"] {
--bg: #0a0a1a;
--bg-raised: #0d1117;
--surface: #161b22;
--surface-alt: #1c2128;
--border: #21262d;
--border-strong: #30363d;
--accent: #58a6ff;
--accent-hover: #79c0ff;
--fg: #e0e0e0;
--fg-bright: #ffffff;
--fg-muted: #8b949e;
--fg-faint: #6e7681;
}