:root { /* Warm dark — Claude.ai palette */ --bg-page: #1C1917; --bg-card: #292524; --bg-raised: #312E2B; --bg-hover: #3D3935; --bg-border: #44403C; /* Text */ --text-primary: #E7E5E4; --text-secondary: #A8A29E; --text-muted: #78716C; /* Accents */ --coral: #D97757; --coral-light: #E8956A; --coral-dark: #B85C3C; --teal: #5EEAD4; --teal-dark: #0D9488; --gold: #FBBF24; --red: #C41E2A; --green: #4ADE80; /* Typography */ --font-display: 'Newsreader', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; /* Type scale */ --text-hero: clamp(1.9rem, 4vw, 3.5rem); /* 30px → 56px */ --text-h2: clamp(1.45rem, 2.8vw, 2.2rem); /* 23px → 35px */ --text-h3: 1.05rem; /* ~16.8px */ --text-body: 0.925rem; /* ~14.8px */ --text-sm: 0.7rem; /* ~11.2px */ --text-xs: 0.65rem; /* ~10.4px */ --text-nav: 0.8125rem; /* 13px */ --text-stat: clamp(1.5rem, 2.5vw, 2.75rem); /* 24px → 44px */ /* Radii */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2); --shadow-md: 0 4px 16px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.2); --shadow-lg: 0 20px 40px rgba(0,0,0,.5), 0 8px 16px rgba(0,0,0,.3); /* Transitions */ --t-fast: 150ms ease; --t-mid: 280ms cubic-bezier(.4,0,.2,1); --t-slow: 500ms cubic-bezier(.4,0,.2,1); /* Legacy aliases (keep for other templates) */ --bg-dark: #1C1917; --bg-light: #F5F5F4; --navy: #1C1917; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --shadow-red: 0 8px 24px rgba(196,30,42,.25); --t-normal: 280ms cubic-bezier(.4,0,.2,1); --accent-red: #D97757; --accent-teal: #5EEAD4; --accent-gold: #FBBF24; --accent-navy: #5EEAD4; --accent-blue: #5EEAD4; --accent-green: #4ADE80; --text-inverted: #E7E5E4; --transition-fast: 150ms ease; } /* Light mode overrides — applied when */ /* Using html[data-theme="light"] (specificity 0,1,1) to beat :root (0,1,0) */ html[data-theme="light"] { --bg-page: #FAF9F7; --bg-card: #F0EDE8; --bg-raised: #E8E4DE; --bg-hover: #DDD8D0; --bg-border: #D6D0C8; --text-primary: #1C1917; --text-secondary: #57534E; --text-muted: #78716C; --bg-dark: #FAF9F7; --navy: #1C1917; --accent-red: #D97757; --accent-teal: #5EEAD4; --accent-gold: #FBBF24; --accent-navy: #5EEAD4; --shadow-sm: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06); --shadow-md: 0 4px 16px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.06); --shadow-lg: 0 20px 40px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.08); background-color: #FAF9F7; } /* Explicit light-mode element overrides — direct hex + !important to beat any later-cascade rules (inline