/* css/tokens.css — Dark Cinematic Edition */ :root { /* ── Backgrounds ── */ --color-void: #060504; --color-deep: #0D0A08; --color-surface: #161210; --color-lifted: #1E1916; /* ── Borders ── */ --color-border: rgba(243, 240, 238, 0.07); --color-border-bright: rgba(243, 240, 238, 0.16); /* ── Text ── */ --color-cream: #F3F0EE; /* Increased from 0.52 → 0.75 for readability on dark backgrounds */ --color-cream-muted: rgba(243, 240, 238, 0.75); --color-cream-faint: rgba(243, 240, 238, 0.40); --color-white: #FFFFFF; /* ── Accent — Mastercard Red (#EB001B) from design.md ── */ --color-ember: #EB001B; --color-flame: #FF1F2E; /* slightly brighter for hover states */ --color-ember-dark: #C50016; /* darker for pressed/depth */ --color-warm: #F37338; /* Signal Orange — secondary hover accent */ /* ── Legacy aliases ── */ --color-ink-black: #141413; --color-signal-orange: #EB001B; --color-light-signal-orange:#FF1F2E; --color-canvas-cream: #F3F0EE; --color-slate-gray: #696969; --color-dust-taupe: #D1CDC7; /* ── Spacing (base 8 px) ── */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --space-8: 64px; --space-12: 96px; --space-16: 128px; /* ── Border radii ── */ --radius-micro: 6px; --radius-cta: 20px; --radius-consent: 24px; --radius-stadium: 40px; --radius-pill: 999px; --radius-circle: 50%; /* ── Elevation ── */ --shadow-nav: 0px 4px 32px 0px rgba(0, 0, 0, 0.55); --shadow-card: 0px 24px 64px 0px rgba(0, 0, 0, 0.6); --shadow-glow-sm: 0 0 60px rgba(235, 0, 27, 0.1); --shadow-glow: 0 0 100px rgba(235, 0, 27, 0.16); /* ── Fonts — MarkForMC substitute ── */ --font-primary: 'MarkForMCNrw', 'MarkForMC', 'Sofia Sans', 'Inter', Arial, sans-serif; /* ── Layout ── */ --max-width: 1280px; --gutter: 48px; } /* ══════════════════════════════════════ LIGHT THEME OVERRIDES Applied when ══════════════════════════════════════ */ [data-theme="light"] { --color-void: #F3F0EE; /* Canvas Cream */ --color-deep: #FCFBFA; /* Lifted Cream */ --color-surface: #FFFFFF; --color-lifted: #F4F4F4; /* Soft Bone */ --color-border: rgba(20, 20, 19, 0.08); --color-border-bright: rgba(20, 20, 19, 0.20); --color-cream: #141413; /* Ink Black */ --color-cream-muted: rgba(20, 20, 19, 0.65); --color-cream-faint: rgba(20, 20, 19, 0.35); --shadow-nav: 0px 4px 24px 0px rgba(0, 0, 0, 0.06); --shadow-card: 0px 24px 48px 0px rgba(0, 0, 0, 0.08); --shadow-glow-sm: 0 0 60px rgba(235, 0, 27, 0.06); --shadow-glow: 0 0 80px rgba(235, 0, 27, 0.08); }