/* ============================================================================
   OUT RUN YOUR FORK - design tokens
   Contract: ~/Work/SPF Sites/site-system/tokens.css   (names are fixed)
   Enforced by:  node site-system/lint-tokens.mjs OutRunYourFork/site

   Every layout + type decision on this site lives here. Component CSS reads
   these and never hardcodes a value. Edit these to retune the whole site.

   Breakpoints - these three, no others:
     desktop  base
     tablet   max-width: 1024px
     mobile   max-width: 640px

   Values were migrated FAITHFULLY from the hand-tuned CSS on 2026-08-20 - the
   fluid clamp() values were evaluated at 1440 / 900 / 390 and frozen as literals,
   so the site renders as before at those widths but is now editable per device.

   NOTE ON DRIFT: the migration surfaced four different h3 sizes (1.16 / 1.2 /
   1.25 / 1.35rem) and three h2 sizes. They are preserved as separate tokens
   rather than silently snapped together - migration should not smuggle in a
   redesign. If you want them unified, set them equal in the editor; that is now
   a one-box change instead of a hunt through 890 lines.
   ============================================================================ */

:root {
  /* ---- page shell ---- */
  --container-max: 1240px;
  --gutter: 72px;

  /* ---- section rhythm ---- */
  --sec-pad-y: 120px;
  --sec-pad-y-lg: 140px;       /* #injury - the deep band */
  --hero-pad-b: 130px;
  --proof-pad-b: 90px;
  --wfh-pad-t: 96px;
  --wfh-pad-b: 72px;
  --rating-gap: 46px;
  --rating-mb: 54px;
  --tcards-mb: 60px;
  --sec-head-gap: 56px;        /* .sec-head -> content */
  --sec-head-h2-gap: 14px;     /* eyebrow -> h2 */
  --sec-head-lede-gap: 16px;   /* h2 -> lede */

  /* ---- grids ---- */
  --grid-gap: 22px;            /* programs */
  --grid-gap-lg: 48px;         /* why: 2-col */
  --grid-gap-sm: 20px;         /* injury, review wall */
  --grid-gap-xs: 18px;         /* transformation cards */
  --hero-gap: 72px;

  /* ---- cards ---- */
  --card-pad: 24px;            /* .inj */
  --card-pad-y: 30px;          /* .prog */
  --card-pad-x: 26px;
  --card-gap: 12px;
  --card-pad-panel: 36px;      /* .eq-panel */
  --review-pad: 22px;
  --tcard-pad-y: 24px;
  --tcard-pad-x: 22px;

  /* ---- buttons ---- */
  --btn-pad-y: 14px;
  --btn-pad-x: 26px;
  --btn-gap: 10px;
  --btn-lg-pad-y: 18px;
  --btn-lg-pad-x: 34px;
  --btn-nav-pad-y: 11px;
  --btn-nav-pad-x: 20px;

  /* ======================= TYPE - core roles ======================= */
  --t-h1-size: 4.6rem;     --t-h1-weight: 700; --t-h1-leading: 1.04; --t-h1-tracking: -0.01em; --t-h1-case: uppercase;
  --t-h2-size: 3.2rem;     --t-h2-weight: 700; --t-h2-leading: 1.04; --t-h2-tracking: -0.01em; --t-h2-case: uppercase;
  --t-h3-size: 1.2rem;     --t-h3-weight: 500; --t-h3-leading: 1.04; --t-h3-tracking: 0.06em;  --t-h3-case: uppercase;
  --t-h4-size: 0.8rem;     --t-h4-weight: 700; --t-h4-leading: 1.6;  --t-h4-tracking: 0.12em;  --t-h4-case: uppercase;
  --t-body-size: 1rem;     --t-body-weight: 400; --t-body-leading: 1.6; --t-body-tracking: 0;  --t-body-case: none;
  --t-lede-size: 1.05rem;  --t-lede-weight: 400; --t-lede-leading: 1.6; --t-lede-tracking: 0;  --t-lede-case: none;
  --t-small-size: 0.78rem; --t-small-weight: 400; --t-small-leading: 1.5; --t-small-tracking: 0.05em; --t-small-case: none;
  --t-eyebrow-size: 0.85rem; --t-eyebrow-weight: 600; --t-eyebrow-leading: 1.6; --t-eyebrow-tracking: 0.14em; --t-eyebrow-case: uppercase;
  --t-label-size: 0.62rem; --t-label-weight: 700; --t-label-leading: 1.2; --t-label-tracking: 0.12em; --t-label-case: uppercase;
  --t-nav-size: 0.92rem;   --t-nav-weight: 600; --t-nav-leading: 1.2;  --t-nav-tracking: 0.04em; --t-nav-case: uppercase;
  --t-btn-size: 1rem;      --t-btn-weight: 700; --t-btn-leading: 1.2;  --t-btn-tracking: 0.05em; --t-btn-case: uppercase;
  --t-quote-size: 1.06rem; --t-quote-weight: 500; --t-quote-leading: 1.45; --t-quote-tracking: 0; --t-quote-case: none;
  --t-stat-size: 2.4rem;   --t-stat-weight: 800; --t-stat-leading: 1;   --t-stat-tracking: 0;    --t-stat-case: none;

  /* ======================= TYPE - site variants =======================
     Distinct sizes this site genuinely uses. Kept separate so migration is
     faithful; unify them here if you want a tighter scale. */
  --t-h2-cta-size: 3.8rem;      /* #talk  - final CTA */
  --t-h2-strip-size: 2.3rem;    /* #wfh   - orange strip */
  --t-h3-prog-size: 1.16rem;    /* .prog */
  --t-h3-plus-size: 1.25rem;    /* .prog-plus */
  --t-h3-step-size: 1.35rem;    /* .step */
  --t-h3-step-weight: 700;
  --t-score-size: 7.5rem;       /* .rating-hero .score */
  --t-score-leading: 0.9;
  --t-tcard-size: 2.3rem;       /* .tcard .big */
  --t-marquee-size: 1.5rem;
  --t-marquee-tracking: 0.06em;
  --t-hero-sub-size: 1.13rem;
  --t-truth-size: 1.5rem;       /* .why-copy .truth */
  --t-badge-num-size: 1.35rem;
  --t-cta-big-size: 1.2rem;     /* #talk p.big */
  --t-stars-big-size: 1.9rem;
}

/* ============================== TABLET ============================== */
@media (max-width: 1024px) {
  :root {
    --gutter: 45px;
    --sec-pad-y: 81px;
    --sec-pad-y-lg: 99px;
    --hero-pad-b: 90px;
    --proof-pad-b: 63px;
    --wfh-pad-t: 72px;
    --wfh-pad-b: 54px;
    --rating-gap: 36px;
    --rating-mb: 45px;
    --tcards-mb: 54px;
    --sec-head-gap: 45px;
    --grid-gap-lg: 36px;
    --hero-gap: 45px;
    --card-pad-panel: 27px;

    --t-h1-size: 3.49rem;
    --t-h2-size: 2.59rem;
    --t-stat-size: 1.91rem;

    --t-h2-cta-size: 3.15rem;
    --t-h2-strip-size: 1.91rem;
    --t-score-size: 5.62rem;
    --t-tcard-size: 1.8rem;
    --t-marquee-size: 1.35rem;
    --t-hero-sub-size: 1rem;
    --t-truth-size: 1.35rem;
    --t-cta-big-size: 1.12rem;
    --t-stars-big-size: 1.69rem;
  }
}

/* ============================== MOBILE ============================== */
@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --sec-pad-y: 64px;
    --sec-pad-y-lg: 80px;
    --hero-pad-b: 70px;
    --proof-pad-b: 56px;
    --wfh-pad-t: 56px;
    --wfh-pad-b: 40px;
    --rating-gap: 20px;
    --rating-mb: 36px;
    --tcards-mb: 40px;
    --sec-head-gap: 34px;
    --grid-gap-lg: 24px;
    --hero-gap: 28px;
    --card-pad-panel: 22px;

    --t-h1-size: 2.5rem;
    --t-h2-size: 1.9rem;
    --t-eyebrow-size: 0.72rem;
    --t-stat-size: 1.6rem;

    --t-h2-cta-size: 2.1rem;
    --t-h2-strip-size: 1.5rem;
    --t-score-size: 4.4rem;
    --t-tcard-size: 1.7rem;
    --t-marquee-size: 1.05rem;
    --t-hero-sub-size: 1rem;
    --t-truth-size: 1.2rem;
    --t-cta-big-size: 1rem;
    --t-stars-big-size: 1.3rem;
  }
}