/* ════════════════════════════════════════════════════════════════════════ Anthroponova — design tokens (single source of truth) Dark is the default (the brand is dark-first). Light overrides live under [data-theme="light"]. Component CSS references ONLY these variables, never raw literals — the brand lives here, not in the components. Values are extracted/formalized from the approved Home hero. Do not change decided values; propose first. ════════════════════════════════════════════════════════════════════════ */ :root { /* ── Brand constants (identical in both themes) ───────────────────────── */ --gold-50: #FAEEDA; --gold-100: #FAC775; --gold: #DDAC3A; --gold-600: #BA7517; --gold-800: #854F0B; --gold-900: #412402; --ink: #412402; /* text ON gold fills */ --teal: #5DCAA5; /* RARE spot accent — proof/credibility only */ /* ── Type & layout ────────────────────────────────────────────────────── */ --font: 'Sansation', 'Helvetica Neue', Helvetica, Arial, sans-serif; --maxw: 1200px; --pad: clamp(20px, 5vw, 64px); /* type ramp (Sansation; weights 300 / 400 / 700 ONLY) */ --fs-display: clamp(33px, 5vw, 61px); --lh-display: 1.06; --ls-display: -.018em; --fs-h1: clamp(30px, 4vw, 44px); --fs-h2: clamp(26px, 3vw, 34px); --fs-h3: 24px; --fs-h4: 19px; --fs-body-lg: 18px; --fs-body: 16px; --fs-small: 14px; --fs-caption: 13px; --fs-eyebrow: 12.5px; --ls-eyebrow: .16em; --lh-tight: 1.12; --lh-body: 1.6; --ls-tight: -.018em; /* ── Radii / elevation / motion ───────────────────────────────────────── */ --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px; --shadow-1: 0 6px 22px rgba(0,0,0,.28); --shadow-2: 0 28px 70px -34px rgba(0,0,0,.78); --shadow-gold: 0 6px 22px rgba(221,172,58,.22); --shadow-gold-lg: 0 14px 36px rgba(221,172,58,.34); --ease: cubic-bezier(.2,.7,.2,1); --dur: .22s; /* ════════════════ DARK THEME (default) ════════════════ */ color-scheme: dark; /* surfaces (warm near-black; never pure black) */ --bg: #1a1a18; --bg-elev: #221f1b; /* raised panels: modal/drawer/menu/toast */ --surface-1: rgba(245,243,238,.035); /* faint raised (chips, table hover) */ --surface-2a: rgba(245,243,238,.042); /* card gradient stops */ --surface-2b: rgba(245,243,238,.012); --surface-2: linear-gradient(160deg, var(--surface-2a), var(--surface-2b)); --surface-hover: linear-gradient(160deg, rgba(245,243,238,.06), rgba(245,243,238,.02)); --hairline: rgba(245,243,238,.07); /* dividers / borders */ --hairline-strong: rgba(245,243,238,.12); --nav-scrim: rgba(22,22,20,.72); /* sticky nav blurred bg */ /* text */ --heading: #f5f3ee; --body: #b4b1a8; --tertiary: #918E84; /* APPROVED 2026-08-03 (was #7d7a72, 4.07:1) — 4.57:1 on the hover surface, still subordinate to --body */ --gold-text: var(--gold); /* gold used as text/link (OK on dark) */ /* form controls */ --field-bg: rgba(245,243,238,.04); --field-border: rgba(245,243,238,.14); --field-border-hover: rgba(245,243,238,.26); --placeholder: #7d7a72; --control-off: rgba(245,243,238,.10); /* switch/checkbox unchecked surface */ /* functional / semantic (status ONLY — deliberately distinct from brand) */ --success: #639922; --success-bg: rgba(99,153,34,.13); --success-border: rgba(99,153,34,.34); --danger: #C0492F; --danger-bg: rgba(192,73,47,.13); --danger-border: rgba(192,73,47,.36); --warning: #BA7517; --warning-bg: rgba(186,117,23,.13); --warning-border: rgba(186,117,23,.34); --warning-text: #D08A20; /* APPROVED 2026-08-03, dark only: --warning is 4.00:1 on its own --warning-bg chip; this is 5.20:1 there. --warning itself does not move — it is --gold-600 and carries borders and fills. */ --info: #5B86C9; --info-bg: rgba(91,134,201,.13); --info-border: rgba(91,134,201,.34); --teal-bg: rgba(93,202,165,.09); --teal-border: rgba(93,202,165,.28); --teal-rgb: 93,202,165; /* component form for alpha compositing — the player's caller voice (Day 50) */ /* focus ring (visible, brand-gold) */ --ring: 0 0 0 3px rgba(221,172,58,.45); --ring-danger: 0 0 0 3px rgba(192,73,47,.42); --backdrop: rgba(10,10,9,.62); } /* ════════════════ LIGHT THEME (warm off-white secondary surface) ════════════════ */ :root[data-theme="light"] { color-scheme: light; --bg: #f4f1ea; --bg-elev: #fffdf8; --surface-1: rgba(26,26,24,.035); --surface-2a: rgba(26,26,24,.05); --surface-2b: rgba(26,26,24,.015); --surface-2: linear-gradient(160deg, var(--surface-2a), var(--surface-2b)); --surface-hover: linear-gradient(160deg, rgba(26,26,24,.07), rgba(26,26,24,.025)); --hairline: rgba(26,26,24,.10); --hairline-strong: rgba(26,26,24,.16); --nav-scrim: rgba(244,241,234,.74); --heading: #221f1b; --body: #4a463f; --tertiary: #666359; /* APPROVED 2026-08-03 (was #7d7a72, 3.80:1) — 4.65:1 on the hover surface */ --gold-text: var(--gold-800); /* base --gold fails contrast on light → 800 for text/links */ --field-bg: rgba(26,26,24,.03); --field-border: rgba(26,26,24,.18); --field-border-hover: rgba(26,26,24,.34); --placeholder: #8a877f; --control-off: rgba(26,26,24,.14); --success: #4E7A1B; --success-bg: rgba(78,122,27,.12); --success-border: rgba(78,122,27,.34); --danger: #A33B24; --danger-bg: rgba(163,59,36,.10); --danger-border: rgba(163,59,36,.34); --warning: #854F0B; --warning-bg: rgba(133,79,11,.10); --warning-border: rgba(133,79,11,.32); --warning-text: var(--warning); /* light already passes on its chip (5.19:1) — the new token exists in dark only */ --info: #3F6BB0; --info-bg: rgba(63,107,176,.10); --info-border: rgba(63,107,176,.32); --teal: #2F9E78; --teal-bg: rgba(47,158,120,.10); --teal-border: rgba(47,158,120,.32); --teal-rgb: 47,158,120; --ring: 0 0 0 3px rgba(133,79,11,.38); --ring-danger: 0 0 0 3px rgba(163,59,36,.36); --backdrop: rgba(40,36,30,.40); --shadow-2: 0 28px 70px -34px rgba(40,32,18,.30); }