/* DraftLock design tokens (v1.11). The one place the look is decided: colours, type, spacing, radii, borders and
   motion. style.css and the theme modules only ever read these. Change a value here and every screen follows.

   The look is the approved graphite tactics board: one near-black surface, fine grey pitch lines, one blue for
   everything that can be pressed, white type, and nothing decorative. There is no light theme. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/inter-latin-wght-normal.woff2) format('woff2-variations'), url(/fonts/inter-latin-wght-normal.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: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations'), url(/fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  /* surfaces */
  --bg: #15181d;             /* the page */
  --surface: #1c2027;        /* a card, a sheet, a row that sits apart */
  --surface-2: #232830;      /* a pressed surface, a chip */
  --surface-3: #2b313b;      /* a track behind a bar */
  --pitch: #171a20;          /* the pitch itself, a shade up from the page */
  --veil: rgba(8, 10, 13, .72);
  /* lines */
  --line: #262b34;           /* the hairline between rows */
  --line-strong: #3a4250;    /* an outlined button, a field, a tile */
  --pitch-line: #6a7585;     /* the markings */
  /* type */
  --ink: #f3f4f6;
  --muted: #9aa3b2;
  --dim: #6b7484;
  /* the one blue */
  --blue: #2f7bf6;
  --blue-press: #2468d9;
  --blue-tint: rgba(47, 123, 246, .14);
  --blue-line: #2f7bf6;
  --on-blue: #ffffff;
  --link: #4d8ff8;
  /* states */
  --green: #3ec96f; --green-tint: rgba(62, 201, 111, .12);
  --red: #e5484d; --red-tint: rgba(229, 72, 77, .14); --red-line: #8f2730;
  --amber: #f0b429;
  /* the opponent's colour on a scoreboard: chalk, never a second accent */
  --them: #c9cfd8;
  /* how well a man wears the shirt he is in */
  --fit-main: #3ec96f; --fit-good: #e7d34e; --fit-fair: #f0a33c; --fit-poor: #e5484d;
  /* the momentum chart: your side blue, theirs chalk */
  --mom-you: #2f7bf6; --mom-them: #a6afbf; --mom-axis: #3a4250; --mom-tick: #2b313b;
  /* type scale */
  --text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fs-h1: 34px; --fs-h2: 22px; --fs-h3: 17px; --fs-body: 15px; --fs-small: 13px; --fs-tiny: 11.5px; --fs-btn: 17px;
  --lh: 1.4;
  /* spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --gutter: 20px;
  --col: 560px;              /* the game's column; the references are drawn at a phone's width */
  /* radii */
  --r-s: 8px; --r-m: 10px; --r-l: 12px; --r-pill: 999px;
  /* borders */
  --bw: 1px; --bw-strong: 1.5px;
  /* control heights */
  --h-btn: 56px; --h-ctl: 48px; --h-row: 56px;
  /* motion */
  --t-fast: 120ms; --t-base: 180ms; --t-slow: 320ms; --ease: cubic-bezier(.2, .7, .2, 1);
  /* the home pitch's slide between formations */
  --home-slide: 900ms;
}
@media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; --home-slide: 0ms; } }