/* West Georgia Misfits — design tokens.
 *
 * First sheet on every page, and the only one with NO media queries at all:
 * a token is a value, not a layout. Width-dependent values live in mobile.css
 * / desktop.css, which load after this one and after site.css.
 */
:root{
  --ink:#0B0B0D;
  --panel:#141417;
  --panel-2:#1B1B1F;
  /* Calendar cells sit lighter than the page ink on purpose (see .cal-cell);
     --panel-4 is the same cell once it has an event on it. */
  --panel-3:#1E1E24;
  --panel-4:#22222A;
  --panel-hover:#1C1C21;
  --line:#2A2A30;
  --red:#C8102E;
  --red-deep:#8E1220;
  --red-hover:#DE1936;
  /* Channel triplet for the brand red, so translucent fills stop being typed
     out as rgba(200,16,46,...) with 17 different alphas. */
  --red-rgb:200 16 46;
  --white:#F4F3F0;
  --silver:#A7ABB3;
  /* AA-checked on both --ink and --panel for the small text it colors.
     NOT on the lighter calendar cells (--panel-3 4.08:1) — use --silver there. */
  --dim:#7A7E87;
  /* Brand red for SMALL text: --red passes only for display sizes.
     #E8465F = 5.12:1 on --ink, 4.79:1 on --panel (AA for body text). */
  --red-text:#E8465F;
  --display:"Anton",sans-serif;
  --cond:"Barlow Condensed",sans-serif;
  --body:"Barlow",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Google Fonts request (every page): Barlow 400/600/700,
     Barlow Condensed 500/600. Nothing here may ask for a weight outside that
     set — the browser synthesises it and the face goes soft. */

  /* Status colours. Ratios below are against --panel (#141417), the darkest
     surface any of them lands on; all clear AA for body text. */
  --ok:#5FBF7F;        /* 8.09:1 */
  --ok-rgb:95 191 127;
  --warn:#E0A13A;      /* 8.17:1 */
  --warn-rgb:224 161 58;
  --gold:#C9A13B;      /* 7.57:1 — tournaments/featured, not a warning */
  --err:#F0788C;       /* 6.80:1 */
  /* Squad identity, shared by calendar chips and game-row chips. */
  --squad-9u:#1F7A3A;
  --squad-9u-line:#2A9A4A;
  --squad-10u:#1A5FB4;
  --squad-10u-line:#3B7FD4;
  --squad-8u:rgb(var(--red-rgb) / .9);

  /* Light surfaces: the site is dark-only, so these are the handful of places
     a white/near-white ground is deliberate (logos, product shots, signature). */
  --on-red:#fff;
  --surface-light:#F2F2F2;
  --ink-on-light:#111;

  /* Layout. --header-h is #app-header's RESERVED height for the DESKTOP bar;
     the stacked layout re-declares it at the top of mobile.css, and that one
     variable is the whole contract between the two sheets. --chrome-h is the
     measured height site.js/chrome-boot publish once the bar has painted.
     Sticky offsets and hero heights read var(--chrome-h,var(--header-h)) so a
     deep link never lands under the bar. */
  --header-h:58px;
  --wrap:1360px;
  --space-3:14px;
  --space-4:22px;
  --space-5:36px;
  --space-6:64px;
  --skew:-8deg;

  /* Type scale. The file grew to 29 distinct px sizes (eight of them half-px)
     and 23 letter-spacing values because the "kicker" idiom — condensed 600,
     uppercase, tracked — was re-declared inline in ~60 rules, each with its
     own size and tracking. New rules pick a step here; the .kicker utility
     below is the idiom itself. */
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:14.5px;
  --fs-md:16px;
  --fs-lg:19px;
  --fs-xl:22px;
  --fs-2xl:26px;
  --fs-3xl:34px;
  --track-tight:.03em;
  --track:.08em;
  --track-wide:.14em;
  --track-xwide:.2em;

  /* One ladder, so a veil can't tie with a sticky bar again. */
  --z-header:50;
  --z-chrome:60;
  --z-overlay:100;
  --z-modal:120;
  --z-toast:130;
}