/* ============================================================ TRK Studios — Light Mode ============================================================ Dark mode is the default (tokens live in main.css's :root). These rules only apply when is set by the nav toggle (see js/main.js), and simply redefine the same custom properties everything else already reads from — no component CSS needs to know a light mode exists. ------------------------------------------------------------ */ html[data-theme="light"] { --bg-root: #f7f9fc; --bg-root-rgb: 247, 249, 252; --bg-surface: #eef1f7; --bg-card: #ffffff; --bg-card-hover: #f7f9fc; --border: rgba(15, 23, 42, 0.10); --border-accent: rgba(8, 145, 178, 0.35); --accent: #0891b2; --accent-navy: #1e3a6e; --gradient: linear-gradient(135deg, #2563eb 0%, #0891b2 100%); --gradient-brand: linear-gradient(135deg, #1e3a6e 0%, #0891b2 100%); --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --shadow: 0 4px 24px rgba(15, 23, 42, 0.08); --shadow-glow: 0 0 60px rgba(8, 145, 178, 0.10); }