/* =====================================================================
   chessmate.css — Chessmate.ly unified design tokens
   Source of truth: CHESSMATE-DESIGN-SYSTEM.md (§2–§3).
   Loads LAST so it wins on equal specificity — no !important, ever.
   Overrides the legacy "newspaper skin" token block at the end of
   app.css by redefining the same custom properties on the same
   selectors, translated to the approved oxblood/cream/gold palette.
   ===================================================================== */

/* ---------- 1. Core palette + semantic tokens — LIGHT (default) ---------- */
:root,
:root[data-appearance="light"] {
  color-scheme: light;

  /* Core palette (theme-independent) */
  --oxblood: #6e1423;
  --oxblood-deep: #4a0d18;
  --forest: #1f3d2b;
  --forest-soft: #2e5540;
  --cream: #f7f1e3;
  --cream-2: #efe6d2;
  --gold: #c9a24b;

  /* Legacy paper/ink aliases consumed by app.css + the play.html inline block */
  --paper: #fffdf7;
  --paper-2: var(--cream-2);
  --paper-3: #e7dcc2;
  --ink: #231c17;
  --ink-soft: #5c5248;
  --ink-faint: #877b6d;
  --rule: rgba(35, 28, 23, 0.14);
  --rule-soft: rgba(35, 28, 23, 0.08);
  --brass: var(--gold);
  --board-frame: var(--oxblood-deep);

  /* Semantic tokens */
  --bg: var(--cream);
  --surface: var(--paper);
  --surface-2: var(--cream-2);
  --surface-3: var(--paper-3);
  --line: var(--rule);
  --line-soft: var(--rule-soft);
  --text: var(--ink);
  --muted: var(--ink-soft);
  --subtle: var(--ink-faint);
  --accent: var(--oxblood);
  --accent-strong: var(--oxblood-deep);
  --accent-ink: #fff;
  --success: var(--forest);
  --warning: var(--gold);
  --danger: #a4262c;
  --live: #c1272d;
  --radius: 14px;
  --shadow: 0 20px 50px -20px rgba(74, 13, 24, 0.35);

  /* Board — signature oxblood dark squares on cream */
  --light-square: #f2e8d5;
  --dark-square: #6e1423;
  --light-coord: #6e1423;
  --dark-coord: #fdf8ec;
  --sq-light: var(--light-square);
  --sq-dark: var(--dark-square);
  --sq-dark-piece: #fdf8ec;

  /* Typography */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Hanken Grotesk", Inter, system-ui, sans-serif;
  --font-display: var(--serif);
  --font-body: var(--sans);
}

/* ---------- 2. Semantic tokens — DARK (accent flips oxblood → gold) ---------- */
:root[data-appearance="dark"] {
  color-scheme: dark;

  --paper: #211b17;
  --paper-2: #2a221d;
  --paper-3: #332a23;
  --ink: #f3ead9;
  --ink-soft: #ae9f8c;
  --ink-faint: #857866;
  --rule: rgba(243, 234, 217, 0.14);
  --rule-soft: rgba(243, 234, 217, 0.08);
  --brass: #c9a24b;
  --board-frame: #120e0a;

  --bg: #171310;
  --surface: var(--paper);
  --surface-2: var(--paper-2);
  --surface-3: var(--paper-3);
  --line: var(--rule);
  --line-soft: var(--rule-soft);
  --text: var(--ink);
  --muted: var(--ink-soft);
  --subtle: var(--ink-faint);
  --accent: #c9a24b;            /* gold — oxblood lacks contrast on dark */
  --accent-strong: #d9b768;
  --accent-ink: #171310;
  --success: #8caf76;
  --warning: #c9a24b;
  --danger: #d96b66;
  --shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);

  --light-square: #3a2f27;
  --dark-square: #8a1f31;       /* lightened oxblood for visibility */
  --light-coord: #c9a24b;
  --dark-coord: #f3ead9;
  --sq-light: var(--light-square);
  --sq-dark: var(--dark-square);
  --sq-dark-piece: #fdf8ec;
}

/* ---------- 3. Typography — Fraunces = printed, Hanken = interface ---------- */
body.play-page {
  font-family: var(--font-body);
}

/* Clocks read as printed numbers: Fraunces 700, tabular */
body.play-page .player-card .clock,
body.play-page .video-clock {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Panel headers: 11px uppercase letterspaced interface labels */
body.play-page .panel-title,
body.play-page .panel-head {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Opening name: italic Fraunces */
body.play-page .opening-name {
  font-family: var(--font-display);
  font-style: italic;
}

/* Headings and overlay titles are display type */
body.play-page .overlay-title,
body.play-page .account-page-title,
body.play-page .account-display-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Motion floor (the only permitted !important) */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* BUG FIX (mobile): app.css hides every .info-sheet during play
   (.cm-playing/.cm-reviewing/.cm-gameover .info-sheet { display:none !important })
   which also killed the sheets living INSIDE modal backdrops — e.g. the
   camera/mic consent dialog. On phones the backdrop dimmed but the dialog
   never appeared, so getUserMedia was never called and no permission prompt
   showed. Same specificity as the offending rules, later in cascade, so it
   wins and modal sheets always render. */
.sheet-backdrop .info-sheet {
  display: block !important;
}