/*
 * The only place colours, fonts, radii and line widths live (CLAUDE.md, CONTRACTS §8).
 * No colour literal belongs in any other CSS file or in any JS file. The screen reads the
 * numeric tokens through getComputedStyle, so canvas drawing is themed from here too.
 *
 * Fonts are self-hosted woff2 in ./fonts/, subset to Latin-1 plus the punctuation the
 * Finnish UI strings use. NO Google Fonts, NO CDN, no third-party request of any kind
 * (CONTRACTS §11.3, §12.8). Regenerate with scripts/make-fonts.sh.
 *
 * Futsal, not football: indoor hall, wooden floor, a 3:2 goal. No grass, no stadium.
 *
 * The palette is taken from Kauppi Sports Center, where this is played: pale maple floor,
 * blue court markings and a painted blue goal area, light grey walls with white pillars,
 * and a dark spectator gallery above behind black safety netting. Before this it was a
 * dark brown hall with orange lines, which read as harsh on the projector and did not look
 * like anywhere in particular.
 *
 * LINE COLOUR. Blue, because Kauppi's lines are blue. CONTRACTS r3 §12.7 and CLAUDE.md now say
 * "lines in the home hall's colour"; r2 said orange or yellow.
 */

/* --------------------------------------------------------------------------
 * Fonts
 * ------------------------------------------------------------------------ */

@font-face {
  /* Display face: condensed, for scoreboards, big numbers and headings. */
  font-family: 'Barlow Condensed';
  src: url('./fonts/BarlowCondensed-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  /* Body face, regular. Chosen for small-size legibility on a phone in a dark hall. */
  font-family: 'Inter';
  src: url('./fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  /* Body face, semibold. Emphasis and buttons; the only other weight we ship. */
  font-family: 'Inter';
  src: url('./fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------------------
   * Typeface stacks
   * --------------------------------------------------------------------- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; /* scoreboard, headings, big numbers */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* everything else */

  /* ------------------------------------------------------------------------
   * The hall: floor, lines, goal
   * --------------------------------------------------------------------- */
  --c-floor: #e4d3ad; /* pale maple at the near edge, as at Kauppi */
  --c-floor-far: #d0bc92; /* the same floor at the far end, for the perspective wash */
  --c-floor-sheen: #f5ecd6; /* lighter band across the floor, the hall lights' reflection */
  --c-floor-plank: #d8c49c; /* plank seams; barely darker than the floor, texture not pattern */

  --c-wall: #c9ced3; /* the light grey lower wall behind the goal */
  --c-wall-shade: #b3b9bf; /* the same wall lower down, where less light reaches it */
  --c-wall-upper: #23272c; /* the dark spectator gallery above it */
  --c-wall-glass: #38414a; /* the gallery's glass front, a shade lighter than the gallery */
  --c-pillar: #e9ebec; /* the white structural pillars */
  --c-guard-net: #171a1d; /* black safety netting hanging in front of the gallery */

  --c-line: #2a5caf; /* futsal floor lines: Kauppi's blue (see the note at the top) */
  --c-line-far: #24509a; /* the same lines at the far end, dimmed by the perspective wash */
  --c-court-key: #2456a6; /* the painted blue goal area, the hall's most recognisable feature */
  --c-spot: #f7f5ee; /* the white 10 m penalty mark on the floor; its own token, not the goal frame's */

  --c-goal-frame: #f4f6f8; /* goal posts and crossbar, near-white */
  --c-goal-frame-shade: #c4cad0; /* the shaded side of the frame, so it reads as round */
  --c-goal-frame-alt: #1f4fa8; /* the blue bands on the posts, as on the hall's own goals */
  --c-net: #aeb4ba; /* goal net cords */
  --c-goal-void-deep: #1e232a; /* deeper in the goal, where the net is in shadow */
  --c-goal-void: #2b3138; /* inside the goal: dark enough for the net to read, light enough that a dark ball still does */
  --c-keeper: #6b7583; /* the keeper's jersey: mid grey — it has to separate from the DARK goal void he stands in as well as from the pale floor */
  --c-keeper-tape: #eef2f6; /* the white wrist tape a futsal keeper wears — they play bare-handed, no gloves */
  --c-keeper-shorts: #525c6a; /* the shorts and legs, a shade below the jersey but still clear of the goal void */
  --c-keeper-shadow: #4a3b22; /* the keeper's floor shadow (r3.7): warm like the ball's on the maple, a shade deeper */
  --c-ball-outline: #ffffff; /* rim on every ball, so a dark kit colour survives a dark background */
  --c-ball-shadow: #6b5836; /* the ball's shadow on the maple; warm, not a grey smudge */
  --c-ball-seam: #f2efe6; /* the panel seams that turn as a ball spins; warm off-white, read on any kit colour */
  --c-net-bulge: #d9e1e8; /* the net bulging where a goal went in: the net's own light, brighter */

  /* ------------------------------------------------------------------------
   * Chrome: scoreboard bar, panels, text
   * --------------------------------------------------------------------- */
  --c-bar: #12161b; /* dark scoreboard bar across the top of the screen */
  --c-belt: #f2f5f8; /* the scorer belts' strip: LIGHT, because every kit colour in the league is mid-tone or darker */
  --c-page: #14181d; /* phone and admin page background */
  --c-surface: #1d232b; /* raised panel on a dark page */
  --c-surface-raised: #27303a; /* a panel on top of a panel: pickers, the ball socket */
  --c-border: #39424e; /* hairline between surfaces */
  --c-text: #f2f4f7; /* body text on dark */
  --c-text-dim: #98a1ad; /* secondary text, hints, labels */
  --c-text-invert: #14181d; /* text on a light or accent-coloured fill */
  --c-accent: #ffd447; /* the clock and other live elements; yellower than the floor lines */

  /* ------------------------------------------------------------------------
   * Outcomes (phone feedback, CONTRACTS §10)
   * Deliberately not the team colours: the player needs to read WHAT happened,
   * and the screen already carries the team colour for WHO did it.
   * --------------------------------------------------------------------- */
  --c-goal: #35d07f; /* the "MAALI!" flash: the one outcome that should feel like a reward */
  --c-save: #7fa8d9; /* the "TORJUTTU" flash: cool, so it reads as the keeper's colour not a fault */
  --c-miss: #9aa3ae; /* the "OHI" flash: deliberately muted, a miss needs no fanfare */
  --c-frame: #ffb020; /* the "TOLPPAAN!" and "YLÄRIMAAN!" flash: so close it hurts */

  /* ------------------------------------------------------------------------
   * Status (admin panel and connection state)
   *
   * A separate layer from the outcome colours above, and deliberately a shade off
   * them rather than the same value: these appear as small dots and thin bands on
   * dense panels, where the outcome colours are full-screen flashes. Keeping them
   * distinct means either layer can be retuned without disturbing the other.
   * --------------------------------------------------------------------- */
  --c-ok: #2fb96f; /* connected and healthy; deeper than the goal green so a small dot still reads */
  --c-warn: #e8951a; /* the join-flood warning band of CONTRACTS §11.7, on a dense admin panel */
  --c-danger: #e0564b; /* the disconnected dot and destructive buttons like "Nollaa" */

  /* ------------------------------------------------------------------------
   * Geometry: radii and line widths
   * --------------------------------------------------------------------- */
  --radius-s: 6px; /* chips, small buttons */
  --radius-m: 14px; /* cards and panels */
  --radius-l: 24px; /* the team picker and other large targets */
  --radius-pill: 999px; /* fully rounded: the ball socket ring, badges */
  --line-frame: 16px; /* goal frame on the 1920x1080 canvas = 8 cm (CONTRACTS §8) */
  --line-floor: 4px; /* painted floor lines on the canvas */
  --line-hairline: 2px; /* borders and dividers */

  /* r3.5/r3.6 phone and admin sizes (CLAUDE.md: sizes come from this file). */
  --type-prize-title: 64px; /* VOITIT! on the winner's phone */
  --type-prize-who: 44px; /* nickname · #number under it */
  --type-prize-code: 40px; /* "Koodi 0482", checked at the prize desk */
  --type-prize-claim: 19px; /* how to claim */
  --type-raffle-line: 24px; /* "Arvonta alkaa" on every phone while the draw spins */
  --type-admin-drawn: 28px; /* the drawn number and code the operator reads out */
  --result-map-min-height: 56dvh; /* the phone shot map's guaranteed share of a short phone */

  /* ------------------------------------------------------------------------
   * Numeric tokens, read by the screen through getComputedStyle.
   * Unitless on purpose: these are canvas pixels at the 1920x1080 logical size
   * and JS multiplies them, so a "px" suffix would only have to be stripped.
   * --------------------------------------------------------------------- */
  --ball-radius-start: 48; /* ball radius as it leaves the bottom edge (CONTRACTS §8, r3.1) */
  --ball-radius-end: 20; /* at the goal plane: true scale, a 20 cm ball on the 600 px (3 m) goal */
  --ball-outline-width: 2; /* rim thickness in canvas pixels */
  --ball-outline-alpha: 0.55; /* rim opacity: enough to separate, not enough to read as white */
  --ball-shadow-alpha: 0.20; /* the shadow under a ball: depth, not a second object */
  --ball-seam-alpha: 0.55; /* seam opacity: visible spin, not a second ball */
  --net-bulge-alpha: 0.35; /* peak opacity of the net bulge on a goal */
  --keeper-shadow-alpha: 0.24; /* the keeper's floor shadow (r3.7): grounds him, never a second figure */
  --trail-length: 6; /* trail samples behind a ball (CONTRACTS §8) */
  --goal-flash-ms: 250; /* goal-mouth flash duration (CONTRACTS §8) */
  --belt-text-size: 30; /* #<playerNo> on the scorer belts above the boards (CONTRACTS r3.2 §8) */

  /* ------------------------------------------------------------------------
   * Type scale (screen, in canvas pixels; the clients use these via tokens)
   * --------------------------------------------------------------------- */
  --type-clock: 72; /* M:SS in the top bar, readable from the back row */
  --type-score: 88; /* the two goal totals */
  --type-short: 40; /* team short names */
  --type-label: 24; /* small labels: joined count, eff */
  --type-raffle: 160; /* the raffle winner's number on the end screen, readable from the back row */
  --result-band-height: 220; /* the sponsor band along the bottom of the end screen (r3.5) */
  --type-map-label: 44; /* the aggregate map's hot-cell caption; read from the back row */
}

/* --------------------------------------------------------------------------
 * The only base styling this file provides. Everything else belongs to the
 * client that needs it.
 * ------------------------------------------------------------------------ */

html,
body {
  margin: 0;
  padding: 0;
  background: var(--c-page);
  color: var(--c-text);
  font-family: var(--font-body);
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
}

a {
  color: var(--c-accent);
}

/*
 * Scaffold furniture. The placeholder pages from T-001 use this; delete it once T-020,
 * T-030, T-040 and T-063 have replaced them with real clients.
 */
.placeholder {
  padding: 24px;
  max-width: 60ch;
}