/*
  The design tokens.
  Concept: a night game under the lights (mockup/, Rob: "i liked the initial view you showed a lot
  better"). Deep turf-tinted ink for every surface, chalk-white lines and lettering, a pylon-orange
  accent and the gold of a first-down line; type set like a broadcast chyron, Archivo run narrow or
  wide. The token names are NoHitter's, kept so every component follows: "paper" is now the dark
  ground and its raised surfaces, "ink" the light text on them, "board" the deepest panels.
  Load after the Google Fonts link and before fleaflicker.css.
*/
:root {
  color-scheme: dark;

  /* Surfaces */
  --ff-paper-0: #15211d;          /* raised: cards, panels, the lineup card */
  --ff-paper-1: #0a110f;          /* the page */
  --ff-paper-2: #111b18;          /* wells, hovered rows */
  --ff-paper-3: #1a2924;          /* pressed, rules on paper-2 */
  --ff-rule-1: #22342e;           /* hairlines */
  --ff-rule-2: #34493f;           /* strong rules */

  /* Text */
  --ff-ink-1: #ecf1ec;            /* text (15:1 on paper-1) */
  --ff-ink-2: #a9b9b1;            /* secondary text (9:1) */
  --ff-ink-3: #7e9188;            /* muted labels (5.4:1 on paper-1) */
  --ff-ink-hand: #9cc7ff;         /* marker ink */

  /* The deepest panels: scoreboards, the masthead */
  --ff-board-1: #13201c;          /* panel */
  --ff-board-2: #0d1714;          /* deeper panel, the strip under the masthead */
  --ff-board-3: #070c0a;          /* number plates */
  --ff-board-edge: rgba(244, 241, 230, 0.12);
  --ff-chalk-1: #f4f1e6;          /* lettering on the boards */
  --ff-chalk-2: #a9b9b1;          /* secondary lettering */
  --ff-lamp: #f4c542;             /* the first-down gold: winners, live marks, the market */

  /* Accents */
  --ff-stitch: #ff6a1f;           /* the pylon: the active tab, fills, the scout's circle */
  --ff-stitch-ink: #ff8a4f;       /* orange text on the dark (6.4:1) */
  --ff-win: #3fd17f;              /* a win */
  --ff-loss: #ff6b5e;             /* a loss */
  --ff-caution: #e0a526;          /* the relegation series marker */
  --ff-outbid: #ff7a2e;           /* outbid at auction: the banner on every page */
  --ff-highlight: rgba(255, 106, 31, 0.12);   /* your club's rows */
  --ff-ticket: #182621;           /* the next game's ticket */

  /* Grades: one hue, dim to bright on the dark; the number is always printed. */
  --ff-g20: #1b2823;  --ff-g20-ink: var(--ff-ink-3);
  --ff-g25: #1f2f29;  --ff-g25-ink: var(--ff-ink-3);
  --ff-g30: #24372f;  --ff-g30-ink: var(--ff-ink-2);
  --ff-g35: #2a4036;  --ff-g35-ink: var(--ff-ink-2);
  --ff-g40: #2f4b3e;  --ff-g40-ink: var(--ff-ink-1);
  --ff-g45: #355847;  --ff-g45-ink: var(--ff-ink-1);
  --ff-g50: #3c6852;  --ff-g50-ink: var(--ff-ink-1);
  --ff-g55: #46805f;  --ff-g55-ink: #f4f7f3;
  --ff-g60: #57a06e;  --ff-g60-ink: #06110b;
  --ff-g65: #66bd78;  --ff-g65-ink: #06110b;
  --ff-g70: #79d17f;  --ff-g70-ink: #06110b;
  --ff-g75: #9be08a;  --ff-g75-ink: #06110b;
  --ff-g80: #c3ef8f;  --ff-g80-ink: #06110b;

  /* Type: one family, Archivo, its width a token of its own (the font shorthand can't carry it
     through a family name). Titles run italic and narrow, like a chyron; labels and data narrow. */
  --ff-font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --ff-font-text: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ff-font-data: 'Archivo', 'Arial Narrow', sans-serif;
  --ff-font-script: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ff-font-hand: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --ff-title-pose: italic;
  --ff-title-width: condensed;
  --ff-display-pose: normal;
  --ff-display-width: semi-condensed;
  --ff-data-width: semi-condensed;

  --ff-fs-hero: clamp(3rem, 8vw, 5rem);
  --ff-fs-h1: clamp(2.25rem, 5.5vw, 3.6rem);
  --ff-fs-h2: 1.6rem;
  --ff-fs-h3: 1.2rem;
  --ff-fs-body: 0.9375rem;                    /* 15px */
  --ff-fs-data: 0.875rem;                     /* 14px tables */
  --ff-fs-small: 0.8125rem;                   /* 13px */
  --ff-fs-label: 0.6875rem;                   /* 11px caps labels */
  --ff-lh-tight: 1.05;
  --ff-lh-snug: 1.3;
  --ff-lh-body: 1.5;
  --ff-track-caps: 0.1em;
  --ff-track-sign: 0.04em;

  /* Space, 4px base */
  --ff-s1: 4px;
  --ff-s2: 8px;
  --ff-s3: 12px;
  --ff-s4: 16px;
  --ff-s5: 24px;
  --ff-s6: 32px;
  --ff-s7: 48px;
  --ff-s8: 64px;

  /* Shape: panels round a little, chips more */
  --ff-r-0: 0;
  --ff-r-1: 4px;
  --ff-r-2: 6px;
  --ff-r-ticket: 10px;
  --ff-r-card: 14px;
  --ff-r-pill: 999px;

  /* Depth */
  --ff-shadow-paper: 0 1px 0 rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
  --ff-shadow-lift: 0 2px 0 rgba(0, 0, 0, 0.3), 0 20px 50px rgba(0, 0, 0, 0.45);
  --ff-shadow-plate: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -2px 0 rgba(0, 0, 0, 0.4);

  /* Layout */
  --ff-page-max: 1240px;
  --ff-page-wide: 1760px;
  --ff-gutter: 16px;

  /* Motion */
  --ff-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 768px) {
  :root { --ff-gutter: 24px; }
}

@media (min-width: 1200px) {
  :root { --ff-gutter: 32px; }
}