/* ============================================================
   TRK Studios — Dark Mode
   ============================================================
   Light mode is the default (tokens live in main.css's :root).
   These rules only apply when <html data-theme="dark"> 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 dark mode exists.
   ------------------------------------------------------------ */
html[data-theme="dark"] {
  --bg-root:       #141a2e;
  --bg-root-rgb:   20, 26, 46;
  --bg-surface:    #1a2138;
  --bg-card:       #212a45;
  --bg-card-hover: #2a3554;
  --border:        rgba(255, 255, 255, 0.10);
  --border-accent: rgba(34, 211, 238, 0.35);

  --accent:        #22d3ee;
  --accent-navy:   #1e3a6e;
  --gradient:      linear-gradient(135deg, #3b82f6 0%, #22d3ee 100%);
  --gradient-brand: linear-gradient(135deg, #1e3a6e 0%, #22d3ee 100%);

  --text-primary:   #f1f5f9;
  --text-secondary: #b6c2d9;
  --text-muted:     #7c8aa8;

  --shadow:      0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 60px rgba(34, 211, 238, 0.08);
}