:root {
  /* ── Core palette ── */
  --bg-void:          #070708;
  --bg-primary:       #0A0A0B;
  --bg-secondary:     #0E0E10;
  --bg-surface:       #141416;
  --bg-surface-2:     #1A1A1D;
  --bg-input:         #1E1E22;
  --bg-sidebar:       #090909;
  --bg-user-bubble:   #1A0507;

  /* ── F1 Red accent (unchanged across themes) ── */
  --red:              #E8000D;
  --red-dim:          rgba(232, 0, 13, 0.12);
  --red-glow-sm:      0 0 8px rgba(232, 0, 13, 0.35);
  --red-glow-md:      0 0 20px rgba(232, 0, 13, 0.45), 0 0 40px rgba(232, 0, 13, 0.2);
  --red-glow-lg:      0 0 30px rgba(232, 0, 13, 0.6), 0 0 80px rgba(232, 0, 13, 0.25);
  --red-border:       rgba(232, 0, 13, 0.35);

  /* ── Timing sector colours ── */
  --sector-purple:    #C084FC;
  --sector-yellow:    #FFD700;
  --sector-green:     #39FF14;

  /* ── Purple intelligence accent ── */
  --purple-dim:       rgba(192, 132, 252, 0.12);
  --purple-glow-sm:   0 0 8px rgba(192, 132, 252, 0.3);
  --purple-border:    rgba(192, 132, 252, 0.28);

  /* ── Text ── */
  --text-primary:     #F0F0F2;
  --text-secondary:   #9A9AA8;
  --text-muted:       #52525E;
  --text-red:         #E8000D;

  /* ── Borders ── */
  --border-subtle:    rgba(255, 255, 255, 0.055);
  --border-mid:       rgba(255, 255, 255, 0.09);
  --border-accent:    rgba(232, 0, 13, 0.28);

  /* ── Session item hover (theme-aware) ── */
  --session-hover-bg: rgba(255, 255, 255, 0.04);

  /* ── Fonts ── */
  --font-display:     'Rajdhani', 'Arial Narrow', Arial, sans-serif;
  --font-body:        'Inter', system-ui, sans-serif;

  /* ── Sizing ── */
  --sidebar-w:        264px;
  --topbar-h:         52px;
  --input-zone-h:     auto;
  --radius-sm:        6px;
  --radius-md:        10px;
  --radius-lg:        14px;
  --radius-xl:        20px;

  /* ── Transitions ── */
  --t-fast:           120ms ease;
  --t-base:           220ms ease;
  --t-slow:           380ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-spring:         500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index layers ── */
  --z-sidebar:        100;
  --z-overlay:        90;
  --z-topbar:         80;
  --z-start:          9999;
}

/* ═══════════════════════════════════════════════════
   LIGHT MODE — F1 Apex light theme
   Red stays untouched — it's the identity.
   Everything else shifts to warm off-whites.
═══════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg-void:          #EAEAEC;
  --bg-primary:       #F4F4F6;
  --bg-secondary:     #EBEBED;
  --bg-surface:       #FFFFFF;
  --bg-surface-2:     #F0F0F2;
  --bg-input:         #FFFFFF;
  --bg-sidebar:       #E4E4E7;
  --bg-user-bubble:   #FFF0F1;

  --text-primary:     #0A0A0B;
  --text-secondary:   #3C3C48;
  --text-muted:       #8A8A96;

  --border-subtle:    rgba(0, 0, 0, 0.07);
  --border-mid:       rgba(0, 0, 0, 0.12);
  --border-accent:    rgba(232, 0, 13, 0.22);

  --red-dim:          rgba(232, 0, 13, 0.08);
  --red-glow-sm:      0 0 8px rgba(232, 0, 13, 0.18);
  --red-glow-md:      0 0 16px rgba(232, 0, 13, 0.2), 0 0 32px rgba(232, 0, 13, 0.08);
  --red-glow-lg:      0 0 20px rgba(232, 0, 13, 0.25), 0 0 60px rgba(232, 0, 13, 0.1);

  --session-hover-bg: rgba(0, 0, 0, 0.04);

  --purple-dim:       rgba(147, 51, 234, 0.08);
  --purple-border:    rgba(147, 51, 234, 0.2);
  --sector-purple:    #7C3AED; /* darker purple — sufficient contrast on light backgrounds */
}