/* ============================================================ COLOR TOKENS Two themes live in this system: · :root → "Artistic" — warm paper / editorial · [data-theme=3d] → "3D" — dark cinematic neon Base palette + semantic aliases. ============================================================ */ :root { /* ---- ARTISTIC base palette: warm paper + ink + burgundy ---- */ --paper-50: #F6F3EC; --paper-100: #F2EFE8; --paper-200: #EDEAE3; /* primary page background */ --paper-300: #E2DED5; /* raised surface / panels */ --paper-400: #D6D1C5; --ink: #141210; /* near-black warm ink */ --ink-700: rgba(20,18,16,.72); --ink-500: rgba(20,18,16,.55); --ink-450: rgba(20,18,16,.45); /* dimmed text */ --ink-200: rgba(20,18,16,.18); --ink-100: rgba(20,18,16,.10); /* hairline */ --burgundy: #7C1D2E; /* the one accent */ --burgundy-deep: #5C1422; --burgundy-tint: rgba(124,29,46,.06); /* ---- 3D base palette: void + neon ---- */ --void: #0B0A0F; /* near-black render bg */ --void-2: #100E16; --slate-800: #16131E; /* raised surface */ --slate-700: #1F1B2A; --slate-600: #2A2536; --chalk: #ECE9F2; /* text on dark */ --chalk-500: rgba(236,233,242,.55); --chalk-300: rgba(236,233,242,.32); --chalk-line: rgba(236,233,242,.12); --neon-orange: #FF5A2C; /* the hero render color */ --neon-blue: #5B8CFF; --neon-violet: #9A5CFF; --neon-magenta:#C84BD8; /* ============================================================ SEMANTIC ALIASES — default to the ARTISTIC theme. Components reference these, never the raw palette. ============================================================ */ --bg: var(--paper-200); --bg-raised: var(--paper-300); --surface-card: var(--paper-300); --text-strong: var(--ink); --text-body: var(--ink-450); --text-muted: var(--ink-500); --accent: var(--burgundy); --accent-deep: var(--burgundy-deep); --accent-tint: var(--burgundy-tint); --line: var(--ink-100); --line-strong: var(--ink-200); --on-accent: var(--paper-100); } /* ============================================================ 3D THEME — apply data-theme="3d" on or any wrapper. ============================================================ */ [data-theme="3d"] { --bg: var(--void); --bg-raised: var(--slate-800); --surface-card: var(--slate-800); --text-strong: var(--chalk); --text-body: var(--chalk-500); --text-muted: var(--chalk-300); --accent: var(--neon-orange); --accent-deep: #E2431B; --accent-tint: rgba(255,90,44,.10); --line: var(--chalk-line); --line-strong: rgba(236,233,242,.22); --on-accent: #160A06; }