/* ============================================================
 * TerraIQ — Colors and Type
 * Tokens lifted directly from terra_webapp.html (the production
 * single-file Leaflet scorer). Names are normalized; values are
 * unchanged.
 * ============================================================ */

:root {
  /* ──────────────────────────────────────────────
   * Surfaces (dark, two-layer + insets)
   * ────────────────────────────────────────────── */
  --bg:            #0f1117;  /* page, map letterbox */
  --surface-1:     #161b27;  /* sidebar, popups, detail panel */
  --surface-2:     #1e2535;  /* dropdowns, buttons-secondary, mini-stat blocks */
  --surface-3:     #263238;  /* well-style inputs (inside Refine) */
  --surface-4:     #263a4a;  /* preset buttons (idle) */
  --surface-hover: #37474f;  /* hover lift */

  --border:        #2a3248;  /* structural dividers */
  --border-strong: #37474f;  /* input borders, secondary frames */
  --border-input:  #455a64;  /* refine-input borders */

  /* Translucents */
  --surface-1-90:  #161b27ee;   /* detail panel bg with backdrop-blur */
  --scrim:         #0f1117cc;   /* loading scrim */

  /* ──────────────────────────────────────────────
   * Foreground (text)
   * ────────────────────────────────────────────── */
  --fg-1: #e0e0e0;   /* primary body */
  --fg-2: #cfd8dc;   /* slightly muted */
  --fg-3: #b0bec5;   /* labels */
  --fg-4: #90a4ae;   /* helper / status */
  --fg-5: #78909c;   /* mini-stat caption */
  --fg-6: #546e7a;   /* faintest */
  --fg-on-accent: #0f1117;
  --fg-on-light:   #1a1a1a;

  /* ──────────────────────────────────────────────
   * Accents (semantic)
   * ────────────────────────────────────────────── */
  --accent:           #4fc3f7;   /* PRIMARY — sky cyan. Section headers, sliders, primary btn */
  --accent-hover:     #81d4fa;
  --accent-deep:      #1565c0;   /* selected preset */
  --accent-2:         #81c784;   /* SECONDARY — mint green. Brand "IQ", success */
  --accent-2-deep:    #2e7d32;   /* export button border */
  --accent-2-bg:      #1b2e1b;   /* tagged-investment block bg */
  --accent-2-faint:   #a5d6a7;
  --warn:             #ffb74d;   /* $/acre */
  --warn-strong:      #ffc107;   /* tier-1 city pin */

  /* Project tier colors (mega-projects) */
  --tier1: #ef5350;  /* > $10B  */
  --tier2: #ff9800;  /* $1–10B  */
  --tier3: #66bb6a;  /* < $1B   */

  /* Flip-candidate (Up-and-Coming) palette */
  --flip-1-fill:   #ad1457;
  --flip-1-border: #560027;
  --flip-2-fill:   #e91e63;
  --flip-2-border: #880e4f;
  --flip-3-fill:   #f06292;
  --flip-3-border: #c2185b;
  --flip-4-fill:   #f48fb1;
  --flip-4-border: #ad1457;

  /* ──────────────────────────────────────────────
   * Score gradient (the brand's signature)
   * 9-stop perceptually-sequential ramp w/ gamma 0.65.
   * Used for choropleth fills, parcel circles, score
   * badges, the legend bar, and the gauge SVG.
   * ────────────────────────────────────────────── */
  --score-0:   #0d1a49;  /* near-black navy */
  --score-15:  #1b398f;  /* deep blue */
  --score-30:  #1e72ba;  /* mid blue */
  --score-45:  #2baa9f;  /* teal */
  --score-60:  #81c864;  /* bright green */
  --score-72:  #ede03c;  /* yellow */
  --score-84:  #f39c2f;  /* orange */
  --score-93:  #e65028;  /* red-orange */
  --score-100: #a00f0f;  /* deep red */
  --score-null: #546e7a;
  --score-gamma: 0.65;
  --score-gradient: linear-gradient(
    to right,
    var(--score-0) 0%, var(--score-15) 15%, var(--score-30) 30%,
    var(--score-45) 45%, var(--score-60) 60%, var(--score-72) 72%,
    var(--score-84) 84%, var(--score-93) 93%, var(--score-100) 100%
  );

  /* ──────────────────────────────────────────────
   * Typography
   * ────────────────────────────────────────────── */
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* sizes — small & tight, tuned for an analytical sidebar */
  --fs-h1:        1.2rem;   /* topbar wordmark */
  --fs-detail-h2: 0.95rem;  /* detail-panel header */
  --fs-badge:     1.4rem;   /* score badge */
  --fs-stat-val:  1.2rem;   /* mini-stat number */
  --fs-base:      0.85rem;
  --fs-body:      0.80rem;  /* labels */
  --fs-input:     0.78rem;
  --fs-helper:    0.72rem;
  --fs-micro:     0.68rem;
  --fs-tiny:      0.62rem;

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight: 1.2;
  --lh-base:  1.4;

  --tracking-section: 1px;   /* uppercase section headers */
  --tracking-stat:    0.5px;

  /* ──────────────────────────────────────────────
   * Radii
   * ────────────────────────────────────────────── */
  --r-xs: 2px;   /* dot, tooltip pill */
  --r-sm: 3px;   /* legend bar, filter bar */
  --r-md: 4px;   /* buttons, inputs */
  --r-lg: 5px;   /* primary button, score bar bg */
  --r-xl: 8px;   /* panels, popups */
  --r-pill: 20px; /* sbadge, T1 city tooltip */

  /* ──────────────────────────────────────────────
   * Spacing
   * ────────────────────────────────────────────── */
  --sp-1:  3px;
  --sp-2:  6px;
  --sp-3:  8px;
  --sp-4: 10px;
  --sp-5: 14px;   /* .sb vertical padding */
  --sp-6: 16px;   /* .sb horizontal padding */
  --sp-7: 18px;
  --sidebar-w: 290px;

  /* ──────────────────────────────────────────────
   * Shadows — almost none. Only used over imagery.
   * ────────────────────────────────────────────── */
  --shadow-tooltip: 0 0 8px #000;
  --text-shadow-on-map: 0 0 3px #000;
  --backdrop-blur: 6px;

  /* ──────────────────────────────────────────────
   * Transitions
   * ────────────────────────────────────────────── */
  --t-fast: 150ms ease;
}

/* ============================================================
 * Semantic type roles — apply directly OR mirror in components
 * ============================================================ */

.t-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  letter-spacing: 1px;
  color: var(--accent);
  font-weight: var(--fw-semibold);
}
.t-h1 .mark { color: var(--accent-2); }   /* "IQ" half of the wordmark */

.t-section {
  font-family: var(--font-sans);
  font-size: var(--fs-helper);
  text-transform: uppercase;
  letter-spacing: var(--tracking-section);
  color: var(--accent);
  font-weight: var(--fw-semibold);
}

.t-detail-h2 {
  font-size: var(--fs-detail-h2);
  color: var(--accent);
  font-weight: var(--fw-semibold);
}

.t-label {
  font-size: var(--fs-body);
  color: var(--fg-3);
}

.t-helper {
  font-size: var(--fs-helper);
  color: var(--fg-4);
}

.t-micro {
  font-size: var(--fs-micro);
  color: var(--fg-4);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
}

.t-stat-val {
  font-size: var(--fs-stat-val);
  color: var(--accent);
  font-weight: var(--fw-bold);
}

.t-stat-lbl {
  font-size: var(--fs-micro);
  color: var(--fg-5);
  text-transform: uppercase;
  letter-spacing: var(--tracking-stat);
}

.t-status {
  font-size: var(--fs-input);
  color: var(--fg-4);
}