/* Design tokens (docs/SPEC-GUI.md §6): one dark theme, defined once, used everywhere.
   Contrast is MEASURED, not assumed: tests/gui/test_contrast.py reads this file (text >= 4.5:1,
   borders, icons and focus ring >= 3:1) and axe-core audits the screens (tests/gui/e2e). */

:root {
  color-scheme: dark;

  /* Surfaces, from the page down to raised elements */
  --bg: #1d1f2e;
  --surface: #262940;
  --surface-2: #2f3350;
  --surface-sunken: #181a27;
  --border: #3d4268;
  --border-strong: #787eac;   /* edge of a field or a button: 3:1 on every surface (was #565c8c, 1.9-2.6:1) */

  /* Text */
  --text: #eceefb;
  --text-muted: #b0b5d7;      /* 4.5:1 even on a tinted callout over --surface-2 (was #aeb3d6, 4.44:1) */
  --text-on-accent: #ffffff;

  /* Accent (blue of the game) */
  --accent: #5b71ff;          /* borders, focus ring, large shapes */
  --accent-strong: #4a5fe8;   /* button fill: white text on it is 5.1:1 */
  --accent-strong-hover: #3f53da;
  --accent-text: #a5b1ff;     /* links and small accent text */
  --accent-soft: rgba(91, 113, 255, 0.16);

  /* Heart red: a mistake costs one */
  --danger: #ff4d6d;          /* icons, borders */
  --danger-strong: #d6304f;   /* button fill: white text on it is 4.8:1 */
  --danger-strong-hover: #c0243f;
  --danger-text: #ff8da3;
  --danger-soft: rgba(255, 77, 109, 0.14);

  --success: #3ddc97;
  --success-text: #5be3a8;
  --success-soft: rgba(61, 220, 151, 0.14);

  --warning: #ffb84d;
  --warning-text: #ffc670;
  --warning-soft: rgba(255, 184, 77, 0.14);

  /* Typography: the system stack, nothing is downloaded */
  --font: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;

  /* Spacing scale (4 / 8 px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Shape and depth */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.3);

  /* Sizes */
  --touch: 44px;              /* minimum height of a control (>= 40 px) */
  --sidebar: 232px;
  --header: 64px;
  --content-max: 1160px;
  --focus-ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent-text);
}