/* ============================================================================
   SPF TOKEN CONTRACT  v1  (2026-08-20) — JBo Fitness thank-you page values (2026-09-20)
   ----------------------------------------------------------------------------
   The complete set of layout + type values for a site. Every site gets a copy of
   this file with its own values filled in; the NAMES never change. That is what
   makes one editor UI work across every site, and what lets us agree the design
   system before a line of markup exists.

   RULES
   1. Component CSS may not contain a raw font-size, font-weight, line-height,
      letter-spacing, text-transform, padding, margin, gap or border-radius.
      It reads a token. `lint-tokens.mjs` fails the build otherwise.
   2. If a value is genuinely new, add a token here first.
   3. Brand tokens (colour, font-family, easing) stay in the site's own stylesheet.
      This file deliberately does NOT own colour - colour already works fine and
      renaming it is churn. This file owns the layer that is missing: space + type.
   4. Three breakpoints. No others:
        laptop   max-width: 1024px
        tablet   max-width:  820px
        mobile   max-width:  640px
      Tokens need only define values where they actually change (ORF uses 1024 and
      640). LAYOUT needs the middle tier: proved on Edge 2026-08-20, where dropping
      to just 1024/640 broke two-column blocks either way - stacking at 1024 blew a
      coach photo full-width on iPad landscape, and not stacking until 640 squeezed
      the text to a ~170px column at 700px. 820 is where those blocks want to break.
   5. No clamp() in a token. A token is one literal value per breakpoint - that is
      the entire point of an input box. Fluid type is set once by a designer and
      then cannot be edited meaningfully at the width you are looking at.

   TYPE ROLES
   Each role carries five properties: size / weight / leading / tracking / case.
   Use the role that matches MEANING, not appearance - `.stat` is a stat whether
   or not it happens to look like an h2 today.
   ============================================================================ */

:root {
  /* ---- space scale -------------------------------------------------------
     Geometric-ish ramp. Everything spatial resolves to one of these or to a
     named token below that is itself built from them. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- page shell -------------------------------------------------------- */
  --container-max: 640px;   /* max content width */
  --gutter: 40px;            /* page left/right padding */
  --nav-h: 76px;             /* fixed header height */

  /* ---- section rhythm ---------------------------------------------------- */
  --sec-pad-y: 40px;         /* vertical padding inside a section */
  --sec-pad-x: var(--gutter);
  --sec-gap: 30px;           /* between stacked blocks inside a section */
  --sec-head-gap: 20px;      /* eyebrow -> heading -> lede */

  /* ---- grids ------------------------------------------------------------- */
  --grid-gap: 28px;
  --grid-gap-tight: 16px;

  /* ---- cards ------------------------------------------------------------- */
  --card-pad: 24px;
  --card-gap: 8px;          /* between elements inside a card */
  --card-radius: 12px;
  --card-border: 1px;

  /* ---- buttons ----------------------------------------------------------- */
  --btn-pad-y: 16px;
  --btn-pad-x: 24px;
  --btn-radius: 999px;
  --btn-gap: 12px;           /* icon -> label */

  /* ---- fields ------------------------------------------------------------ */
  --field-pad-y: 12px;
  --field-pad-x: 14px;
  --field-radius: 0px;

  /* ======================================================================
     TYPE
     size / weight / leading / tracking / case for every role.
     ====================================================================== */

  /* h1 - one per page, the hero statement */
  --t-h1-size: 3.6rem;
  --t-h1-weight: 800;
  --t-h1-leading: 1.1;
  --t-h1-tracking: 0;
  --t-h1-case: none;

  /* h2 - section headings */
  --t-h2-size: 3.2rem;
  --t-h2-weight: 700;
  --t-h2-leading: 1.04;
  --t-h2-tracking: -0.01em;
  --t-h2-case: uppercase;

  /* h3 - card and sub-section headings */
  --t-h3-size: 0.8rem;
  --t-h3-weight: 700;
  --t-h3-leading: 1.2;
  --t-h3-tracking: 0.1em;
  --t-h3-case: uppercase;

  /* h4 - smallest structural heading */
  --t-h4-size: 0.8rem;
  --t-h4-weight: 700;
  --t-h4-leading: 1.3;
  --t-h4-tracking: 0.12em;
  --t-h4-case: uppercase;

  /* body - default running text */
  --t-body-size: 1rem;
  --t-body-weight: 400;
  --t-body-leading: 1.5;
  --t-body-tracking: 0;
  --t-body-case: none;

  /* lede - the larger intro paragraph under a heading */
  --t-lede-size: 1.2rem;
  --t-lede-weight: 400;
  --t-lede-leading: 1.5;
  --t-lede-tracking: 0;
  --t-lede-case: none;

  /* small - captions, footnotes, disclaimers */
  --t-small-size: 0.8rem;
  --t-small-weight: 400;
  --t-small-leading: 1.5;
  --t-small-tracking: 0;
  --t-small-case: none;

  /* eyebrow - the kicker above a heading */
  --t-eyebrow-size: 0.85rem;
  --t-eyebrow-weight: 600;
  --t-eyebrow-leading: 1.2;
  --t-eyebrow-tracking: 0.14em;
  --t-eyebrow-case: uppercase;

  /* label - chips, tags, flags, mono UI labels */
  --t-label-size: 0.62rem;
  --t-label-weight: 700;
  --t-label-leading: 1.2;
  --t-label-tracking: 0.12em;
  --t-label-case: uppercase;

  /* nav - header navigation links */
  --t-nav-size: 0.92rem;
  --t-nav-weight: 600;
  --t-nav-leading: 1.2;
  --t-nav-tracking: 0.04em;
  --t-nav-case: uppercase;

  /* btn - button label */
  --t-btn-size: 1rem;
  --t-btn-weight: 700;
  --t-btn-leading: 1.2;
  --t-btn-tracking: 0;
  --t-btn-case: none;

  /* quote - pull quotes and testimonials */
  --t-quote-size: 1.06rem;
  --t-quote-weight: 500;
  --t-quote-leading: 1.45;
  --t-quote-tracking: 0;
  --t-quote-case: none;

  /* stat - big numbers */
  --t-stat-size: 2.4rem;
  --t-stat-weight: 800;
  --t-stat-leading: 1;
  --t-stat-tracking: 0;
  --t-stat-case: none;
}

/* ============================================================================
   TABLET
   ============================================================================ */
@media (max-width: 1024px) {
  :root {
    --gutter: 30px;
    --sec-pad-y: 30px;
    --sec-gap: 36px;
    --grid-gap: 20px;
    --card-pad: 20px;

    --t-h1-size: 2.8rem;
    --t-h2-size: 2.4rem;
    --t-h3-size: 1.14rem;
    --t-lede-size: 1.1rem;
    --t-quote-size: 1rem;
    --t-stat-size: 2rem;
  }
}

/* ============================================================================
   MOBILE
   ============================================================================ */
@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --sec-pad-y: 20px;
    --sec-gap: 24px;
    --grid-gap: 16px;
    --card-pad: 16px;
    --btn-pad-y: 14px;
    --btn-pad-x: 20px;

    --t-h1-size: 2.2rem;
    --t-h2-size: 1.9rem;
    --t-h3-size: 1.08rem;
    --t-h4-size: 0.74rem;
    --t-lede-size: 1rem;
    --t-eyebrow-size: 0.72rem;
    --t-quote-size: 0.96rem;
    --t-stat-size: 1.6rem;
  }
}