/* ============================================================
   NIMBLE GOLDEN RATIO DESIGN TOKENS — adopted into ATC
   The Nimble Group — Universal Design System
   Base: 16px  •  Ratio: 1.618 (φ)
   v1.0 — April 2026
   ------------------------------------------------------------
   Loaded BEFORE colors_and_type.css. ATC's brand layer maps
   its semantic tokens (--sp-*, --fs-*, --lh-*) onto these.
   ATC overrides:
     • Display headlines keep their own clamp() tokens.
     • Border-radius is NOT imported — ATC is hard-edged.
   ============================================================ */

:root {
  /* ═══ Golden Ratio Base ═══ */
  --phi: 1.618; /* @kind other */
  --base: 16; /* @kind other */

  /* ═══ Spacing Scale ═══ */
  --space-3xs: 4px;
  --space-2xs: 6px;
  --space-xs:  8px;
  --space-sm:  10px;
  --space-md:  16px;
  --space-lg:  26px;
  --space-xl:  42px;
  --space-2xl: 68px;
  --space-3xl: 110px;

  /* ═══ Typography Scale ═══ */
  --text-xs:   10px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-lg:   26px;
  --text-xl:   42px;
  --text-2xl:  52px;
  --text-3xl:  68px;

  /* Extended display tier — ATC needs Bebas to go large.
     ×φ⁴ = 110, ×φ⁵ = 178, ×φ⁶ = 288. */
  --text-4xl:  110px;
  --text-5xl:  178px;
  --text-6xl:  288px;

  /* ═══ Fluid Typography ═══ */
  --fluid-heading: clamp(42px, 4vw, 68px); /* @kind font */
  --fluid-display: clamp(52px, 5vw, 86px); /* @kind font */
  --fluid-body:    clamp(16px, 1.2vw, 18px); /* @kind font */

  /* ═══ Layout Proportions ═══ */
  --ratio-major: 61.8%;
  --ratio-minor: 38.2%;
  --content-max: 1200px;
  --reading-max: 720px;

  /* ═══ Line Heights ═══ */
  --leading-tight:   1.1;
  --leading-heading: 1.2;
  --leading-body:    1.618;
  --leading-loose:   1.8;
}

/* ═══ Responsive Compression ═══ */
@media (max-width: 768px) {
  :root {
    --space-lg:  16px;
    --space-xl:  26px;
    --space-2xl: 42px;
    --space-3xl: 68px;
  }
}