/* ─── RaceTrak Theme System ──────────────────────────────── */
/* Default: Dark Mode */
:root {
  --rt-bg: #0A0F1C;
  --rt-bg2: #111827;
  --rt-surface: rgba(255,255,255,.03);
  --rt-surface-hover: rgba(255,255,255,.06);
  --rt-border: rgba(255,255,255,.08);
  --rt-border-hover: rgba(255,255,255,.15);
  --rt-text: #FFFFFF;
  --rt-text-secondary: rgba(255,255,255,.6);
  --rt-text-dim: rgba(255,255,255,.35);
  --rt-text-hint: rgba(255,255,255,.2);
  --rt-primary: #00E5A0;
  --rt-blue: #0055FF;
  --rt-purple: #A855F7;
  --rt-red: #FF3B6F;
  --rt-orange: #FF6B00;
  --rt-yellow: #FFB800;
  --rt-cyan: #00B4FF;
  --rt-input-bg: rgba(255,255,255,.04);
  --rt-input-border: rgba(255,255,255,.1);
  --rt-card-shadow: 0 2px 8px rgba(0,0,0,.3);
  --rt-popup-bg: #1a1f2e;
  --rt-popup-text: #fff;
  --rt-map-route: #0055FF;
  --rt-toggle-bg: rgba(255,255,255,.08);
}

/* Light Mode */
[data-theme="light"] {
  --rt-bg: #F5F6FA;
  --rt-bg2: #FFFFFF;
  --rt-surface: rgba(0,0,0,.03);
  --rt-surface-hover: rgba(0,0,0,.06);
  --rt-border: rgba(0,0,0,.1);
  --rt-border-hover: rgba(0,0,0,.18);
  --rt-text: #1a1a2e;
  --rt-text-secondary: rgba(0,0,0,.6);
  --rt-text-dim: rgba(0,0,0,.4);
  --rt-text-hint: rgba(0,0,0,.25);
  --rt-primary: #00C88A;
  --rt-blue: #0055FF;
  --rt-purple: #7C3AED;
  --rt-red: #E5334D;
  --rt-orange: #E55B00;
  --rt-yellow: #D9A000;
  --rt-cyan: #0088DD;
  --rt-input-bg: rgba(0,0,0,.04);
  --rt-input-border: rgba(0,0,0,.12);
  --rt-card-shadow: 0 2px 8px rgba(0,0,0,.08);
  --rt-popup-bg: #ffffff;
  --rt-popup-text: #333;
  --rt-map-route: #0055FF;
  --rt-toggle-bg: rgba(0,0,0,.06);
}

/* ─── Theme Toggle Button ───────────────────────────────── */
.theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--rt-border);
  background: var(--rt-toggle-bg);
  color: var(--rt-text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all .2s;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
.theme-toggle:hover {
  border-color: var(--rt-border-hover);
  background: var(--rt-surface-hover);
}

/* ─── Global Theme Styles ───────────────────────────────── */
body.rt-themed {
  background: var(--rt-bg) !important;
  color: var(--rt-text) !important;
}