/* ========================================================================== theme.css — brand tokens + light/dark theme variables Dark is the default theme. Add data-theme="light" to to switch. ========================================================================== */ :root{ /* ---- Fixed brand tokens (same in every theme) ---- */ --ink:#101B2C; --ink-2:#0f4262; --blueprint:#254D78; --blueprint-2:#2F5D8E; --line:#D3E4F5; --line-dim:#93AFC9; --paper:#EEE9DB; --paper-2:#E4DDC9; --charcoal:#241F19; --charcoal-soft:#5B564B; --amber:#E1963C; --amber-dark:#B9752A; --white:#ffffff; --black:#000000; --yellow:#FFD700; --radius:4px; --maxw:1180px; /* ---- Theme-dependent tokens: DARK (default) ---- */ --body-bg: var(--ink); --body-text: var(--line); /* "surface" = the alternating light-grid sections (vision, history, reviews, social) */ --surface: var(--ink-2); --surface-text: var(--line); --surface-text-dim: var(--line-dim); --surface-grid-line: rgba(211,228,245,0.07); /* cards that sit on top of a surface (review cards) */ --card-bg: var(--ink-2); --card-border: rgba(211,228,245,0.16); --card-text: var(--line); --card-text-dim: var(--line-dim); --fb-card-bg: #1C2F49; /* "accent surface" = nav, hero, promise, contact, footer, blueprint-panel — the sections that are dark-navy in dark mode */ --accent-bg: var(--ink); --accent-bg-2: var(--ink-2); --accent-text: var(--line); --accent-text-strong: #ffffff; --accent-text-dim: var(--line-dim); --accent-border: rgba(211,228,245,0.14); --accent-border-soft: rgba(211,228,245,0.10); --accent-border-strong: rgba(211,228,245,0.4); --accent-grid-line: rgba(211,228,245,0.07); --accent-grid-line-strong: rgba(211,228,245,0.14); --accent-nav-bg: rgba(16,27,44,0.92); /* logo: the non-blue parts of the brand mark (icon foot + wordmark) */ --logo-mono: #ffffff; } [data-theme="light"]{ --body-bg: var(--paper); --body-text: var(--charcoal); --surface: var(--paper); --surface-text: var(--charcoal); --surface-text-dim: var(--charcoal-soft); --surface-grid-line: rgba(37,77,120,0.06); --card-bg: #ffffff; --card-border: rgba(37,77,120,0.16); --card-text: var(--charcoal); --card-text-dim: var(--charcoal-soft); --fb-card-bg: var(--paper-2); /* in light mode, the accent surfaces switch to white with dark text */ --accent-bg: #f6f6f6; --accent-bg-2: #F5F1E7; --accent-text: var(--charcoal); --accent-text-strong: var(--ink); --accent-text-dim: var(--charcoal-soft); --accent-border: rgba(37,77,120,0.16); --accent-border-soft: rgba(37,77,120,0.10); --accent-border-strong: rgba(37,77,120,0.35); --accent-grid-line: rgba(37,77,120,0.05); --accent-grid-line-strong: rgba(37,77,120,0.10); --accent-nav-bg: rgba(255,255,255,0.92); --logo-mono: #000000; }