/* ============================================================
   UATAG CRM — Design tokens (SET-03, SET-04, 19.1)
   Style: monospace, warm neutral surfaces, uppercase controls,
   single blue accent. Light is default; dark via [data-theme="dark"].
   ============================================================ */
:root {
  /* Typography — monospace everywhere */
  --font-sans: "Inter", -apple-system, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --text-display: 600 30px/1.15 var(--font-sans);
  --text-h1: 600 20px/1.25 var(--font-sans);
  --text-h2: 600 15px/1.35 var(--font-sans);
  --text-h3: 600 14px/1.4 var(--font-sans);
  --text-body: 400 14px/1.55 var(--font-sans);
  --text-label: 500 13px/1.4 var(--font-sans);
  --text-caption: 400 12px/1.45 var(--font-sans);
  --text-table: 400 13px/1.45 var(--font-sans);
  --text-metric: 600 26px/1.1 var(--font-sans);
  --caps: none;
  --caps-spacing: 0;

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* Radius */
  --r-1: 4px; --r-2: 7px; --r-3: 12px;

  /* Elevation (overlays only) */
  --shadow-menu: 0 6px 20px rgba(24,24,27,.10), 0 0 0 1px rgba(24,24,27,.05);
  --shadow-dialog: 0 20px 56px rgba(24,24,27,.22);
  --shadow-float: 0 8px 28px rgba(24,24,27,.14), 0 0 0 1px rgba(24,24,27,.05);

  /* Layout */
  --sidebar-w: 248px;
  --header-h: 60px;
  --content-max: 1440px;

  /* Color — light (warm neutrals) */
  --bg: #f4f4f5;
  --bg-subtle: #efeff1;
  --bg-muted: #e6e6e9;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --border: #e4e4e7;
  --border-strong: #d0d0d5;
  --text: #18181b;
  --text-2: #5b5b63;
  --text-3: #8c8c94;
  --text-inverse: #ffffff;

  --ink: #18181b;
  --ink-hover: #2f2f36;
  --accent: #3b82f6;         /* blue accent, used sparingly */
  --accent-hover: #2563eb;
  --accent-soft: rgba(59,130,246,.14);
  --accent-text: #2563eb;

  --success: #1f8a4c; --success-soft: #e4f3ea;
  --warning: #b36a00; --warning-soft: #fbefd9;
  --danger:  #c9352c; --danger-soft:  #fbe6e4;
  --info:    #52525b; --info-soft:    #ececef;
  --neutral: #5b5b63; --neutral-soft: #ececef;

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* Charts */
  --chart-1: #18181b;
  --chart-2: #4b5fd6;
  --chart-3: #e0452b;
  --chart-grid: #e6e6e9;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #151517;
  --bg-subtle: #1b1b1e;
  --bg-muted: #242428;
  --surface: #1a1a1d;
  --surface-raised: #212124;
  --border: #2c2c31;
  --border-strong: #3e3e45;
  --text: #ececee;
  --text-2: #a3a3ab;
  --text-3: #71717a;
  --text-inverse: #151517;

  --ink: #ececee;
  --ink-hover: #d4d4d8;
  --accent: #4f8cff;
  --accent-hover: #6ea1ff;
  --accent-soft: rgba(79,140,255,.2);
  --accent-text: #7fb0ff;

  --success: #4fc482; --success-soft: #12291b;
  --warning: #e5a53f; --warning-soft: #2f2412;
  --danger:  #f0675f; --danger-soft:  #351a18;
  --info:    #a1a1aa; --info-soft:    #2a2a30;
  --neutral: #a3a3ab; --neutral-soft: #242428;

  --shadow-menu: 0 6px 20px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-dialog: 0 20px 56px rgba(0,0,0,.65);
  --shadow-float: 0 8px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);

  --chart-1: #ececee;
  --chart-2: #6b8cff;
  --chart-3: #ff5a36;
  --chart-grid: #2a2a2e;

  color-scheme: dark;
}

/* Glass surfaces for everything floating over the map. Dark by default (Felt-like), light variant below. */
.glass, .header, .rail {
  --glass-solid: #0f0f11;
  --surface: rgba(17,17,19,.88); --surface-raised: #1b1b1e; --bg: rgba(17,17,19,.88);
  --bg-subtle: rgba(255,255,255,.06); --bg-muted: rgba(255,255,255,.11);
  --border: rgba(255,255,255,.1); --border-strong: rgba(255,255,255,.2);
  --text: #f4f4f5; --text-2: rgba(244,244,245,.72); --text-3: rgba(244,244,245,.5); --text-inverse: #111113;
  --ink: #f4f4f5; --ink-hover: #ffffff; --neutral-soft: rgba(255,255,255,.1); --neutral: rgba(244,244,245,.8);
  --info-soft: rgba(79,179,255,.18); --info: #4fb3ff; --success-soft: rgba(57,217,138,.16); --success: #39d98a;
  --warning-soft: rgba(255,176,32,.18); --warning: #ffb020; --danger-soft: rgba(255,90,54,.18); --danger: #ff5a36;
  --shadow-menu: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  color: var(--text); color-scheme: dark;
}

:root[data-theme="light"] .glass, :root[data-theme="light"] .header, :root[data-theme="light"] .rail {
  --glass-solid: #ffffff;
  --surface: rgba(255,255,255,.9); --surface-raised: #ffffff; --bg: rgba(255,255,255,.9);
  --bg-subtle: rgba(0,0,0,.04); --bg-muted: rgba(0,0,0,.07);
  --border: rgba(0,0,0,.08); --border-strong: rgba(0,0,0,.18);
  --text: #18181b; --text-2: rgba(24,24,27,.7); --text-3: rgba(24,24,27,.5); --text-inverse: #ffffff;
  --ink: #18181b; --ink-hover: #2f2f36; --neutral-soft: rgba(0,0,0,.06); --neutral: rgba(24,24,27,.75);
  --info-soft: rgba(37,99,235,.12); --info: #2563eb; --success-soft: rgba(31,138,76,.12); --success: #1f8a4c;
  --warning-soft: rgba(179,106,0,.12); --warning: #b36a00; --danger-soft: rgba(201,53,44,.12); --danger: #c9352c;
  --shadow-menu: 0 10px 30px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.05);
  color-scheme: light;
}