/* =============================================================
   ACI — Design Tokens
   Single source of truth. Every color, type ramp, spacing step,
   shape and motion value is declared here so the WP child theme
   migration is a 1:1 paste of these :root vars into style.css.
   ============================================================= */

:root {
  /* ---------- Color ---------- */
  --ink:          #0B0B0C;   /* primary background, text on bone */
  --ink-2:        #141416;   /* one notch up from ink, for layered darks */
  --ink-3:        #1C1C1F;   /* card bg on dark */
  --bone:         #F4F1EA;   /* primary background on light, text on ink */
  --bone-2:       #E9E4D9;   /* warmer panel */
  --dirt:         #6B4A2C;   /* warm earth accent */
  --dirt-deep:    #2C1F18;   /* deep earth, near-black brown */
  --safety:       #F4C100;   /* hot accent — used surgically */
  --safety-soft:  #C29800;   /* hover / pressed safety */
  --rule-dark:    rgba(255,255,255,0.10);
  --rule-light:   rgba(11,11,12,0.10);
  --muted-dark:   rgba(244,241,234,0.62);
  --muted-light:  rgba(11,11,12,0.62);

  /* ---------- Type ---------- */
  --font-display: "Anton", "Oswald", "Impact", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type ramp upper bounds tuned so oversized headlines stay editorial
     but never overflow 100svh on common laptop viewports (1366-1920w
     × 720-1080h). Lower bounds keep mobile readable. */
  --fs-display:   clamp(3.25rem, 9vw, 8.5rem);
  --fs-mega:      clamp(2.5rem, 6.5vw, 6rem);
  --fs-h1:        clamp(2.25rem, 4.5vw, 4.25rem);
  --fs-h2:        clamp(1.75rem, 3vw, 3rem);
  --fs-h3:        clamp(1.25rem, 1.6vw, 1.6rem);
  --fs-body:      1.0625rem;
  --fs-small:     0.875rem;
  --fs-eyebrow:   0.78rem;

  --lh-display:   0.92;
  --lh-tight:     1.05;
  --lh-body:      1.55;

  --tracking-eyebrow: 0.22em;
  --tracking-display: -0.02em;
  --tracking-mono:    0.04em;

  /* ---------- Spacing (8pt-ish scale) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  --gutter:       clamp(1.25rem, 4vw, 4rem);
  --section-y:    clamp(4rem, 9vw, 9rem);

  /* ---------- Layout ---------- */
  --max-w:        1480px;
  --max-w-narrow: 980px;
  --col-12:       repeat(12, minmax(0, 1fr));

  /* Header reserve. Used by the hero (and any other 100svh section)
     to clear the fixed nav. Keep in sync with .site-header padding +
     logo height in nav.css. */
  --header-h:          100px;
  --header-h-scrolled: 72px;

  /* ---------- Radius (used sparingly — brand wants angles, not rounded) ---------- */
  --r-pill: 999px;
  --r-sm:   2px;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    180ms;
  --dur-base:    320ms;
  --dur-slow:    600ms;
  --dur-reveal:  900ms;

  /* ---------- Z ---------- */
  --z-nav:     50;
  --z-drawer:  60;
  --z-overlay: 70;

  /* ---------- Shadows ---------- */
  --shadow-card: 0 30px 60px -30px rgba(0,0,0,0.55);
}

/* Reduced motion users: collapse all motion durations */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   1ms;
    --dur-base:   1ms;
    --dur-slow:   1ms;
    --dur-reveal: 1ms;
  }
}