/* ============================================================
   GeoVisualizer — Design Tokens
   Technical geometric sans (Geist) + monospace (Geist Mono)
   Cartographic blue accent. Light + Dark via [data-theme].
   ============================================================ */

:root {
  /* Type */
  --font-sans: "Geist", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Accent — cartographic blue (consistent hue across themes) */
  --accent: #1f6feb;
  --accent-hover: #1a60d0;
  --accent-soft: rgba(31, 111, 235, 0.10);
  --accent-soft-2: rgba(31, 111, 235, 0.18);
  --accent-fg: #ffffff;

  /* Semantic feature colors (for layer chips / analysis) */
  --c-blue: #1f6feb;
  --c-green: #1f9d57;
  --c-amber: #d98a09;
  --c-rose: #d6395e;
  --c-violet: #7c5cdb;
  --c-cyan: #0f9cb8;

  /* Radii */
  --r-xs: 5px;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* Density (overridable by tweaks) */
  --density: 1;
  --space-1: calc(4px * var(--density));
  --space-2: calc(8px * var(--density));
  --space-3: calc(12px * var(--density));
  --space-4: calc(16px * var(--density));
  --space-5: calc(22px * var(--density));
  --space-6: calc(30px * var(--density));

  /* Chrome dimensions */
  --topbar-h: 54px;
  --statusbar-h: 30px;
  --sidebar-w: 312px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.22s;
}

/* ---------- LIGHT ---------- */
[data-theme="light"] {
  --bg: #eef1f5;
  --surface: #ffffff;
  --surface-2: #f4f6f9;
  --surface-3: #eaedf2;
  --surface-inset: #f7f9fb;
  --border: #dfe3ea;
  --border-strong: #c8ced8;
  --text: #11151c;
  --text-2: #525c6b;
  --text-3: #8b94a3;
  --shadow-sm: 0 1px 2px rgba(16, 22, 35, 0.06), 0 1px 1px rgba(16, 22, 35, 0.04);
  --shadow-md: 0 6px 20px -6px rgba(16, 22, 35, 0.16), 0 2px 6px rgba(16, 22, 35, 0.06);
  --shadow-lg: 0 20px 48px -12px rgba(16, 22, 35, 0.28), 0 6px 16px rgba(16, 22, 35, 0.10);
  --scrim: rgba(20, 26, 38, 0.42);
  --map-control-bg: rgba(255, 255, 255, 0.92);
  --grain: 0.4;
}

/* ---------- DARK ---------- */
[data-theme="dark"] {
  --bg: #090b10;
  --surface: #13161d;
  --surface-2: #1a1e27;
  --surface-3: #222732;
  --surface-inset: #0f1218;
  --border: #262c37;
  --border-strong: #353c49;
  --text: #e9ecf2;
  --text-2: #9aa3b3;
  --text-3: #616a7a;
  --accent: #4d8dff;
  --accent-hover: #6aa0ff;
  --accent-soft: rgba(77, 141, 255, 0.13);
  --accent-soft-2: rgba(77, 141, 255, 0.22);
  --c-blue: #4d8dff;
  --c-green: #34c178;
  --c-amber: #eaa83a;
  --c-rose: #f1648a;
  --c-violet: #a487f5;
  --c-cyan: #34c0db;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -6px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, 0.7), 0 8px 20px rgba(0, 0, 0, 0.5);
  --scrim: rgba(4, 6, 10, 0.6);
  --map-control-bg: rgba(19, 22, 29, 0.92);
  --grain: 0.55;
}