/*
 * Design tokens for the Hokito analyzer. Every later UI package uses these
 * custom properties instead of literal values.
 *
 * Contrast (WCAG 2.x, checked for both themes when these values were chosen):
 *   --color-text, --color-text-muted, --color-accent and every --label-* colour
 *   are at least 4.5:1 on both --color-surface and --color-surface-raised.
 *   --color-border and --color-focus are at least 3:1 on both surfaces.
 * Pawn fills rely on their stroke tokens, not on fill contrast with a square.
 * Label colours are never the only cue (NFR-008): pair each with its
 * --label-icon-* text and a written label.
 */

:root {
  color-scheme: light dark;

  /* Surfaces and text */
  --color-surface: #ffffff;
  --color-surface-raised: #f3f4f6;
  --color-surface-sunken: #e5e7eb;
  --color-text: #1b1f24;
  --color-text-muted: #4b5563;
  --color-text-inverse: #ffffff;
  --color-border: #7c838e;
  --color-accent: #1d4ed8;
  --color-accent-contrast: #ffffff;
  --color-focus: #1d4ed8;
  --color-danger: #b91c1c;
  --backdrop: rgb(0 0 0 / 0.5);

  /* Board */
  --board-square-light: #ecdcb8;
  --board-square-dark: #a87d4f;
  --board-square-highlight: #f2c94c;
  --board-square-target: #3b82f6;
  --board-coordinate: #4b3a26;
  --pawn-black-fill: #1a1a1a;
  --pawn-black-stroke: #f5f5f5;
  --pawn-white-fill: #fafafa;
  --pawn-white-stroke: #1a1a1a;

  /* Move labels (best, good, inaccuracy, mistake, blunder) */
  --label-best: #1a7f37;
  --label-good: #0e6f78;
  --label-inaccuracy: #875f00;
  --label-mistake: #b04a05;
  --label-blunder: #b91c1c;

  /* Label icons: text cues that accompany the colours (used with `content:`) */
  --label-icon-best: "\2605";       /* black star */
  --label-icon-good: "\2713";       /* check mark */
  --label-icon-inaccuracy: "?!";
  --label-icon-mistake: "?";
  --label-icon-blunder: "??";

  /* Spacing scale (4 px base) */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-round: 999px;

  /* Type scale (system fonts only: no web fonts, NFR-004/NFR-009) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --line-height: 1.5;
  --line-height-tight: 1.2;

  /* Interaction */
  --touch-target: 44px;
  --focus-ring-width: 3px;
  --transition-fast: 120ms ease-out;

  /* Layout */
  --side-panel-width: 22rem;
  --content-max-width: 80rem;
}

/* Dark colours: the system setting, unless the page forces the light theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-surface: #111418;
    --color-surface-raised: #1c2128;
    --color-surface-sunken: #0b0d10;
    --color-text: #e6e8eb;
    --color-text-muted: #a7afba;
    --color-text-inverse: #111418;
    --color-border: #6b7480;
    --color-accent: #7aa7ff;
    --color-accent-contrast: #111418;
    --color-focus: #7aa7ff;
    --color-danger: #ff7b72;

    --board-square-light: #c9b48c;
    --board-square-dark: #8a6640;
    --board-coordinate: #2b2116;

    --label-best: #4ac26b;
    --label-good: #3fc1c9;
    --label-inaccuracy: #e3b341;
    --label-mistake: #f0883e;
    --label-blunder: #ff7b72;
  }
}

/* The same dark colours when the page explicitly selects the dark theme. */
:root[data-theme="dark"] {
  --color-surface: #111418;
  --color-surface-raised: #1c2128;
  --color-surface-sunken: #0b0d10;
  --color-text: #e6e8eb;
  --color-text-muted: #a7afba;
  --color-text-inverse: #111418;
  --color-border: #6b7480;
  --color-accent: #7aa7ff;
  --color-accent-contrast: #111418;
  --color-focus: #7aa7ff;
  --color-danger: #ff7b72;

  --board-square-light: #c9b48c;
  --board-square-dark: #8a6640;
  --board-coordinate: #2b2116;

  --label-best: #4ac26b;
  --label-good: #3fc1c9;
  --label-inaccuracy: #e3b341;
  --label-mistake: #f0883e;
  --label-blunder: #ff7b72;
}