/* ============================================================
   Vates Design System — tokens + identity font
   Single source of truth, linked by index.html and every aux page.
   Adapted from the Claude Design handoff (2026-06-11). The one change
   from the handoff: Saira is SELF-HOSTED (woff2 below), NOT loaded from
   the Google Fonts CDN. This preserves our privacy posture — the site
   makes zero third-party requests, so the cookie/privacy texts can keep
   saying "no third-party scripts are loaded" and no visitor IP is sent
   to Google (GDPR-relevant for a France-established operator).
   ============================================================ */

/* ---- Identity font: Saira, self-hosted variable woff2 (weights 400–800) ---- */
@font-face {
  font-family: "Saira";
  font-style: normal;
  font-weight: 400 800;          /* variable axis range */
  font-display: swap;
  src: url("fonts/saira-latin.woff2") format("woff2");
}

:root {
  /* ============ Colours ============ */
  --vt-bg:        #0b0d12;
  --vt-panel:     #14171f;
  --vt-panel-2:   #1b1f2a;
  --vt-line:      #272c39;
  --vt-track:     #252b39;
  --vt-field:     #0f131b;

  --vt-text:      #eef1f6;
  --vt-text-2:    #dfe4ec;
  --vt-muted:     #98a0af;
  --vt-faint:     #6b7384;

  --vt-accent:        #f0883e;
  --vt-accent-ink:    #1a1208;
  --vt-accent-soft:   rgba(240,136,62,.14);
  --vt-accent-line:   rgba(240,136,62,.16);
  /* projection-value colour: a bright neutral, NOT orange and NOT team-tinted — the
     projection numerals are the content, they shouldn't fight the accent (operator
     2026-07-02: "remove the orange tones for the projections"). */
  --vt-proj:          #f2f5fb;
  /* logo tint: near-white by default; applyAccent() overrides it with the favorite
     team's colour so the topbar monogram personalises. */
  --vt-logo:          #eef1f6;

  --vt-blue:        #4c8bf5;
  --vt-blue-soft:   rgba(76,139,245,.10);
  --vt-blue-line:   #2a3a5c;

  --vt-ok:        #3fb950;
  --vt-bad:       #f85149;
  --vt-warn:      #f0c08a;
  --vt-bad-line:  #5b2a2a;

  --vt-shadow:        0 6px 24px rgba(0,0,0,.35);
  --vt-shadow-pop:    0 24px 60px rgba(0,0,0,.5);
  --vt-shadow-menu:   0 18px 50px rgba(0,0,0,.5);
  --vt-glow-accent:   0 0 14px var(--vt-accent);

  /* Three-layer backdrop. Layer 1 is a barely-there half-court blueprint (inline SVG,
     no request) — the sport identity watermark behind every page. Layers 2-3 are the
     ambience glows, overridden at runtime by applyAccent() (assets/teams-data.js) so a
     favorite team tints the whole page: glow-1 = top-right base tint, glow-2 = faint
     bottom-left counter-glow. NOTE: body rules (app.css / pages.css) carry matching
     3-value background-position/size/repeat lists — keep the layer count in sync. */
  --vt-glow-1:     #1a2030;
  --vt-glow-2:     rgba(76,139,245,.05);
  --vt-court:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 760' fill='none' stroke='%23ffffff' stroke-opacity='.032' stroke-width='2'%3E%3Ccircle cx='600' cy='380' r='150'/%3E%3Ccircle cx='600' cy='380' r='55'/%3E%3Cpath d='M0 380H1200'/%3E%3Crect x='470' y='0' width='260' height='190'/%3E%3Ccircle cx='600' cy='190' r='80'/%3E%3Cpath d='M210 0A540 540 0 0 0 990 0'/%3E%3Crect x='470' y='570' width='260' height='190'/%3E%3Ccircle cx='600' cy='570' r='80'/%3E%3Cpath d='M210 760A540 540 0 0 1 990 760'/%3E%3C/svg%3E");
  /* the court blueprint is NOT part of this list — it lives on body::before (below),
     so the body background stays a plain gradient pair with no fragile per-layer
     position/size lists (a 3-layer body background mis-rendered for the operator) */
  --vt-backdrop:   radial-gradient(1100px 520px at 12% 112%, var(--vt-glow-2) 0, rgba(0,0,0,0) 55%),
                   radial-gradient(1200px 600px at 80% -200px, var(--vt-glow-1) 0, var(--vt-bg) 60%);
  --vt-panel-grad: linear-gradient(180deg, var(--vt-panel-2), var(--vt-panel));

  --focus-ring:    0 0 0 3px rgba(76,139,245,.14);

  /* ============ Typography ============ */
  --vt-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --vt-font-display: "Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --vt-font-num: var(--vt-font-display);
  --vt-tracking-wordmark: 0.06em;

  --vt-fs-display: 35px;
  --vt-fs-h1:      26px;
  --vt-fs-h2:      23px;
  --vt-fs-h3:      19px;
  --vt-fs-stat:    21px;
  --vt-fs-lead:    16px;
  --vt-fs-body:    15px;
  --vt-fs-sm:      14px;
  --vt-fs-13:      13px;
  --vt-fs-12:      12px;
  --vt-fs-label:   11px;
  --vt-fs-micro:   10px;

  --vt-fw-regular: 400;
  --vt-fw-medium:  500;
  --vt-fw-semi:    600;
  --vt-fw-bold:    700;
  --vt-fw-heavy:   800;

  --vt-lh-tight:  1.05;
  --vt-lh-snug:   1.25;
  --vt-lh-body:   1.5;
  --vt-lh-prose:  1.6;

  --vt-tracking-display: -0.02em;
  --vt-tracking-tight:   -0.01em;
  --vt-tracking-label:    0.06em;
  --vt-tracking-chip:     0.03em;

  /* ============ Spacing / radii / borders / motion ============ */
  --vt-space-1: 4px;  --vt-space-2: 6px;  --vt-space-3: 8px;  --vt-space-4: 11px;
  --vt-space-5: 14px; --vt-space-6: 16px; --vt-space-7: 20px; --vt-space-8: 24px;
  --vt-space-9: 28px; --vt-space-10: 40px;

  --vt-radius-xs:   6px;
  --vt-radius-sm:   9px;
  --vt-radius-md:   10px;
  --vt-radius-lg:   12px;
  --vt-radius-xl:   14px;
  --vt-radius-2xl:  16px;
  --vt-radius-3xl:  20px;
  --vt-radius-pill: 20px;
  --vt-radius-full: 999px;

  --vt-border:        1px solid var(--vt-line);
  --vt-border-accent: 1px solid var(--vt-accent);

  --vt-ease-pop:    cubic-bezier(.2,.9,.3,1.2);
  --vt-ease-slide:  cubic-bezier(.22,.75,.25,1);
  --vt-dur-fast:    .12s;
  --vt-dur:         .15s;
  --vt-dur-slow:    .3s;
  --vt-dur-boot:    .5s;

  --vt-hover-rule:  inset 2px 0 0 var(--vt-accent);
  --vt-hover-ring:  inset 0 0 0 1px var(--vt-accent);
  --vt-press:       translateY(1px) scale(.985);

  --vt-header-h:    64px;
  --vt-maxw-app:    1140px;
  --vt-maxw-doc:    860px;
  --vt-maxw-form:   460px;

  /* ============ Team colours (BR 3-letter codes) ============ */
  --team-atl: #E03A3E;  --team-bos: #10823F;  --team-brk: #0A0A0A;  --team-cho: #00868D;
  --team-chi: #CE1141;  --team-cle: #860038;  --team-dal: #0053BC;  --team-den: #0E2240;
  --team-det: #C8102E;  --team-gsw: #1D428A;  --team-hou: #CE1141;  --team-ind: #FDBB30;
  --team-lac: #C8102E;  --team-lal: #552583;  --team-mem: #5D76A9;  --team-mia: #98002E;
  --team-mil: #00471B;  --team-min: #236192;  --team-nop: #0C2340;  --team-nyk: #F58426;
  --team-okc: #007AC1;  --team-orl: #0077C0;  --team-phi: #1D428A;  --team-pho: #E56020;
  --team-por: #E03A3E;  --team-sac: #5A2D81;  --team-sas: #8A8D8F;  --team-tor: #CE1141;
  --team-uta: #3E2680;  --team-was: #002B5C;  --team-none: #5b6472;
}

/* ============ Global finish (shared by every page that links tokens.css) ============ */
/* Half-court blueprint watermark: its own fixed overlay (NOT a body background layer),
   pinned top-right behind all content on every page that links this file. */
body::before {
  content: ""; position: fixed; top: -90px; right: -160px; z-index: -1; pointer-events: none;
  width: 1150px; height: 728px;
  background: var(--vt-court) no-repeat center / contain;
}
/* the fixed 1150x728 box is much WIDER than a phone viewport, so on mobile only a random
   off-centre sliver of the court lines showed instead of the intended shape (operator
   2026-07-04: "cropped to the left side"). Scale the box down (same aspect ratio) so the whole
   silhouette is visible, still pinned top-right per the desktop design intent. */
@media(max-width:700px){
  body::before{width:620px;height:392px;top:-40px;right:-90px}
}
@media(max-width:420px){
  body::before{width:480px;height:304px;top:-30px;right:-70px}
}
/* Jersey-style halftone (operator 2026-07-03: moved here from the summary-card headers, "to see
   something") — same recipe as the shipped "H" header treatment (a fine dot mesh, visible only
   inside a few soft overlapping blobs), just scaled up to viewport size and much fainter since it
   now sits behind EVERY page element, not one 36px header bar. position:fixed (like body::before
   above) always establishes its own stacking context regardless of z-index, so this can't repeat
   the earlier ::before/z-index bug where an absolutely-positioned pseudo without a stacking parent
   rendered invisibly behind other content. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--vt-accent) 62%, transparent) 1px, transparent 2px);
  background-size: 6px 6px;
  -webkit-mask-image: radial-gradient(260px 160px at 12% 15%, #fff 0%, transparent 78%),
    radial-gradient(230px 180px at 60% 55%, #fff 0%, transparent 78%),
    radial-gradient(220px 150px at 88% 20%, #fff 0%, transparent 78%),
    radial-gradient(210px 170px at 30% 85%, #fff 0%, transparent 78%),
    radial-gradient(200px 140px at 85% 78%, #fff 0%, transparent 78%);
  mask-image: radial-gradient(260px 160px at 12% 15%, #fff 0%, transparent 78%),
    radial-gradient(230px 180px at 60% 55%, #fff 0%, transparent 78%),
    radial-gradient(220px 150px at 88% 20%, #fff 0%, transparent 78%),
    radial-gradient(210px 170px at 30% 85%, #fff 0%, transparent 78%),
    radial-gradient(200px 140px at 85% 78%, #fff 0%, transparent 78%);
}
/* Text selection follows the accent (and therefore the favorite-team reskin). */
::selection { background: var(--vt-accent); color: var(--vt-accent-ink); }
/* Slim, panel-toned scrollbars instead of the default chrome-grey ones. */
* { scrollbar-width: thin; scrollbar-color: var(--vt-line) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--vt-line); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--vt-muted); border: 2px solid transparent; background-clip: content-box; }