/* ──────────────────────────────────────────────────────────
   LiveRoad — brand tokens
   Charcoal + amber. Inter. Flat, civic, utility-first.
   ────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* Brand */
  --charcoal:     #2a2f3a;   /* primary — nav, buttons, ink on cards */
  --charcoal-hi:  #353b48;   /* hover on charcoal fills */
  --amber:        #f5b800;   /* the live-pin signal. Sparingly. */
  --amber-hi:     #ffc82a;   /* hover */
  --amber-ink:    #8a6600;   /* amber on light text */

  /* Neutrals */
  --bg:           #F7F7F5;
  --paper:        #FFFFFF;
  --ink:          #111827;
  --ink-2:        #6B7280;
  --ink-3:        #9CA3AF;
  --line:         #E8E6E0;
  --line-2:       #D9D6CE;

  /* Semantic (map impact tiers) */
  --tier-high:    #C8102E;   /* closure / severe */
  --tier-med:     #f5b800;   /* amber — medium */
  --tier-low:     #006633;   /* clear / minor */

  /* Layer chip colours (map) */
  --layer-cam:     #1F4E8D;
  --layer-speed:   #C8102E;
  --layer-cctv:    #6D28D9;
  --layer-ev:      #006633;
  --layer-heat:    #EA580C;

  /* Shape */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --r-pill: 999px;

  /* Spacing (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 48px;
  --s-9: 64px;
  --s-10: 96px;

  /* Type */
  --font-ui:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Motion */
  --t-fast: 120ms;
  --ease:   cubic-bezier(0.2, 0, 0, 1);
}

/* Dark */
[data-theme="dark"] {
  --bg:     #0A0A0B;
  --paper:  #18181B;
  --ink:    #FAFAFA;
  --ink-2:  #A1A1AA;
  --ink-3:  #71717A;
  --line:   #27272A;
  --line-2: #3F3F46;
  --charcoal:    #FAFAFA;
  --charcoal-hi: #FFFFFF;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Global Inter tracking rule: -0.5px at ≥16 (approx -0.011em in Inter world) */
body { letter-spacing: -0.011em; }
.u-tight-display { letter-spacing: -0.025em; }  /* display, per spec feel */
.u-caps-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.u-mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; }

/* Live pulse */
@keyframes lr-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;    }
  50%      { transform: scale(1.4); opacity: 0;    }
}
.lr-pulse-ring {
  animation: lr-pulse 2s ease-out infinite;
  transform-origin: center;
}