/* Brateng Games design tokens.

   Vendored from Brateng Music (sonos_music_controller/service/app/static/css/
   tokens.css) so the house apps read as one family — same six themes, same
   radius/motion/touch grammar. Music's file is the source of truth for the
   shared values; a palette change there is a deliberate copy across, not an
   import (the two apps deploy separately). See DECISIONS.md D3.

   Added here: --p1 / --p2, the two player-mark colours. They differ per theme
   so the marks stay legible on every background, and the marks differ in SHAPE
   as well as colour so the board never relies on colour vision. */

:root {
  /* dark (Phil) */
  --bg: #0b0d12;
  --surface: #141821;
  --surface-2: #1b2130;
  --surface-3: #242c3d;
  --line: #242c3d;
  --text: #e8ecf4;
  --text-dim: #8b95a8;
  --accent: #4f8cff;
  --accent-2: #7db0ff;
  --ok: #34d399;
  /* Lifted from #f87171, which measured 4.19–4.36:1 on the four kid surfaces —
     just under the 4.5:1 floor, on the one signal a child most needs to read:
     the live conflict marker in sudoku. Now 6.1:1 at worst, 9.4:1 on Midnight. */
  --danger: #fca5a5;
  --glow: rgba(79, 140, 255, .45);

  /* What goes ON the accent — the label of every primary button. It used to be
     a hard-coded white, and --accent is a saturated mid-tone in five of the six
     palettes, so "Rematch" / "Deal" / "Ready" measured 1.51:1 in Lime, 1.81:1
     in Ocean (Emma's default) and 2.26:1 in Sunset (Anna's) against a 4.5:1
     readability floor. This near-black clears 5.9:1 on Midnight and 7.2–12.6:1
     on the kid palettes; Daylight keeps white, which already passed at 4.65:1. */
  --on-accent: #0b1020;

  --p1: #4f8cff;   /* X */
  --p2: #fbbf24;   /* O */

  --radius: 16px;
  --radius-sm: 10px;
  --press: scale(.965);
  --fade: 180ms ease;
  --touch: 44px;
  --gutter: 26px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shadow: 0 10px 32px rgba(0, 0, 0, .45);
}

/* Daylight has to override the semantic colours too, not just the greys. --ok
   and --danger were picked to sit on a dark background and were left at those
   values here, so on white they measured 1.92:1 and 2.77:1 — that is the "best
   score" pill on every hub tile, the legal-move dot in checkers and the live
   conflict marker in sudoku. --accent-2 was also *lighter* than --accent, which
   is right over a dark background and backwards over a white one. */
[data-theme="light"] {
  --bg: #f2f4f8; --surface: #ffffff; --surface-2: #eef1f6; --surface-3: #e2e7ef;
  --line: #d9dfe9; --text: #1b2330; --text-dim: #66707f;
  --accent: #2f6fe4; --accent-2: #1d4ed8; --glow: rgba(47, 111, 228, .35);
  --ok: #047857; --danger: #b91c1c;
  --on-accent: #ffffff;
  --shadow: 0 10px 28px rgba(20, 30, 50, .14);
  --p1: #2f6fe4; --p2: #d97706;
}

/* Kid palettes — high-contrast, playful; layout scaling comes from body.kid */
[data-theme="kid_sunset"] {
  --bg: #2b1055; --surface: #3c1a6e; --surface-2: #4c2585; --surface-3: #5d319d;
  --line: #5d319d; --text: #fff7ed; --text-dim: #d8b4fe;
  --accent: #fb923c; --accent-2: #fdba74; --glow: rgba(251, 146, 60, .5);
  --p1: #fdba74; --p2: #67e8f9;
}
[data-theme="kid_ocean"] {
  --bg: #062c43; --surface: #0a3a58; --surface-2: #0e4a6e; --surface-3: #135a85;
  --line: #135a85; --text: #ecfeff; --text-dim: #7dd3fc;
  --accent: #22d3ee; --accent-2: #67e8f9; --glow: rgba(34, 211, 238, .5);
  --p1: #67e8f9; --p2: #fbbf24;
}
[data-theme="kid_lime"] {
  --bg: #1a2e05; --surface: #24400a; --surface-2: #2f5310; --surface-3: #3b6716;
  --line: #3b6716; --text: #f7fee7; --text-dim: #bef264;
  --accent: #a3e635; --accent-2: #d9f99d; --glow: rgba(163, 230, 53, .5);
  --p1: #d9f99d; --p2: #f472b6;
}
[data-theme="kid_bubblegum"] {
  --bg: #500724; --surface: #6b0f33; --surface-2: #861843; --surface-3: #a12253;
  --line: #a12253; --text: #fdf2f8; --text-dim: #f9a8d4;
  --accent: #f472b6; --accent-2: #f9a8d4; --glow: rgba(244, 114, 182, .5);
  --p1: #f9a8d4; --p2: #7dd3fc;
}