/* ════════════════════════════════════════════════
   DESIGN TOKENS  –  single source of truth
════════════════════════════════════════════════ */

/* ── Dark theme (default) · Modern Indigo + Cyan ─ */
:root {
  /* Backgrounds */
  --clr-bg:      #0F172A;
  --clr-surface: #111827;
  --clr-raised:  #1F2937;
  --clr-hover:   #1E293B;

  /* Borders */
  --clr-border:   #243043;
  --clr-border-2: #2D3E57;

  /* Text */
  --clr-text: #F1F5F9;
  --clr-sub:  #94A3B8;
  --clr-dim:  #475569;

  /* Primary – Indigo */
  --clr-blue:    #6366F1;
  --clr-blue-dk: #4F46E5;

  /* Semantic */
  --clr-cyan:   #06B6D4;   /* Secondary   */
  --clr-green:  #22C55E;   /* Success      */
  --clr-red:    #EF4444;   /* Error        */
  --clr-orange: #F59E0B;   /* Warning      */
  --clr-purple: #8B5CF6;   /* Accent       */
  --clr-yellow: #EAB308;   /* Yellow       */
  --clr-pink:   #F472B6;   /* Chart extra  */
  --clr-info:   #38BDF8;   /* Info         */

  /* Layout */
  --h-nav:  48px;
  --w-side: 215px;
  --gap:    12px;

  /* Shape */
  --radius:    10px;
  --radius-sm: 6px;
}

/* ── Light theme · Soft Gray + Indigo (Notion/Linear) ─ */
[data-theme="light"] {
  /* Backgrounds */
  --clr-bg:      #F8FAFC;
  --clr-surface: #FFFFFF;
  --clr-raised:  #F1F5F9;
  --clr-hover:   #E2E8F0;

  /* Borders */
  --clr-border:   #E2E8F0;
  --clr-border-2: #CBD5E1;

  /* Text */
  --clr-text: #0F172A;
  --clr-sub:  #475569;
  --clr-dim:  #94A3B8;

  /* Primary – Indigo (slightly deeper for light bg) */
  --clr-blue:    #4F46E5;
  --clr-blue-dk: #3730A3;

  /* Semantic */
  --clr-cyan:   #0891B2;   /* Secondary   */
  --clr-green:  #16A34A;   /* Success      */
  --clr-red:    #DC2626;   /* Error        */
  --clr-orange: #D97706;   /* Warning      */
  --clr-purple: #7C3AED;   /* Accent       */
  --clr-yellow: #CA8A04;   /* Yellow       */
  --clr-pink:   #DB2777;   /* Chart extra  */
  --clr-info:   #0284C7;   /* Info         */
}

/* ── Light theme: component adjustments ──────────── */
[data-theme="light"] .navbar {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 1px 12px rgba(15, 23, 42, .08);
}

[data-theme="light"] .stat-card:hover {
  box-shadow: 0 8px 28px rgba(15, 23, 42, .10);
}

[data-theme="light"] .leaflet-control-attribution {
  background: rgba(248, 250, 252, .9) !important;
}

[data-theme="light"] .leaflet-bar a {
  background: #ffffff !important;
  color: var(--clr-text) !important;
  border-color: var(--clr-border) !important;
}

[data-theme="light"] .leaflet-popup-content-wrapper {
  box-shadow: 0 8px 32px rgba(15, 23, 42, .16) !important;
}

[data-theme="light"] .filter-group__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23475569'/%3E%3C/svg%3E");
}