/* ============================================================
   CLANVAS THEME — DESIGN TOKENS (engineering-level, not customizable)
   Brand-level tokens (colors, surface palette, font pairing, radius,
   type/tracking/leading scale) are NOT here: they are customization.xml
   options, printed as a :root{} block by include/head.tplp via
   {{ options.type.Name }}. This file only holds the fixed scales/values
   every declination shares.

   No @font-face here: the theme ships no font files. Display faces are
   free Google Fonts loaded in include/head.tplp; a club-licensed face
   (e.g. Counterpress) needs its own provisioning flow and, until then,
   exists only as a dev-only injection in the preview harness — see
   docs/production-mounting-contract.md and preview/fixtures/team_profiles.php.
   ============================================================ */

:root {
  /* Font weight — fixed semantic steps, not a customization.xml option: no
     single "global weight preference" makes sense the way scale/tracking/
     leading do (see docs/twig-design-system-requirements.md, 2026-07-07 audit). */
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  /* Global scale MULTIPLIERS — designer-level fine-tuning, deliberately NOT
     Customize-panel options (a free-text "1" is cryptic and easy for a club to
     break). Nudge every title size / tracking / leading at once from here. The
     per-font optical correction (--type-scale-brand) is set per FontPairing in
     include/head.tplp, not here. Moved out of the panel 2026-07-12 (decisions.md). */
  --type-scale: 1;
  --tracking-scale: 1;
  --leading-scale: 1;

  /* Letter-spacing scale — steps are fixed; --tracking-scale (the multiplier
     above) is now a fixed code value, no longer a Customize option. */
  --tracking-tight: 0.03em;
  --tracking-wide: 0.12em;
  --tracking-wider: 0.18em;
  --tracking-widest: 0.26em;

  /* Line-height scale — steps are fixed; --leading-scale (above) is a fixed code value. */
  --leading-tight: 0.92;
  --leading-snug: 1.1;
  --leading-normal: 1.3;
  --leading-relaxed: 1.55;

  /* Type scale (fixed sizes; --type-scale above is a fixed code value,
     --type-scale-brand is set per-font in include/head.tplp).
     Named by use case (title/body/caption), not by T-shirt size, so a new
     rule can pick the right step without checking main.css for precedent.
     --text-3xs added 2026-07-08 to absorb the many ~8-10px badge/eyebrow
     literals found across components (see docs/decisions.md).
     Only the title cluster (--text-title-sm/md/lg/xl, --text-display) steps
     down at the two @media blocks right after this one — a fixed value per
     breakpoint, not clamp(), per direct request 2026-07-08. --text-3xs
     through --text-subtitle are a single value at every breakpoint, on
     purpose (2026-07-08): they used to also shrink on mobile/tablet, but
     that made --text-caption and --text-body pixel-identical below 1024px
     (11/12px each) despite having different roles — direct correction,
     keep them at their desktop size everywhere instead. */
  --text-3xs: 0.5625rem;        /* smallest badge/eyebrow lower bound */
  --text-caption: 0.75rem;      /* smallest labeled text: captions, meta, legal, copyright */
  --text-eyebrow: 0.8125rem;    /* uppercase kicker/eyebrow — a touch above caption for legibility (design-system.md §4.1) */
  --text-body: 0.9375rem;       /* paragraph copy, default */
  --text-body-lg: 1rem;         /* paragraph copy, larger variant */
  --text-subtitle: 1.0625rem;   /* subtitle / caption-title, lower bound */
  --text-title-sm: 1.35rem;     /* small section title — desktop tier */
  --text-title-md: 1.55rem;     /* section title, lower bound — desktop tier */
  --text-title-lg: 2.2rem;      /* section title, upper bound — desktop tier */
  --text-title-xl: 2.75rem;     /* large title — desktop tier */
  --text-display: 4.4rem;       /* hero headline — desktop tier */

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout — single source for the horizontal inset every homepage section uses
     on MOBILE (<640px). Desktop insets stay intentionally varied per section
     (content 40px, chrome 44px, footer 64px — see design-system.md §8); this
     token only governs the mobile container, so every section starts at the same
     x and can't drift. Change it here to move all mobile section gutters at once. */
  --section-pad-x-mobile: var(--space-4);   /* 16px */

  /* Light surfaces / editorial (page-2/paper are derived from PageBackground
     by head.tplp's inline block; card/surface-light/placeholder are fixed) */
  --card: #ffffff;
  --surface-light: #f5f5f5;
  --placeholder: #e0e0e0;

  /* Homepage sponsor STRIP treatment: logos show as a flat monochrome silhouette
     at rest, real colours on hover. On a light --card the silhouette is black
     (brightness(0)); dark mode (options.select.ColorMode, head.tplp) overrides it
     to brightness(0) invert(1) so it becomes white and stays legible on the dark
     card. A token, not a literal, because a filter can't be a colour override. */
  --sponsor-logo-filter: brightness(0);
  /* /sponsors DIRECTORY plate: the partner grid shows each logo in its ORIGINAL
     colours, so its tile needs a fixed light background that does NOT follow the
     theme — otherwise a dark logo (e.g. Puma) vanishes on the dark --card in dark
     mode. Kept white in both themes (not overridden in head.tplp's dark block). */
  --sponsor-plate: #ffffff;

  /* Text / neutrals */
  --ink: #0a0a14;
  --muted: #6b675f;
  --muted-2: #9a958c;
  --muted-4: #5a575a;
  --sand: #cfc9c0;
  --sand-2: #b0aca4;
  --sand-3: #d8d4cc;

  /* Borders */
  --hair: rgba(0,0,0,0.08);
  --line: rgba(255,255,255,0.10);

  /* Standings "your team" row highlight. Primary-derived by default — fine for a
     saturated brand colour on the light row. Dark mode (include/head.tplp) swaps
     both to values that survive the dark row: a neutral light veil for the fill
     and --primary-ink for the text, because a near-black --primary (e.g. the demo
     brand) is invisible on the dark surface. Tokenised, not hardcoded, so the one
     override in head.tplp reaches every is-me cell. */
  --standings-me-bg: color-mix(in srgb, var(--primary,#E30514) 8%, transparent);
  --standings-me-ink: var(--primary,#E30514);

  /* Semantic */
  --win: #1a7f43;
  --win-bright: #37c46b;
  --danger: #ff5a5a;
  --danger-2: #ff8080;
  --warn: #e0a030;

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.55);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.7);
  --shadow-nav: 0 16px 40px rgba(0,0,0,0.12);
  --shadow-nav-stuck: 0 6px 22px rgba(0,0,0,0.16); /* crisper shadow for the pinned (scrolled) header */
  --shadow-dropdown: 0 24px 60px rgba(0,0,0,0.18);

  /* Interaction — opacity a control dims to while pressed (shared :active
     feedback for every actionable control; see main.css "Interactive states"). */
  --press-opacity: 0.6;

  /* ============================================================
     Motion — the theme's shared timing/easing vocabulary. Single source
     for every transition value in main.css; js/animations.js mirrors this
     same scale (its EASE/DUR maps) so the GSAP layer and the CSS fallback
     speak one language. Durations are named by role, not by number, so a
     whole tier retimes in one place. Added 2026-07-10 — see
     docs/decisions.md (motion vocabulary centralization). Rule of thumb:
     micro colour/opacity fades keep the native `ease`; anything that MOVES
     (transform, size, a carousel track) uses an --ease-* curve below. */
  --dur-micro: 0.15s;    /* colour/border/opacity/filter fades, caret + chevron flips */
  --dur-short: 0.2s;     /* small panel/dropdown enter, page-dot indicators, card image hover-zoom
                            (the plain-CSS fallback only — the GSAP-enhanced hover has its own
                            bespoke timing, js/animations.js HOVER, deliberately not on this scale) */
  --dur-medium: 0.4s;    /* header condense (bar height, logo size) */
  --dur-carousel: 0.5s;  /* carousel track slide (sponsor + hero CSS fallback) */
  --dur-shimmer: 1.6s;   /* media-loading shimmer sweep — a continuous ambient loop, not a
                            state transition, so it has NO js/animations.js DUR/EASE mirror
                            (see design-system.md §13.1 "shimmer" row + docs/decisions.md). */
  --ease-enter: cubic-bezier(.16,.84,.44,1);  /* decelerate — settling into place */
  --ease-exit: cubic-bezier(.4,0,1,1);        /* accelerate — leaving */
  --ease-move: cubic-bezier(.4,0,.2,1);       /* travel + settle — covers a distance */

  /* Card image hover-zoom magnitude. TWO tiers, per the GSAP-enhanced/CSS-
     fallback split above main.css's [data-media-hover] block:
       --hover-zoom (1.04) — the plain-CSS fallback (GSAP absent or reduced
       motion), a single short scale, no JS involved;
       --hover-zoom-enhanced (1.06) — what js/animations.js initMediaHover's
       HOVER.zoom mirrors when GSAP IS driving. Not enforced by CSS (GSAP sets
       the inline transform directly), kept here purely so a design-token pass
       finds the number next to its sibling instead of spelunking JS.
     Both are PERCENTAGES, so they cost far more pixels on the big surfaces
     than on a thumb (a 240px news thumb grows ~10-14px, the 518px video hero
     tile ~21-31px) — sanity-check the video hero and the wide photo tiles, not
     just the news rail, before pushing either further. Shared so every media
     card — news/search/roster/video/album/photo — hovers identically.
     History: a two-beat GSAP gesture (crisp zoom, dead hold, bigger
     overshooting zoom) until it read as laggy; cut to plain CSS; then GSAP
     came back for ONE continuous glide once "premium" was the ask instead of
     "simple". See decisions.md 2026-07-15 and 2026-07-20. */
  --hover-zoom: 1.04;
  --hover-zoom-enhanced: 1.06;
}

/* Title-cluster breakpoint tiers (see the type scale comment above) — same
   two breakpoints every section already uses. Order matters: the <=639px
   block must come after the <=1023px one so its value wins at narrow
   widths where both media queries match (same selector, same specificity,
   last rule wins). Desktop tier lives in :root above and is unchanged from
   this scale's original fixed values. */
@media (max-width:1023px){
  :root{
    --text-title-sm: 1.125rem;
    --text-title-md: 1.25rem;
    --text-title-lg: 1.75rem;
    --text-title-xl: 2.2rem;
    --text-display: 3.5rem;
  }
}
@media (max-width:639px){
  :root{
    --text-title-sm: 0.9375rem;
    --text-title-md: 1.0625rem;
    --text-title-lg: 1.55rem;
    --text-title-xl: 1.55rem;
    --text-display: 2.6rem;
  }
}

/* Bootstrap 5.3.8 bridge — see docs/twig-design-system-requirements.md
   ("Bootstrap 5.3.8" section) for why only these vars are wired, and why
   Bootstrap's filled color utilities (.btn-primary, .badge, ...) are never
   used for brand color. */
:root {
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius);
  --bs-border-radius-lg: var(--radius-card);
  --bs-border-radius-xl: var(--radius-card);
  --bs-border-radius-xxl: var(--radius-card);
  --bs-border-color: var(--hair);
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--page);
  --bs-link-color: var(--primary-ink);
  --bs-link-hover-color: var(--primary-ink);
  --bs-box-shadow: var(--shadow-md);
  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow-lg: var(--shadow-lg);
}