/* variables.css — THE single source of truth for every design token.
   CLAUDE.md §2 (typography), §3 (delivery), §16 (brand palette).

   Nothing duplicates these values. No page carries an inline <style> block and no
   stylesheet @imports this file; every page links it directly in <head>, before
   style.css, so both fetch in parallel.

   Change a token here and all pages change. Never copy a value into a page. */

:root {
  /* ══════════════════════════════════════════════════════════════════════
     BRAND PALETTE — extracted from the site logo
     static-website/wp-content/uploads/2024/05/
       cropped-cropped-cropped-Basketball-shoes-world-logo.jpeg  (213x222)

     Each value is the average of the top-decile-by-saturation pixels in its
     hue bucket, so it is the colour's saturated core rather than a JPEG-
     artefacted edge pixel. The source JPEG is heavily compressed; the many
     purple fringe tones around the black swirl are compression noise, not
     brand colours, and are deliberately excluded.

     ⚠️ CONTRAST: the three chromatic brand colours all FAIL WCAG AA as text
     on white (orange 2.50:1, blue 2.89:1, red 3.89:1 — AA needs 4.5:1).
     So each has TWO tokens: the true brand tone for fills and decoration,
     and a darkened -text variant (identical hue and saturation, reduced
     lightness) for anything carrying words. Never use a fill token for text.
     ══════════════════════════════════════════════════════════════════════ */

  /* --- true brand tones: fills, borders, decoration, never text on white --- */
  --brand-orange: #F18A16;   /* basketball upper       2.50:1 on white */
  --brand-red:    #E34F1C;   /* basketball mid/lower   3.89:1 on white */
  --brand-blue:   #0BA2E1;   /* basketball lower + swoosh  2.89:1 */
  --brand-black:  #1A1820;   /* outline swirl + wordmark  17.57:1 */

  /* --- AA-compliant text variants (>=4.5:1 on white) --- */
  --brand-orange-text: #B1630B;   /* 4.51:1 */
  --brand-red-text:    #D0491A;   /* 4.52:1 */
  --brand-blue-text:   #097EB0;   /* 4.54:1 */

  /* --- WordPress-export colours: NOT part of the logo palette ---------------
     The migrated Elementor pages carry their own colours, chosen before this
     palette existed. Where a repair must MATCH what the export already renders,
     the value is recorded here byte-exact rather than snapped to a brand token —
     substituting --brand-red (#E34F1C) would change the design, not fix it.
     Use only inside the Elementor regression-fix block in chrome.css.          */
  --elementor-hero-accent: #E85D1B;   /* homepage hero accent; 6.01:1 on #000 */

  /* --- LIGHT-FIXED tokens for the 55 migrated pages -------------------------
     Measured 2026-08-12: Elementor hard-codes those pages' background to
     rgb(247,248,249) with black body text, and it does NOT respond to
     prefers-color-scheme. A shared component styled with the flipping semantic
     tokens therefore rendered a DARK card on a permanently LIGHT page.

     These three deliberately do NOT appear in the dark block below, so they never
     flip. Use them for components that must sit on legacy Elementor pages; the 8
     new-template pages get the normal semantic tokens instead.

     ⚠️ --legacy-surface is PURE WHITE, deliberately, not the #f7f6f4 used elsewhere.
     The `-text` palette variants are calibrated to clear AA against WHITE
     specifically (§13: orange-text 4.51, blue-text 4.54 — both barely over 4.5).
     On a #f7f6f4 card those same tokens measured 4.17 and 4.21, i.e. FAILING, purely
     because the surface is a shade darker than the value they were rated against.
     A component that sits on white keeps the whole palette valid; one that does not
     silently invalidates every -text token placed on it.                        */
  --legacy-surface: #ffffff;
  --legacy-border:  #e2ded9;
  --legacy-muted:   #5b5560;

  /* --- semantic roles (use THESE in style.css, not the raw brand tokens) --- */
  --color-primary:      var(--brand-orange);      /* primary brand fill  */
  --color-primary-text: var(--brand-orange-text);
  --color-secondary:    var(--brand-blue);        /* secondary fill      */
  --color-secondary-text: var(--brand-blue-text);
  --color-accent:       var(--brand-red);         /* CTA / emphasis fill */
  --color-accent-text:  var(--brand-red-text);
  --color-dark:         var(--brand-black);

  --color-bg:         #ffffff;
  --color-surface:    #f7f6f4;
  --color-border:     #e2ded9;
  --color-text:       var(--brand-black);
  --color-text-muted: #5b5560;

  --color-link:         var(--brand-blue-text);   /* AA on white */
  --color-link-visited: #6E4E9C;
  --color-link-hover:   var(--brand-red-text);

  --color-cta-bg:       var(--brand-red-text);    /* 4.52:1 with white text */
  --color-cta-bg-hover: #A83A15;
  --color-cta-text:     #ffffff;
  --color-focus:        var(--brand-red);

  /* ---- type scale: 4px steps, H1 largest, H3 stays above body ---- */
  --h1-size: 2rem;      /* 32px */
  --h2-size: 1.5rem;    /* 24px */
  --h3-size: 1.25rem;   /* 20px */
  --h4-size: 1.125rem;  /* 18px */
  --body-size: 1rem;    /* 16px */

  /* ---- weight: steps down, floors at 600, never below body ---- */
  --h1-weight: 700;
  --h2-weight: 700;
  --h3-weight: 600;
  --h4-weight: 600;
  --body-weight: 400;

  --heading-line-height: 1.25;
  --body-line-height: 1.65;

  /* ---- fonts ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --heading-font: var(--font-sans);

  /* ---- spacing ---- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  /* ---- layout ---- */
  --measure: 68ch;
  --container: 1100px;
  --radius: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:         #14171a;
    --color-surface:    #1e2226;
    --color-border:     #333b44;
    --color-text:       #eceff2;
    --color-text-muted: #a3adb9;

    /* On #14171A the true brand tones already clear AA — orange 7.19:1,
       blue 6.23:1, red 4.63:1 — so dark mode uses the real logo colours. */
    --color-primary-text:   var(--brand-orange);
    --color-secondary-text: var(--brand-blue);
    --color-accent-text:    var(--brand-red);
    --color-dark:           #eceff2;

    --color-link:         var(--brand-blue);
    --color-link-visited: #C0A0E8;
    --color-link-hover:   var(--brand-orange);

    --color-cta-bg:       var(--brand-red);
    --color-cta-bg-hover: #F1671C;
    --color-cta-text:     #ffffff;
  }
}

/* ---------- Public Sans, self-hosted (Phase 8) ------------------------------
   Replaces a render-blocking request to fonts.googleapis.com on 55 pages.

   TWO files, not eighteen. Public Sans is a VARIABLE font: Google serves one
   file per style carrying the whole 100-900 weight axis. Measured 2026-08-12 —
   the 18 "separate" downloads hashed to exactly 2 distinct files, 9 identical
   copies each. Two files with a weight RANGE give all 18 weight x style
   combinations natively, at 55 KB instead of 496 KB, and share one cache entry
   instead of nine.

   Both files validated non-zero and wOF2-signed before any reference was
   rewritten. unicode-range is Google's own latin subset, copied verbatim.      */
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/public-sans/public-sans-variable.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/wp-content/uploads/fonts/public-sans/public-sans-variable-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
