/* ================================================================ TOKENS — Black Edition 2 colours only: Obsidian Black + Electric Indigo Dark → Black Edition: near-black canvas, indigo accent Light → White Edition: pure white canvas, deep indigo accent ================================================================ */ /* ───────────────────────────────────────────────────────────── DARK — "Black Edition" #080808 true black · #5c6bc0 electric indigo · #f2f2f2 white ───────────────────────────────────────────────────────────── */ :root, [data-theme="dark"] { /* canvas */ --bg-base: #111110; --bg-layer: #1a1a19; --bg-card: rgba(28, 28, 27, 0.84); --bg-card-solid: #1e1e1d; --bg-nav: rgba(12, 12, 11, 0.88); --bg-overlay: rgba(4, 4, 4, 0.98); /* red — primary accent */ --gold: #FD2E35; /* vivid red */ --gold-light: #FF5A5F; /* lighter red */ --gold-deep: #D91E24; /* pressed / deep state */ --gold-dim: rgba(253, 46, 53, 0.10); --gold-glow: rgba(253, 46, 53, 0.22); --gold-border: rgba(253, 46, 53, 0.30); --gold-shimmer: rgba(253, 46, 53, 0.06); /* aliases */ --blue: #FD2E35; --blue-light: #FF5A5F; --blue-deep: #D91E24; --blue-dim: rgba(253, 46, 53, 0.10); --blue-glow: rgba(253, 46, 53, 0.22); --blue-border: rgba(253, 46, 53, 0.30); --amber: #FD2E35; --amber-dim: rgba(253, 46, 53, 0.08); /* type — near-white */ --text-primary: #f2f2f2; --text-secondary: #6e6e6e; --text-muted: #3a3a3a; --text-on-gold: #ffffff; --text-on-blue: #ffffff; /* edges */ --border: rgba(255, 255, 255, 0.08); --border-subtle: rgba(255, 255, 255, 0.05); --border-card: rgba(255, 255, 255, 0.07); /* glass */ --glass-fill: rgba(15, 15, 15, 0.72); --glass-border: rgba(255, 255, 255, 0.08); --glass-shine: rgba(255, 255, 255, 0.06); /* thumb panel */ --thumb-body-bg: rgba(14, 14, 13, 0.90); /* hero name */ --hero-name-accent: var(--gold); /* bg orbs — off */ --orb-a: transparent; --orb-b: transparent; --orb-c: transparent; --orb-d: transparent; --orb-e: transparent; /* shadows — deep black, multi-layer */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.60), 0 2px 6px rgba(0,0,0,0.28); --shadow-card: 0 1px 2px rgba(0,0,0,0.65), 0 4px 14px rgba(0,0,0,0.30), 0 10px 30px rgba(0,0,0,0.18); --shadow-card-hover: 0 2px 5px rgba(0,0,0,0.70), 0 8px 24px rgba(0,0,0,0.38), 0 20px 50px rgba(0,0,0,0.22), 0 0 0 1px rgba(253,46,53,0.20); --shadow-hover: 0 2px 5px rgba(0,0,0,0.70), 0 8px 24px rgba(0,0,0,0.38), 0 20px 50px rgba(0,0,0,0.22), 0 0 0 1px rgba(255,255,255,0.07); --shadow-gold: 0 2px 10px rgba(253,46,53,0.22), 0 6px 24px rgba(253,46,53,0.14); --shadow-blue: 0 2px 8px rgba(0,0,0,0.50), 0 6px 20px rgba(0,0,0,0.25); --scrollbar-track: #131312; --scrollbar-thumb: #2c2c2b; } /* ───────────────────────────────────────────────────────────── LIGHT — "White Edition" #ffffff pure white · #a06400 dark honey · #0d0d0d near-black ───────────────────────────────────────────────────────────── */ [data-theme="light"] { --bg-base: #ffffff; --bg-layer: #f6f6f6; --bg-card: rgba(255, 255, 255, 0.96); --bg-card-solid: #ffffff; --bg-nav: rgba(255, 255, 255, 0.90); --bg-overlay: rgba(255, 255, 255, 0.98); /* red — primary accent, light mode */ --gold: #D91E24; /* deep red on white — WCAG AA */ --gold-light: #FD2E35; /* vivid red */ --gold-deep: #B01820; /* pressed / deep state */ --gold-dim: rgba(217, 30, 36, 0.07); --gold-glow: rgba(217, 30, 36, 0.13); --gold-border: rgba(217, 30, 36, 0.22); --gold-shimmer: rgba(217, 30, 36, 0.04); --blue: #D91E24; --blue-light: #FD2E35; --blue-deep: #B01820; --blue-dim: rgba(217, 30, 36, 0.07); --blue-glow: rgba(217, 30, 36, 0.13); --blue-border: rgba(217, 30, 36, 0.22); --amber: #D91E24; --amber-dim: rgba(217, 30, 36, 0.07); --text-primary: #0d0d0d; --text-secondary: #555555; --text-muted: #767676; --text-on-gold: #ffffff; --text-on-blue: #ffffff; --border: rgba(0, 0, 0, 0.09); --border-subtle: rgba(0, 0, 0, 0.06); --border-card: rgba(0, 0, 0, 0.07); --glass-fill: rgba(255, 255, 255, 0.88); --glass-border: rgba(0, 0, 0, 0.07); --glass-shine: rgba(255, 255, 255, 0.96); --thumb-body-bg: rgba(255, 255, 255, 0.97); --hero-name-accent: var(--gold); --orb-a: transparent; --orb-b: transparent; --orb-c: transparent; --orb-d: transparent; --orb-e: transparent; --shadow-sm: 0 1px 2px rgba(0,0,0,0.07), 0 2px 5px rgba(0,0,0,0.04); --shadow-card: 0 1px 1px rgba(0,0,0,0.06), 0 3px 8px rgba(0,0,0,0.05), 0 8px 20px rgba(0,0,0,0.04); --shadow-card-hover: 0 2px 4px rgba(0,0,0,0.09), 0 6px 18px rgba(0,0,0,0.07), 0 16px 36px rgba(0,0,0,0.05), 0 0 0 1px rgba(217,30,36,0.18); --shadow-hover: 0 2px 4px rgba(0,0,0,0.09), 0 6px 18px rgba(0,0,0,0.07), 0 16px 36px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04); --shadow-gold: 0 2px 8px rgba(217,30,36,0.12), 0 5px 16px rgba(217,30,36,0.07); --shadow-blue: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04); --scrollbar-track: #f0f0f0; --scrollbar-thumb: #cccccc; } /* ── SHARED ───────────────────────────────────────────────── */ :root { --font-display: 'Poppins', sans-serif; --font-body: 'Poppins', sans-serif; --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-xl: 24px; --transition: 0.4s ease; --fast: 0.18s ease; --size-body: 1rem; --size-body-sm: 0.9375rem; --size-label: 0.8125rem; --size-caption: 0.75rem; --size-ui-sm: 0.8125rem; --lh-display: 1.1; --lh-heading: 1.2; --lh-subheading: 1.35; --lh-body: 1.78; --lh-ui: 1.5; --lh-tight: 1.25; } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } /* availability — keep green, it communicates status */ :root, [data-theme="dark"] { --green: #22c55e; --green-light: #4ade80; --green-dim: rgba(34,197,94,0.10); --green-border: rgba(34,197,94,0.28); --green-glow: rgba(34,197,94,0.20); } [data-theme="light"] { --green: #16a34a; --green-light: #22c55e; --green-dim: rgba(22,163,74,0.09); --green-border: rgba(22,163,74,0.26); --green-glow: rgba(22,163,74,0.15); }