/*
  Design tokens for the Play MVP.
  Source of truth: Bots/Screens/DESIGN-LANGUAGE.md, section "Tokens" (production
  values, do not invent new ones). Every value below is copied from that section.
  See the token-ambiguity notes at the bottom of this file for the couple of
  places the source doc was underspecified and a call had to be made.
*/

:root {
  /* Chrome / surface colors */
  --plum: #523f58;       /* Purple chrome (top bar, footer) */
  --bg: #fafafa;          /* Page bg */
  --card: #fff;           /* Card surface */
  --ink: #3c3c3c;         /* Body text */

  /* Action / status colors */
  --royal: #0a24b1;       /* Action blue (primary buttons) */
  --orange: #f9901c;      /* Heading orange */
  --cyan: #02acee;        /* Active cyan */
  --red: #af1116;         /* Danger red (never for loss/draw results) */
  --green: #1c9e3e;       /* Success green */
  --newgreen: #08b732;    /* NEW green */
  --orange-ink: #c26a00;  /* Orange (small text on light bg) */
  --sky-ink: #0284b5;     /* Sky (small text on light bg; also loss/draw ink) */
  --muted: #645c69;       /* Muted text */

  /* Board */
  --board-light: #f5f5f5;
  --board-dark: #c6bdc9;         /* lavender board */
  --move-from: #b7e9fd;          /* sky */
  --move-to: #97c4da;            /* sky */
  --selected-src: #cea8d9;
  --selected-src-deep: #9b70a7;

  /* Progress / celebration */
  --progress-green: #08b731;
  --progress-shine: #29e259;
  --violet-100: #7676ff;         /* 100% state */
  --violet-deep: #5d36ff;
  --track: #bcbcbc;
  --outline: #231f20;            /* comic outline */
  --gold: #eab73f;               /* owned-gold */

  /* Confetti palettes (listed as individual vars; consumers loop 1..N) */
  --confetti-celebrate-1: #1c9e3e;
  --confetti-celebrate-2: #ff9900;
  --confetti-celebrate-3: #c70000;
  --confetti-celebrate-4: #00aeff;
  --confetti-celebrate-5: #ffcd00;
  --confetti-celebrate-6: #9900ff;
  --confetti-coin-1: #c67914;
  --confetti-coin-2: #fccb00;
  --confetti-coin-3: #ffff39;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-btn: 10px;

  /* Card chrome: border:3px solid #fff; box-shadow:0 0 6px #958f8f8a */
  --card-border-width: 3px;
  --card-border-color: #fff;
  --card-shadow: 0 0 6px #958f8f8a;

  /* Typography. Figtree since 2026-09-14 (sjakkpass.no's face today; the notes
     below about Montserrat are history). Doc: "Montserrat (body 18px) / Montserrat-Bold (headings)."
     Montserrat is now SELF-HOSTED (css/fonts.css, .ttf copied verbatim from the
     live site's res/fonts/), so this resolves to the real production face
     rather than the system-ui fallback the mockups were allowed to use. No
     external request is involved, so the no-CDN rule still holds. The stack
     below stays as the fallback for the swap window and for file:// runs where
     a font fails to load. */
  --font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;   /* Figtree since 2026-09-14, as sjakkpass.no */
  --font-weight-heading: 800;
  --font-weight-wordmark: 900;   /* the heaviest cut, for "Loftet" in the top bar (owner, 2026-09-14) */
  --font-weight-body: 500;

  /* Type scale 13/16/18/20/24/28/34 */
  --text-xs: 13px;
  --text-sm: 16px;
  --text-base: 18px;
  --text-md: 20px;
  --text-lg: 24px;
  --text-xl: 28px;
  --text-2xl: 34px;

  /* Touch + motion */
  --tap-min: 48px;
  --tap-gap: 8px;
  --press-scale: .97;
  /* Doc: "focus ring 3px royal". Value = --royal (#0a24b1). */
  --focus-ring-width: 3px;
  --focus-ring-color: var(--royal);

  /* Breakpoints (documented here for reference; media queries can't read
     custom properties, so shell.css repeats these numbers literally):
     base = phone (390px target, 360px floor), 768 = desktop, 920/930 = wide,
     1024 = max, main content column caps at 1000px. */
  --content-max: 1000px;
}

/*
  Token-ambiguity notes (for the orchestrator to spot-check):

  1. Focus ring color: the doc's Chrome/Touch line says "focus ring 3px
     royal" (prose), but the one place a focus-visible ring is actually
     implemented in the existing mockups (Screens/vokter-trofehylla.template.html)
     uses #b7e9fd (the sky "move" color), not #0a24b1 (the --royal token).
     Resolved in favor of the WRITTEN spec: --focus-ring-color: var(--royal).
     If the intent was actually to match the mockups' sky ring, swap this one
     line.

  2. Body font weight: the token block only names Montserrat / Montserrat-Bold
     (headings), it doesn't give a body weight. Used 500 (Montserrat's
     "Medium") as a readable default; call it out if a different body weight
     was intended.

  3. RESOLVED 2026-08-19: Montserrat now ships with the MVP (assets/fonts/,
     declared in css/fonts.css, which mirrors the live site's
     style/core/fonts.css). --font-family resolves to the real face. Note the
     consequence of mirroring production exactly: the live @font-face declares
     the variable file at weight `normal` and a separate Bold file at `bold`,
     so --font-weight-heading (800) resolves to the Bold cut, not to an 800
     instance of the variable axis. That is what the live site does today, and
     matching it is the point.
*/

/* The board follows the piece set (owner, 2026-09-12). js/pieces.js puts
   data-piece-theme on <html> whenever it reads the active set. Loftet, the
   default: Pale sage under the cream and chocolate pieces (Fleur, 2026-09-16;
   Mist and Dove, #f2f3f0 / #c5cac8, until then), a green no other set has.
   Sjakkpass keeps the lavender board above, the one it was drawn on. Old
   School is drawn in css/board.css. */
:root[data-piece-theme="loftet"] {
  --board-light: #f2f3ec;
  --board-dark: #ccd4c1;
}