/* ── Mode-neutral tokens ─────────────────────────────────────────────────── */
:root {
  --accent:    #4f8ef7;
  --green:     #3ecf8e;
  --yellow:    #f5a623;
  --red:       #e05252;
  --bus:       #1464a0;
  --metro:     #5a67d8;
  --tram:      #8b5cf6;
  --train:     #e4007c;
  --ship:      #2c7a7b;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
}

/* ── Dark theme ──────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  --surface2: var(--surface-alt);
  --bg:                  #0f0f13;
  --surface:             #1a1a24;
  --surface-alt:         #22222f;
  --surface-glass:       rgba(26, 26, 36, 0.88);
  --surface-glass-strong: rgba(26, 26, 36, 0.95);
  --border:              #2e2e3f;
  --border-strong:       rgba(255, 255, 255, 0.12);
  --text:                #f0f0f5;
  --text-soft:           rgba(240, 240, 245, 0.85);
  --muted:               #7a7a96;
  --shadow:              0 14px 32px rgba(0, 0, 0, 0.28);
  --overlay-scrim:       rgba(0, 0, 0, 0.58);
  --chip-bg:             rgba(255, 255, 255, 0.06);
  --chip-border:         rgba(255, 255, 255, 0.12);
  --field-bg:            rgba(255, 255, 255, 0.04);
  --field-border:        rgba(255, 255, 255, 0.1);
}

/* ── Light theme ─────────────────────────────────────────────────────────── */
html[data-theme="light"] {
  --surface2: var(--surface-alt);
  --bg:                  #eef3f8;
  --surface:             #ffffff;
  --surface-alt:         #f6f8fb;
  --surface-glass:       rgba(255, 255, 255, 0.92);
  --surface-glass-strong: rgba(255, 255, 255, 0.94);
  --border:              #d5deea;
  --border-strong:       rgba(74, 93, 122, 0.18);
  --text:                #152033;
  --text-soft:           #2f435f;
  --muted:               #63748b;
  --shadow:              0 16px 36px rgba(42, 65, 92, 0.14);
  --overlay-scrim:       rgba(18, 28, 45, 0.18);
  --chip-bg:             rgba(79, 142, 247, 0.1);
  --chip-border:         rgba(79, 142, 247, 0.18);
  --field-bg:            rgba(245, 248, 252, 0.96);
  --field-border:        rgba(99, 116, 139, 0.22);
}

/* ── Reusable utility classes ────────────────────────────────────────────── */
.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-glass);
  color: var(--text);
  box-shadow: var(--shadow);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.theme-field {
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  color: var(--text);
}

.theme-glass {
  background: var(--surface-glass);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
}

.theme-bottom-nav {
  background: var(--surface-glass-strong);
  border-top: 1px solid var(--border-strong);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Logo theme switching ────────────────────────────────────────────────── */
.logo-light { display: none; }
html[data-theme="light"] .logo-dark  { display: none; }
html[data-theme="light"] .logo-light { display: inline; }