/* ============================================================
   QUAD™ — tokens.css
   Custom properties ONLY. No selectors beyond :root.
   ============================================================ */

:root {

  /* ---------- Color ---------- */
  --chalk:  #F6F6F4;   /* primary ground — clean chalk white (no beige/tan cast) */
  --ink:    #141412;   /* type, near-black */
  --pine:   #1E3A2A;   /* varsity green — headers, footer, hover states */
  --court:  #CBCEC9;   /* cool grey — cards, dividers, secondary ground */
  --signal: #FF3B00;   /* ONLY: drop countdown, sale states, cart badge */
  --redbox: #FF0000;   /* placeholder system only — never in final UI */

  /* ---------- Type families ---------- */
  --font-display: "Zodiak", Georgia, serif;
  --font-sans:    "Archivo", Helvetica, Arial, sans-serif;
  --font-mono:    "Spline Sans Mono", "SF Mono", Menlo, monospace;

  /* ---------- Type scale ---------- */
  --text-hero:    clamp(3.5rem, 10vw, 9rem);      /* Zodiak, viewport-scale statements */
  --text-title:   clamp(2.25rem, 6vw, 4.5rem);    /* Zodiak, page/section titles */
  --text-subtitle:clamp(1.5rem, 3vw, 2.25rem);    /* Zodiak, sub-statements, PDP price */
  --text-body:    1rem;                           /* Archivo */
  --text-small:   0.8125rem;                      /* Archivo, secondary copy */
  --text-eyebrow: 0.6875rem;                      /* Archivo Expanded caps */
  --text-mono:    0.75rem;                        /* Spline Sans Mono, specs/SKUs */

  /* ---------- Type details ---------- */
  --tracking-display: -0.02em;   /* tight serif */
  --tracking-eyebrow:  0.08em;   /* expanded caps */
  --leading-display:   0.95;
  --leading-body:      1.55;
  --stretch-expanded:  125%;     /* Archivo Expanded via variable wdth axis */

  /* ---------- Space ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6.5rem;
  --space-8: 10rem;
  --gutter:  clamp(1rem, 4vw, 2.5rem);   /* page side padding */

  /* ---------- Layout ---------- */
  --max-width: 100rem;
  --nav-height: 4rem;

  /* ---------- Motion ---------- */
  --dur-fast:   0.3s;
  --dur-reveal: 0.9s;                          /* clip-reveal grammar */
  --ease-out:   cubic-bezier(0.215, 0.61, 0.355, 1);  /* ≈ power3.out */
  --stagger:    0.08s;

  /* ---------- Z ---------- */
  --z-nav:        100;
  --z-cart:       200;
  --z-transition: 300;
}