/* =============================================================
   Agentic City Signals — Foundational design tokens
   -------------------------------------------------------------
   The Modernist system (Claude Design): flat, architectural, a
   near-mono signal red on paper, zero corner radius, strong 2px
   rules. One typeface — Archivo — does headings, body, and labels.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&display=swap');

:root {
  /* ---- BRAND: Signal red --------------------------------------
     A confident, mechanical red — the system's one accent, used
     sparingly: CTAs, active states, links, the graph's forecast
     halo, and the one place it runs as a field (contribute band). */
  --brand:            #EC3013;
  --brand-dark:       #DD2B0F;
  --brand-press:      #AE1800;
  --brand-deep:       #7C1405;
  --brand-tint:       #FFF2EF;
  --brand-tint-2:     #FFE0D9;

  /* Aliases — existing components reference these; the cascade
     updates them automatically when the primitives above change. */
  --carnelian:        var(--brand);
  --carnelian-dark:   var(--brand-dark);
  --carnelian-deep:   var(--brand-deep);
  --carnelian-tint:   var(--brand-tint);
  --carnelian-tint-2: var(--brand-tint-2);

  /* ---- NEUTRALS: warm architectural ink → paper --------------
     A visible modular grid does the organizing, not color — so
     the neutral scale carries almost everything.                */
  --ink:        #201E1D;   /* headlines, rules, primary text */
  --graphite:   #444141;   /* strong secondary text     */
  --slate:      #605D5D;   /* body on light, muted      */
  --steel:      #7D7979;   /* captions, mono labels     */
  --mist:       #9B9797;   /* disabled, dashed borders  */
  --fog:        #BAB6B6;   /* hairline dividers         */
  --cloud:      #EAE9E9;   /* subtle surface / fills    */
  --haze:       #F3F2F2;   /* page background           */
  --paper:      #F8F4F4;   /* card / panel surfaces     */

  /* ---- SECONDARY: one hue per taxonomy category --------------
     Low-chroma, readable, one per view in the graph and feed.   */
  --electric:      #2C4A6E;   /* Housing                   */
  --electric-tint: #EAF0F6;
  --sky:           #1F6B63;   /* Climate                   */
  --sky-tint:      #E7F2F0;
  --grass:         #4A5F36;   /* Public Health             */
  --grass-tint:    #EEF1E9;
  --sun:           #B07D18;   /* Infrastructure            */
  --sun-tint:      #FBF1E0;
  --tangerine:     #5C3A63;   /* Governance                */
  --tangerine-tint:#F1E9F2;

  --signal-blue:       var(--electric);
  --signal-green:      var(--grass);
  --signal-amber:      var(--sun);
  --signal-amber-tint: var(--sun-tint);

  /* ============================================================
     SEMANTIC TOKENS — reference these in product CSS
     ============================================================ */
  --bg:            var(--haze);
  --bg-subtle:     var(--cloud);
  --bg-sunken:     #E0DEDE;
  --bg-inverse:    var(--ink);

  --surface:        var(--paper);
  --surface-raised: #FFFFFF;

  --border:        var(--fog);
  --border-strong: var(--mist);
  --border-ink:    var(--ink);
  --hairline:      var(--fog);

  --text:          var(--ink);
  --text-secondary:var(--graphite);
  --text-muted:    var(--slate);
  --text-subtle:   var(--steel);
  --text-on-dark:  var(--haze);
  --text-on-accent:#F8F4F4;

  --accent:        var(--brand);
  --accent-hover:  var(--brand-dark);
  --accent-wash:   var(--brand-tint);
  --link:          var(--brand-press);
  --focus-ring:    var(--brand);

  /* ---- TYPE FAMILIES : one face does everything -------------- */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-sans:    'Archivo', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'Archivo', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- WEIGHTS ---------------------------------------------- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:700;
  --w-bold:    800;

  /* ---- FLUID TYPE SCALE ----------------------------------------- */
  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.05rem, 1.02rem + 0.16vw, 1.15rem);
  --step-1:  clamp(1.25rem, 1.17rem + 0.34vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.32rem + 0.62vw, 1.85rem);
  --step-3:  clamp(1.80rem, 1.58rem + 1.05vw, 2.55rem);
  --step-4:  clamp(2.25rem, 1.90rem + 1.70vw, 3.55rem);
  --step-5:  clamp(2.85rem, 2.25rem + 2.95vw, 5.20rem);
  --step-6:  clamp(3.40rem, 2.40rem + 5.20vw, 7.50rem);

  /* ---- SPACING (4pt base) ----------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  /* ---- RADII — zero, on purpose ------------------------------ */
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;

  /* ---- ELEVATION — flat by default; a hard offset shadow is the
     one "poster" move (card hover, the graph drawer) ----------- */
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(32,30,29,0.14);
  --shadow-md: 0 3px 10px rgba(32,30,29,0.16);
  --shadow-lg: 0 12px 32px rgba(32,30,29,0.22);
  --shadow-hard: 8px 8px 0 var(--ink);
  --ring-accent: 0 0 0 2px var(--brand);
  --ring-focus:  0 0 0 2px var(--brand);

  --maxw: 1360px;
}

/* =============================================================
   SEMANTIC TYPE — apply directly or copy into product CSS
   ============================================================= */
.ut-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.ut-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--step-6);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
}
.ut-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--step-5);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
}
.ut-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--step-4);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--text);
  text-wrap: balance;
}
.ut-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--step-3);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--text);
}
.ut-h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--step-2);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}
.ut-lead {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.ut-serif-lead {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.ut-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.ut-small {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text-muted);
}
.ut-mono-label {
  font-family: var(--font-mono);
  font-weight: var(--w-semibold);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ut-code {
  font-family: var(--font-mono);
  font-weight: var(--w-regular);
  font-size: 0.92em;
  background: var(--cloud);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.08em 0.4em;
  color: var(--graphite);
}