/* ============================================================================
   DESIGN TOKENS
   "How Big Is an AI Data Center, Really?" — Phase 1
   Every value here traces to spec §8. Do not introduce hues, sizes, or scales
   outside these bounds without updating the spec.
   ========================================================================== */

:root {
  /* --- Palette (§8) -------------------------------------------------------
     No hues beyond these. Amber is the subject; blue-gray is water only. */
  --color-paper:        #FCFBF8;  /* page background (cooler than cream) */
  --color-ink:          #1A1815;  /* primary text */

  --color-warmgray-100: #E8E4DC;  /* basemap base / hairline rules (light) */
  --color-warmgray-300: #B7B0A4;  /* rules / secondary strokes (mid) */

  --color-amber:        #D08A2E;  /* the subject — earthy cartographic tan */
  --color-water:        #4E7FA0;  /* restrained secondary, water sections only */

  /* Ink tints (derived from ink at opacity — not new hues) */
  --color-ink-70:       rgba(26, 24, 21, 0.70);  /* muted body / captions */
  --color-ink-55:       rgba(26, 24, 21, 0.55);  /* annotations, meta */
  --color-ink-40:       rgba(26, 24, 21, 0.40);  /* faint labels */

  /* Amber applications (map fills & strokes per §2/§8) */
  --amber-fill-operational: rgba(208, 138, 46, 0.35); /* solid fill ~35% */
  --amber-fill-designed:    rgba(208, 138, 46, 0.12); /* designed/announced 12% */
  --amber-stroke:           #D08A2E;
  --amber-stroke-designed-width: 2px;                 /* dashed 2px for designed */

  /* --- Typography families (§8) ------------------------------------------ */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Weights */
  --weight-body:     400;
  --weight-medium:   500;
  --weight-semibold: 600;  /* display heds 600–700 */
  --weight-bold:     700;

  /* --- Type scale (§8) ---------------------------------------------------
     hed 44–64px (clamp), dek 20–22px, body 17–18px, annotation 12–13px. */
  --fs-hed:        clamp(2.75rem, 6vw, 4rem);      /* 44 → 64px */
  --fs-section:    clamp(1.75rem, 3.5vw, 2.25rem); /* section heds */
  --fs-dek:        clamp(1.25rem, 2.2vw, 1.375rem);/* 20 → 22px */
  --fs-body-lg:    1.1875rem;                      /* 19px lead paragraph */
  --fs-body:       1.0625rem;                      /* 17px base narrative */
  --fs-body-sm:    1rem;                           /* 16px */
  --fs-annotation: 0.8125rem;                      /* 13px map/graphic labels */
  --fs-eyebrow:    0.75rem;                         /* 12px letterspaced caps */
  --fs-chip:       0.75rem;                         /* 12px source chips */

  /* Leading (§8: tight leading on display) */
  --lh-hed:   1.04;
  --lh-dek:   1.32;
  --lh-body:  1.62;
  --lh-tight: 1.2;

  /* Letterspacing */
  --ls-eyebrow: 0.12em;  /* small-caps eyebrows */
  --ls-hed:    -0.012em; /* slight negative tracking on large serif */

  /* --- Layout (§8) ------------------------------------------------------- */
  --measure-text:    680px;  /* centered narrative column */
  --measure-graphic: 980px;  /* graphics break-out width */
  --gutter:          clamp(1.25rem, 5vw, 2.5rem); /* page side padding */

  /* Vertical rhythm */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;   /* between major sections */

  /* Standard spacing gaps (§30a) — applied universally so chapter and
     intra-section rhythm are consistent rather than ad-hoc per section.
     --gap-chapter is the SINGLE inter-chapter gap: it is each section's top and
     bottom padding, so every chapter boundary (including header→01) is exactly
     2× this value, uniformly. Sized to the tightest existing boundary. */
  --gap-chapter: 5rem;             /* per side → 160px between every chapter */
  --gap-section: var(--space-lg);  /* between blocks within a chapter */

  /* Hairline rules (§8) */
  --rule-hairline: 1px solid var(--color-warmgray-100);
  --rule-mid:      1px solid var(--color-warmgray-300);

  /* --- Motion (§8) -------------------------------------------------------
     200–400ms ease-out; nothing loops; reduced-motion kills all. */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    200ms;
  --dur-mid:     300ms;
  --dur-slow:    400ms;

  /* Focus ring (accessibility — visible keyboard focus, §5) */
  --focus-ring: 2px solid var(--color-amber);
  --focus-offset: 2px;

  /* Elevation (restrained — popovers/chips only; no glow per §2) */
  --shadow-popover: 0 2px 12px rgba(26, 24, 21, 0.12), 0 0 0 1px rgba(26, 24, 21, 0.06);
  --radius-sm: 4px;
  --radius-md: 8px;
}

/* prefers-reduced-motion collapses all durations to 0 (§5, §8) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-mid:  0ms;
    --dur-slow: 0ms;
  }
}