/* ─────────────────────────────────────────────────────────────
   Stark HUD — Iron Man / Arc Reactor
   ───────────────────────────────────────────────────────────── */

[data-theme='stark-hud'] {
  color-scheme: dark;

  --select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300f2ff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");

  /* ── Contrast audit (vs. --bg-app #0b0f15, L ≈ 0.0044):
       text-primary  17.09:1 AAA ✓
       text-secondary 11.47:1 AAA ✓
       accent (cyan) 14.04:1 AAA ✓ — signature, keep
       text-muted     6.10:1  AA+ ✓ (lifted from 3.64:1 — was below AA)
       chromatic --ctp-* (cyan, neon green, gold, peach, pink, red): all ≥ 4.5:1
     Border-subtle was identical to --bg-card (1.0:1, invisible); raised
     to a perceptible structural line. Component override below covers the
     column resize grip whose default --ctp-surface1 collides with bg-card.
     Cyan glow shadows and all chromatic tokens are intentionally untouched. */

  --ctp-crust: #05070a;
  --ctp-mantle: #080c12;
  --ctp-base: #0b0f15;
  --ctp-surface0: #141b24;
  --ctp-surface1: #1c2531;
  --ctp-surface2: #253141;
  --ctp-overlay0: #4a5d75;
  --ctp-overlay1: #6a8099;
  --ctp-overlay2: #8ba2bd;
  --ctp-text: #e0f7fa;
  --ctp-subtext1: #a3ced4;
  --ctp-subtext0: #7da5aa;
  --ctp-mauve: #00f2ff;
  --ctp-lavender: #7df9ff;
  --ctp-green: #00ff9d;
  --ctp-teal: #00d4cc;
  --ctp-sky: #00f2ff;
  --ctp-blue: #00f2ff;
  --ctp-sapphire: #0088cc;
  --ctp-pink: #ff3399;
  --ctp-flamingo: #ff6680;
  --ctp-rosewater: #ffe0e6;
  --ctp-yellow: #ffcc00;
  --ctp-peach: #ff8800;
  --ctp-maroon: #cc0022;
  --ctp-red: #ff3333;

  --bg-app: #0b0f15;
  --bg-sidebar: #080c12;
  --bg-card: #141b24;
  --bg-hover: rgba(0, 242, 255, 0.08);
  --bg-player: #05070a;
  --bg-glass: rgba(11, 15, 21, 0.85);

  --accent: #00f2ff;
  --accent-dim: rgba(0, 242, 255, 0.12);
  --accent-glow: rgba(0, 242, 255, 0.4);

  --text-primary: #e0f7fa;
  --text-secondary: #a3ced4;
  --text-muted: #7d92a8;     /* 5.73:1 AA+ on bg-card, was #5a718a (3.34:1 ❌) — slate-blue family preserved */

  --border: #1e2a3a;
  --border-subtle: #243246;  /* 1.39:1 perceptible, was #141b24 (identical to bg-card) */

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
}

[data-theme='stark-hud'] .app-shell {
  background: radial-gradient(circle at 50% 50%, #0e1621 0%, #05070a 100%);
}

[data-theme='stark-hud'] .sidebar {
  border-right: 1px solid rgba(0, 242, 255, 0.15);
}

[data-theme='stark-hud'] .player-bar {
  border-top: 1px solid rgba(0, 242, 255, 0.2);
  box-shadow: 0 -10px 30px rgba(0, 242, 255, 0.05);
}

[data-theme='stark-hud'] .player-track-name {
  color: #00f2ff;
  text-shadow: 0 0 10px rgba(0, 242, 255, 0.6);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.5px;
}

[data-theme='stark-hud'] .nav-link.active {
  background: linear-gradient(90deg, rgba(0, 242, 255, 0.1) 0%, transparent 100%);
  box-shadow: -5px 0 15px rgba(0, 242, 255, 0.2);
}

[data-theme='stark-hud'] .nav-link.active::before {
  box-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
}

[data-theme='stark-hud'] .btn-primary {
  background: #00f2ff;
  color: #05070a;
  font-weight: 700;
  box-shadow: 0 0 15px rgba(0, 242, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Column resize grip — default --ctp-surface1 (#1c2531) on bg-card (#141b24)
   is 1.09:1 (invisible). Use overlay1 for a neutral slate grip without
   stealing visual weight from the cyan accent borders. */
[data-theme='stark-hud'] .col-resize-handle::after {
  background: var(--ctp-overlay1);  /* #6a8099 → 4.48:1 on bg-card */
  width: 2px;
}

