/* ============================================================
   StatGazer — Pop-Art Kit · Design Tokens
   Brand palette + type. Drop into any page and use the vars.
   ============================================================ */

:root {
  /* ---- Core ---- */
  --sg-paper:        #F7F8FA;  /* page background / "paper" */
  --sg-surface:      #FFFFFF;  /* cards / surface */
  --sg-ink:          #0B1220;  /* near-black navy — the contour ink */
  --sg-navy:         #13233F;  /* dark panels */

  /* ---- The one signature accent: institutional teal ---- */
  --sg-accent:       #0E7C7B;  /* primary accent (fills, highlights) */
  --sg-accent-hi:    #3BA9A6;  /* "electric" teal — use on dark backgrounds */
  --sg-accent-deep:  #0C5E5D;  /* deep teal — 4th value in Warhol grids */
  --sg-accent-tint:  #E2F0EF;  /* soft teal wash */

  /* ---- Signal (use sparingly) ---- */
  --sg-flag:         #E0A23B;  /* amber — flags / warnings ONLY */

  /* ---- Text & neutrals ---- */
  --sg-muted:        #5A6577;
  --sg-muted-2:      #404B63;
  --sg-muted-dark:   #9AA6BC;  /* muted on dark */

  /* ---- Lines ---- */
  --sg-border:       #E5E8EF;
  --sg-border-strong:#D2D8E4;
  --sg-border-dark:  #26344F;

  /* ---- Type ---- */
  --sg-font-poster: 'Archivo Black', system-ui, sans-serif; /* headlines / impact */
  --sg-font-mono:   'Spline Sans Mono', ui-monospace, monospace; /* placards / labels */

  /* ---- Shared scale ---- */
  --fs-h1: clamp(2.05rem, 1.2rem + 2.6vw, 3.2rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-h3: clamp(1.375rem, 1.15rem + 0.95vw, 1.75rem);
  --fs-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --fs-hero-lead: clamp(1.05rem, 0.98rem + 0.25vw, 1.18rem);
  --fs-body: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem);
  --fs-small: clamp(0.875rem, 0.86rem + 0.06vw, 0.9375rem);
  --fs-eyebrow: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
  --fs-tag: clamp(0.625rem, 0.61rem + 0.07vw, 0.6875rem);

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 64px;
  --r-card: 6px;
  --r-btn: 6px;
  --shadow-nav: 0 1px 0 rgba(11, 18, 32, 0.04), 0 6px 24px -18px rgba(11, 18, 32, 0.25);
}