/* Monochrome Notion/Linear tokens (softened). Tailwind's white + slate scale
   are remapped to these variables (see tailwind.config in base.html), so utility
   classes are theme-aware and flip in dark mode automatically. */
:root {
  --bg: #fafaf9;
  --surface: #ffffff;
  --muted: #f4f4f5;
  --border: #e9e9ec;
  --faint: #b3b3ba;
  --muted-fg: #71717a;
  --fg: #2b2b2f;            /* softer than near-black */
  --accent: #2b2b2f;        /* primary action (soft dark gray) */
  --sidebar: #f6f6f5;

  /* Data-viz palette — tonal muted-navy ramp (deep → pale), modern/editorial */
  --chart-1: #2b3a63;       /* deep muted navy — primary data color */
  --chart-2: #46598c;
  --chart-3: #6478ad;
  --chart-4: #8b9cc7;
  --chart-5: #b4c1dd;
  --chart-6: #d6dded;
  --viz-good: #3c8674;      /* desaturated teal */
  --viz-warn: #c39b4a;      /* muted sand */
  --viz-bad:  #b95c68;      /* muted brick */
  --map-low:  #dfe6f3;      /* choropleth: pale slate-blue → deep navy */
  --map-high: #2b3a63;
  --map-empty: #eef0f3;
  --map-stroke: #ffffff;
  --on-chart: #ffffff;   /* text on chart-1 fills */
}

.dark {
  --bg: #17171a;           /* soft charcoal, not pure black */
  --surface: #1e1e22;
  --muted: #27272b;
  --border: #2d2d33;
  --faint: #5a5a63;
  --muted-fg: #a1a1aa;
  --fg: #e9e9ec;           /* soft white */
  --accent: #e9e9ec;
  --sidebar: #141417;

  /* Data-viz palette — tonal navy ramp lifted for dark surfaces (pale → deep) */
  --chart-1: #93a5d6;       /* dusty slate-blue — primary on dark */
  --chart-2: #7488bd;
  --chart-3: #5a6da1;
  --chart-4: #475883;
  --chart-5: #364464;
  --chart-6: #2b3550;
  --viz-good: #5fb3a1;
  --viz-warn: #d9b166;
  --viz-bad:  #d98793;
  --map-low:  #2b3550;      /* deep navy → pale slate-blue */
  --map-high: #aabbe8;
  --map-empty: #26262b;
  --map-stroke: #17171a;
  --on-chart: #1a2138;
}

html { background: var(--bg); }
body { background: var(--bg); color: var(--fg);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; }

/* Logo ships white-filled → keep in dark mode, invert to dark in light mode. */
.logo { filter: invert(1); }
.dark .logo { filter: none; }

* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

a, button, .sidebar, .nav-label, .brand-text { transition: background-color .12s ease, color .12s ease, opacity .12s ease, width .16s ease; }

.nav-active { background: var(--muted); color: var(--fg); font-weight: 500; }
.sidebar { background: var(--sidebar); width: 15rem; }

/* ── Collapsed (icon-rail) sidebar ─────────────────────────────────────── */
html.collapsed .sidebar { width: 3.75rem; }
html.collapsed .sidebar .nav-label,
html.collapsed .sidebar .brand-text,
html.collapsed .sidebar .nav-children,
html.collapsed .sidebar .user-meta { display: none; }
html.collapsed .sidebar .nav-item,
html.collapsed .sidebar .brand { justify-content: center; padding-left: 0; padding-right: 0; }
.collapse-icon { transition: transform .16s ease; }
html.collapsed .collapse-icon { transform: rotate(180deg); }

/* Native <select> popups follow the theme (dark option list in dark mode). The
   closed box is themed via bg/text utility classes; this covers the OS popup. */
select { color-scheme: light; }
.dark select { color-scheme: dark; }