/*
  The design tokens (docs/design.md).
  Concept: the gym, 1974. The programme's cream stock and navy ink for every page, the arena's black
  board and its amber bulbs for anything live, the ball's orange for what to press, the maple floor
  for a club's head. The token names are NoHitter's, kept so every component follows: "paper" is the
  programme, "ink" its type, "board" the scoreboard, "lamp" a lit bulb, "stitch" the ball's orange.
  Load after the Google Fonts link and before alleyoop.css.
*/
:root {
  color-scheme: light;

  /* Surfaces: the programme */
  --ao-paper-0: #fffaf0;          /* raised: cards, panels */
  --ao-paper-1: #f6eddc;          /* the page */
  --ao-paper-2: #efe2c8;          /* wells, hovered rows */
  --ao-paper-3: #e4d2b0;          /* pressed, rules on paper-2 */
  --ao-rule-1: #dccaa6;           /* hairlines */
  --ao-rule-2: #b9a47e;           /* strong rules */

  /* Text: navy ink */
  --ao-ink-1: #1d2140;            /* text (14:1 on paper-1) */
  --ao-ink-2: #474b66;            /* secondary text (8:1) */
  --ao-ink-3: #6b6670;            /* muted labels (5:1) */
  --ao-ink-hand: #1f3c8f;         /* the coach's marker */

  /* The arena's board: scoreboards, the masthead */
  --ao-board-1: #1d2140;          /* panel: the masthead's navy */
  --ao-board-2: #161a33;          /* deeper panel */
  --ao-board-3: #121212;          /* the scoreboard's black */
  --ao-board-edge: rgba(255, 250, 240, 0.14);
  --ao-chalk-1: #fffaf0;          /* lettering on the boards */
  --ao-chalk-2: #c9c2b3;          /* secondary lettering */
  --ao-lamp: #ffb547;             /* a lit bulb: winners, live marks, the market */

  /* Accents: the ball */
  --ao-stitch: #e0662a;           /* the ball's orange: the active tab, actions, the stripe under heads */
  --ao-stitch-ink: #b3471a;       /* orange text on the programme (5:1) */
  --ao-red: #c4342d;              /* the ball's red stripe */
  --ao-blue: #23499b;             /* and its blue */
  --ao-win: #1f7a5a;              /* a win */
  --ao-loss: #c4342d;             /* a loss */
  --ao-caution: #b7790a;          /* the relegation series marker */
  --ao-outbid: #d4561d;           /* outbid at auction: the banner on every page */
  --ao-highlight: rgba(255, 181, 71, 0.22);   /* your club's rows */
  --ao-ticket: #fbe6c2;           /* the next game's ticket */
  --ao-maple: #e4bc83;            /* the floor */
  --ao-maple-2: #d6a467;

  /* Grades: the ball's scale, pale to orange, a star on navy; the number is always printed. */
  --ao-g20: #ece6da;  --ao-g20-ink: var(--ao-ink-3);
  --ao-g25: #ebe3d3;  --ao-g25-ink: var(--ao-ink-3);
  --ao-g30: #eadfca;  --ao-g30-ink: var(--ao-ink-2);
  --ao-g35: #ecdcc0;  --ao-g35-ink: var(--ao-ink-2);
  --ao-g40: #efd8b5;  --ao-g40-ink: var(--ao-ink-1);
  --ao-g45: #f2d3a4;  --ao-g45-ink: var(--ao-ink-1);
  --ao-g50: #f4c993;  --ao-g50-ink: var(--ao-ink-1);
  --ao-g55: #f2b47c;  --ao-g55-ink: var(--ao-ink-1);
  --ao-g60: #ee9d63;  --ao-g60-ink: #2a1408;
  --ao-g65: #e8834a;  --ao-g65-ink: #fffaf0;
  --ao-g70: #e0662a;  --ao-g70-ink: #fffaf0;
  --ao-g75: #b9471c;  --ao-g75-ink: #fffaf0;
  --ao-g80: #1d2140;  --ao-g80-ink: #ffb547;

  /* Type: Shrikhand for the wordmark and nicknames, Bowlby One SC for heads and big numbers, Doto
     for the bulbs, Atkinson Hyperlegible to read, IBM Plex Sans Condensed for the agate, Permanent
     Marker for the coach. */
  --ao-font-display: 'Bowlby One SC', 'Arial Black', Impact, sans-serif;
  --ao-font-text: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --ao-font-data: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --ao-font-script: 'Shrikhand', 'Cooper Black', Georgia, serif;
  --ao-font-hand: 'Permanent Marker', 'Comic Sans MS', cursive;
  --ao-font-bulb: 'Doto', 'Courier New', monospace;
  --ao-title-pose: normal;
  --ao-title-width: normal;
  --ao-display-pose: normal;
  --ao-display-width: normal;
  --ao-data-width: normal;

  --ao-fs-hero: clamp(2.8rem, 7vw, 4.6rem);
  --ao-fs-h1: clamp(2rem, 5vw, 3.2rem);
  --ao-fs-h2: 1.35rem;
  --ao-fs-h3: 1.05rem;
  --ao-fs-body: 0.9375rem;                    /* 15px */
  --ao-fs-data: 0.875rem;                     /* 14px tables */
  --ao-fs-small: 0.8125rem;                   /* 13px */
  --ao-fs-label: 0.6875rem;                   /* 11px caps labels */
  --ao-lh-tight: 1.05;
  --ao-lh-snug: 1.3;
  --ao-lh-body: 1.5;
  --ao-track-caps: 0.1em;
  --ao-track-sign: 0.02em;

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

  /* Shape: panels round a little, chips and buttons all the way */
  --ao-r-0: 0;
  --ao-r-1: 4px;
  --ao-r-2: 6px;
  --ao-r-ticket: 10px;
  --ao-r-card: 14px;
  --ao-r-pill: 999px;

  /* Depth */
  --ao-shadow-paper: 0 1px 0 rgba(29, 33, 64, 0.06), 0 14px 28px -18px rgba(29, 33, 64, 0.45);
  --ao-shadow-lift: 0 2px 0 rgba(29, 33, 64, 0.08), 0 20px 44px -16px rgba(29, 33, 64, 0.5);
  --ao-shadow-plate: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -2px 0 rgba(0, 0, 0, 0.4);

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

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

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

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