/*
  The design tokens.
  Concept: the rink (docs/design.md, mockup/). The ice is the page, cool white with faint skate cuts;
  the boards (white, the yellow kickplate along their foot) hold every section; navy ink; the red
  and blue lines mark what matters; the scoreboard over center ice, red and amber LED figures on
  black, shows anything live. The token names are NoHitter's, kept so every component follows:
  "paper" is the ice and the boards, "ink" the navy, "board" the scoreboard's housing, "chalk" the
  lettering on it and on the navy masthead, "stitch" the red line, "lamp" the kickplate's yellow.
  Load after the Google Fonts link and before slapshot.css.
*/
:root {
  color-scheme: light;

  /* The ice and the boards */
  --rk-paper-0: #fbfdfe;          /* raised: the boards, panels, cards */
  --rk-paper-1: #edf3f6;          /* the ice: the page */
  --rk-paper-2: #e0eaef;          /* wells, hovered rows */
  --rk-paper-3: #cddbe3;          /* pressed, rules on paper-2 */
  --rk-rule-1: #c9d7e0;           /* hairlines */
  --rk-rule-2: #9fb3c0;           /* strong rules */
  --rk-skate-cut: rgba(150, 180, 200, 0.07);   /* the faint cuts across the ice */
  --rk-skate-cut-2: rgba(150, 180, 200, 0.05);

  /* Navy ink */
  --rk-ink-1: #10233a;            /* text and the masthead (14:1 on paper-1) */
  --rk-ink-2: #3c4e62;            /* secondary text (7.6:1) */
  --rk-ink-3: #56667a;            /* muted labels (5.2:1 on paper-1, 4.8:1 on paper-2) */
  --rk-ink-hand: #173d80;         /* the coach's marker on the whiteboard */

  /* The scoreboard over center ice */
  --rk-board-1: #0c1016;          /* the housing: the board's face */
  --rk-board-2: #151b24;          /* inner panels: the line score, the clock's box */
  --rk-board-3: #232b37;          /* the frame and its dividers */
  --rk-board-edge: rgba(251, 253, 254, 0.1);
  --rk-chalk-1: #fbfdfe;          /* lettering on the board and the navy (15:1 on ink-1) */
  --rk-chalk-2: #c9d6e2;          /* secondary lettering (10.7:1 on ink-1, 12.9:1 on board-1) */
  --rk-chalk-3: #8d99a7;          /* labels on the board (6.6:1 on board-1) */
  --rk-led: #ff4d3a;              /* lit figures: scores, penalties (5.2:1 on board-2) */
  --rk-led-glow: 0 0 10px rgba(255, 77, 58, 0.65), 0 0 2px #ff9b8a;
  --rk-amber: #ffb21f;            /* the clock (9.6:1 on board-2) */
  --rk-amber-glow: 0 0 10px rgba(255, 178, 31, 0.6), 0 0 2px #ffd479;
  --rk-led-off: #2b1614;          /* an unlit figure */

  /* The lines and the kickplate */
  --rk-stitch: #c42032;           /* the red line: the active tab, actions, goals, losses' fills */
  --rk-stitch-ink: #a3192a;       /* red text on the ice (6.9:1) */
  --rk-blue: #1f4fa3;             /* the blue line: high grades, fills */
  --rk-blue-ink: #173d80;         /* links, blue text (9.3:1) */
  --rk-lamp: #f2c230;             /* the kickplate: under the masthead and every panel head, highlights */
  --rk-lamp-ink: #7a5e00;         /* the kickplate's colour as text on the ice (5.5:1) */
  --rk-kick-edge: #e2ad14;        /* the kickplate's top edge */

  /* Results and states */
  --rk-win: #1c7a4f;              /* a win, a leading bid (4.8:1 on paper-1) */
  --rk-loss: #b3262f;             /* a loss (5.8:1) */
  --rk-caution: #8a5a00;          /* the relegation series marker (5.3:1) */
  --rk-outbid: #f5862a;           /* outbid at auction: the banner on every page (ink-1 on it, 6.3:1) */
  /* your club's rows: a wash of the kickplate, opaque so sticky cells hide what scrolls under them */
  --rk-highlight: color-mix(in srgb, var(--rk-lamp) 18%, var(--rk-paper-0));
  --rk-highlight-hover: color-mix(in srgb, var(--rk-lamp) 30%, var(--rk-paper-0));
  --rk-ticket: #fbfdfe;           /* the next game's ticket: board stock */

  /* Grades: cold to deep. Pale ice below average, light blue, steel blue, the blue line's blue
     from 65, 80 and up red with a kickplate ring. The number is always printed. */
  --rk-g20: #eef3f6;  --rk-g20-ink: var(--rk-ink-3);
  --rk-g25: #e6eef3;  --rk-g25-ink: var(--rk-ink-3);
  --rk-g30: #dde8ef;  --rk-g30-ink: var(--rk-ink-2);
  --rk-g35: #d3e2ec;  --rk-g35-ink: var(--rk-ink-2);
  --rk-g40: #c6d9e6;  --rk-g40-ink: var(--rk-ink-1);
  --rk-g45: #b8cfe0;  --rk-g45-ink: var(--rk-ink-1);
  --rk-g50: #a6c2d9;  --rk-g50-ink: var(--rk-ink-1);
  --rk-g55: #94b6d3;  --rk-g55-ink: var(--rk-ink-1);
  --rk-g60: #7ea3c6;  --rk-g60-ink: var(--rk-ink-1);
  --rk-g65: #1f4fa3;  --rk-g65-ink: var(--rk-chalk-1);
  --rk-g70: #1a4590;  --rk-g70-ink: var(--rk-chalk-1);
  --rk-g75: #173d80;  --rk-g75-ink: var(--rk-chalk-1);
  --rk-g80: #c42032;  --rk-g80-ink: var(--rk-chalk-1);
  --rk-g-star-ring: inset 0 0 0 2px var(--rk-lamp);

  /* Type. Graduate: varsity block, the sweater's letters and numbers (one weight, 400). Saira
     Extra Condensed: the tall caps of rink-board ads, for heads, labels, tabs and buttons. Iceland:
     the LED board, only on black. Archivo for UI and body, Archivo Narrow for the agate. Kalam:
     the coach's marker, on the whiteboard only. The fonts are condensed by design, so the pose and
     width tokens stay normal. */
  --rk-font-varsity: Graduate, Rockwell, 'Roboto Slab', serif;
  --rk-font-display: 'Saira Extra Condensed', 'Arial Narrow', sans-serif;
  --rk-font-led: Iceland, 'Courier New', monospace;
  --rk-font-text: Archivo, 'Helvetica Neue', Arial, sans-serif;
  --rk-font-data: 'Archivo Narrow', 'Arial Narrow', sans-serif;
  --rk-font-hand: Kalam, 'Comic Sans MS', cursive;
  --rk-title-pose: normal;
  --rk-title-width: normal;
  --rk-data-width: normal;

  --rk-fs-hero: clamp(3rem, 8vw, 4.6rem);    /* LED figures */
  --rk-fs-h1: clamp(2.2rem, 5vw, 3.6rem);
  --rk-fs-h2: 1.35rem;
  --rk-fs-h3: 1.2rem;
  --rk-fs-body: 0.9375rem;                    /* 15px */
  --rk-fs-data: 0.92rem;                      /* tables */
  --rk-fs-small: 0.8125rem;                   /* 13px */
  --rk-fs-label: 0.75rem;                     /* 12px condensed caps labels, never smaller */
  --rk-lh-tight: 1.05;
  --rk-lh-snug: 1.3;
  --rk-lh-body: 1.5;
  --rk-track-caps: 0.12em;
  --rk-track-sign: 0.04em;

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

  /* Shape: the boards are square; chips barely round; the player card is die-cut */
  --rk-r-0: 0;
  --rk-r-1: 2px;
  --rk-r-2: 3px;
  --rk-r-ticket: 3px;
  --rk-r-card: 12px;
  --rk-r-pill: 999px;

  /* Depth */
  --rk-shadow-paper: 0 1px 0 var(--rk-rule-1), 0 8px 18px -14px rgba(16, 35, 58, 0.45);
  --rk-shadow-lift: 0 2px 0 rgba(16, 35, 58, 0.08), 0 14px 28px -16px rgba(16, 35, 58, 0.6);
  --rk-shadow-board: inset 0 0 0 1px #000, 0 14px 28px -16px rgba(0, 0, 0, 0.7);
  --rk-shadow-magnet: 0 2px 0 rgba(16, 35, 58, 0.12), 0 6px 10px -8px rgba(16, 35, 58, 0.5);
  --rk-shadow-crest: drop-shadow(0 4px 8px rgba(16, 35, 58, 0.25));                       /* a filter */
  --rk-shadow-ticket: drop-shadow(0 1px 0 #9fb3c0) drop-shadow(0 10px 12px rgba(16, 35, 58, 0.16));   /* a filter: follows the punched outline */
  --rk-scrim: rgba(16, 35, 58, 0.62);         /* behind a dialog */

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

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

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

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

/* The dressing-room whiteboard (the lines page, web/src/pages/lines.ts): its white face, a touch of
   grey toward the corner, the aluminium frame and the marker tray under it. */
:root {
  --rk-wb-face: #ffffff;
  --rk-wb-face-2: #f1f4f6;
  --rk-wb-frame: #b9c3cc;
  --rk-wb-tray: #9aa6b1;
}

/* The sheet (the game center's shot map and the broadcast, web/src/live/rink.ts): the goal crease's
   pale blue, the puck, and the goal horn's flash on the scoreboard. */
:root {
  --rk-crease: #9cc3e8;
  --rk-puck: #0c1016;
  --rk-horn-flash: rgba(255, 77, 58, 0.35);
}