/* =============================================================
   Agentic City Signals — Foundational design tokens
   -------------------------------------------------------------
   Palette: cool indigo accent over a cool-light neutral scale.
   Editorial register: Newsreader display serif + Hanken Grotesk
   body sans + IBM Plex Mono for data labels.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---- BRAND: Indigo ----------------------------------------
     A clear, confident indigo — smart and forward-looking without
     reading as generic tech blue. The single hero accent: used for
     CTAs, active states, links, and the graph's trend nodes.     */
  --brand:            #4A5BD4;
  --brand-dark:       #3D4EC0;
  --brand-press:      #3041A8;
  --brand-deep:       #2D3A96;
  --brand-tint:       #EEF0FB;
  --brand-tint-2:     #D5DAFA;

  /* 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: cool-tinted ink → paper --------------------
     A cool-shifted gray scale — slight blue cast keeps the
     palette coherent without feeling clinical.                   */
  --ink:        #111420;   /* headlines, primary text   */
  --graphite:   #363B47;   /* strong secondary text     */
  --slate:      #5B6175;   /* body on light, muted      */
  --steel:      #8A91A3;   /* captions, placeholder     */
  --mist:       #BCC2CF;   /* disabled, hairline-on-color */
  --fog:        #D8DDE6;   /* default borders           */
  --cloud:      #EDF0F5;   /* subtle surface / fills    */
  --haze:       #F5F7FA;   /* page background           */
  --paper:      #FFFFFF;   /* card / panel surfaces     */

  /* ---- SECONDARY: data palette ------------------------------
     Low-chroma, readable. Graph: signals=electric, trends=brand,
     forecasts=sun. Use ONE alongside brand per view.            */
  --electric:      #3B82F6;   /* signal nodes, focus rings */
  --electric-tint: #EFF6FF;
  --sky:           #0891B2;
  --sky-tint:      #E0F9FF;
  --grass:         #2D6A4F;
  --grass-tint:    #E6F0EC;
  --sun:           #B45309;   /* forecast nodes            */
  --sun-tint:      #FEF3C7;
  --tangerine:     #9C5B43;
  --tangerine-tint:#F1E6DF;

  --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);    /* cool off-white page bg   */
  --bg-subtle:     var(--cloud);
  --bg-sunken:     #E5E9F0;
  --bg-inverse:    var(--ink);

  --surface:        var(--paper);  /* cards sit on white       */
  --surface-raised: var(--paper);

  --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(--paper);
  --text-on-accent:#FFFFFF;

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

  /* ---- TYPE FAMILIES ---------------------------------------- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

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

  /* ---- FLUID TYPE SCALE (1.250 major-third) ----------------- */
  --step--1: clamp(0.80rem, 0.78rem + 0.10vw, 0.86rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.34vw, 1.40rem);
  --step-2:  clamp(1.45rem, 1.32rem + 0.60vw, 1.85rem);
  --step-3:  clamp(1.80rem, 1.55rem + 1.00vw, 2.50rem);
  --step-4:  clamp(2.20rem, 1.85rem + 1.60vw, 3.40rem);
  --step-5:  clamp(2.70rem, 2.10rem + 2.70vw, 4.70rem);
  --step-6:  clamp(3.20rem, 2.30rem + 4.60vw, 6.40rem);

  /* ---- 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 — tighter for a crisper editorial look --------- */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---- ELEVATION (lean on hairlines; shadows stay subtle) --- */
  --shadow-xs: 0 1px 2px rgba(17,20,32,0.04);
  --shadow-sm: 0 1px 2px rgba(17,20,32,0.04), 0 1px 3px rgba(17,20,32,0.05);
  --shadow-md: 0 2px 8px rgba(17,20,32,0.06), 0 1px 2px rgba(17,20,32,0.04);
  --shadow-lg: 0 8px 28px rgba(17,20,32,0.08), 0 2px 6px rgba(17,20,32,0.05);
  --ring-accent: 0 0 0 3px var(--brand-tint);
  --ring-focus:  0 0 0 3px rgba(74,91,212,0.24);

  --maxw: 1200px;
}

/* =============================================================
   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-medium);
  font-size: var(--step-6);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
.ut-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--step-5);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
.ut-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--step-4);
  line-height: 1.12;
  letter-spacing: -0.005em;
  color: var(--text);
  text-wrap: balance;
}
.ut-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--step-3);
  line-height: 1.18;
  letter-spacing: 0;
  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;
  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-regular);
  font-style: italic;
  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-medium);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  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);
}