/* ============================================================ VALID AI — COLOR TOKENS Palette lifted directly from the source decks (frequency-ranked inline fills). Warm, earthy, editorial: terracotta on cream and dark chocolate. No blues, no cool greys. ============================================================ */ :root { /* ---- Base neutrals: warm chocolate → cream ---- */ --choco-900: #1A1A18; /* near-black ink / dark backgrounds */ --choco-800: #1F1E1B; --choco-700: #44423C; /* primary brown ink for body */ --taupe-500: #6F6B64; /* accessible muted copy on cream (4.69:1) */ --taupe-400: #706C65; /* accessible tertiary text on cream (4.62:1) */ --sand-300: #D6D0C4; /* hairline borders, dividers */ --sand-200: #EAE5D9; /* card wells / soft fills */ --cream-150: #EEEBE2; /* raised surfaces on cream */ --cream-100: #F3F1E9; /* page background */ --white: #FFFFFF; /* ---- Brand accent: terracotta ---- */ --terracotta-700: #A23A22; /* pressed / darker accent */ --terracotta-600: #C2492E; /* PRIMARY brand accent */ --terracotta-100: #F4DDD1; /* peach tint fills, icon backfills */ /* ---- Semantic support ---- */ --green-600: #4F7A45; /* pass / success */ --green-100: #DDE7D6; /* success well */ --amber-600: #C98A2E; /* warning / flagged */ --amber-100: #F0E2C6; /* warning well (derived) */ /* ============================================================ SEMANTIC ALIASES — reference these in components ============================================================ */ --bg-page: var(--cream-100); --bg-raised: var(--cream-150); --bg-well: var(--sand-200); --bg-inverse: var(--choco-900); --surface-card: var(--white); --text-strong: var(--choco-900); --text-body: var(--choco-700); --text-muted: var(--taupe-500); --text-faint: var(--taupe-400); --text-on-accent: var(--cream-100); --text-on-dark: var(--cream-100); --accent: var(--terracotta-700); --accent-strong: #7E2D1D; --accent-bright: var(--terracotta-600); --accent-tint: var(--terracotta-100); --border: var(--sand-300); --border-strong: var(--taupe-400); --divider: var(--sand-300); --success: var(--green-600); --success-bg: var(--green-100); --warning: var(--amber-600); --warning-bg: var(--amber-100); --danger: var(--terracotta-600); --danger-bg: var(--terracotta-100); } /* ============================================================ DARK MODE — chocolate surfaces, cream ink, same terracotta accent. Light is the default/primary theme; this inverts the neutral ramp for dark covers and dark app chrome. Apply with (or on any container). Base color values are unchanged — only the semantic aliases remap. ============================================================ */ [data-theme="dark"] { /* Dark neutral surfaces (warm, not black) */ --dk-surface-1: #232220; /* raised card on page */ --dk-surface-2: #2C2A27; /* wells / inputs */ --dk-border: #3A3833; /* hairlines */ --dk-border-2: #55524B; /* stronger borders */ --bg-page: var(--choco-900); --bg-raised: var(--choco-800); --bg-well: var(--dk-surface-2); --bg-inverse: var(--cream-100); --surface-card: var(--dk-surface-1); --text-strong: var(--cream-100); --text-body: #E2DDD2; --text-muted: var(--taupe-400); --text-faint: var(--taupe-500); --text-on-accent: var(--cream-100); --text-on-dark: var(--cream-100); --accent: var(--terracotta-600); --accent-strong: #D9613F; /* lift on dark for contrast */ --accent-tint: #3A241C; /* deep peach well */ --border: var(--dk-border); --border-strong: var(--dk-border-2); --divider: var(--dk-border); --success: #7FB06F; /* brightened for dark */ --success-bg: #21301C; --warning: #E0A94A; --warning-bg: #362A15; --danger: #D9613F; --danger-bg: #3A241C; }