/* =============================================================================
   tokens.css — the design system's only source of colour, type, spacing,
   corners, elevation and motion (spec §4). Light values on :root; dark values
   under :root[data-theme='dark'], which the boot script sets before the first
   paint. Everything else uses these roles, never a literal colour —
   scripts/css-contract.test.ts holds that line and checks the contrast.
   ============================================================================= */
@layer tokens {
  :root {
    color-scheme: light;

    --bg: #F4F6FA;
    --surface: #FFFFFF;
    --surface-2: #EEF2F8;
    --line: #E2E8F2;
    --line-strong: #7D8AA5;
    --text: #0B1428;
    --muted: #56637F;
    --primary: #1D4ED8;
    /* A chart's line (a game review's win chances): validated for lightness, chroma and 3:1 on the surface (dataviz). */
    --chart-line: #1D4ED8;
    --primary-hover: #1E40AF;
    --on-primary: #FFFFFF;
    --focus: #1D4ED8;
    --good: #15803D;
    --warn: #B45309;
    --bad: #C81E1E;
    --on-bad: #FFFFFF;
    --gold: #F59E0B;
    --electric: #38BDF8;
    /* Самбар's one series: checked against this theme's surface (lightness band, chroma, 3:1). */
    --chart-1: #1D4ED8;
    --scrim: rgba(7, 13, 27, 0.55);
    --primary-soft: rgba(29, 78, 216, 0.10);
    --bad-soft: rgba(200, 30, 30, 0.10);
    --good-soft: rgba(21, 128, 61, 0.12);

    /* The sidebar and the phone tab bar are ink in both themes. */
    --side-bg: #070D1B;
    --side-text: #AFC0DD;
    --side-active-bg: rgba(56, 189, 248, 0.14);
    --side-active-text: #FFFFFF;
    --side-line: rgba(255, 255, 255, 0.07);
    --side-focus: #38BDF8;

    --shadow-1: 0 1px 2px rgba(11, 20, 40, 0.06), 0 8px 24px -12px rgba(11, 20, 40, 0.18);
    --shadow-2: 0 24px 60px -24px rgba(11, 20, 40, 0.35);
    --shadow-drag: rgba(0, 0, 0, 0.35);

    /* Arrows and circles drawn on boards (board/shapes.js). */
    --shape-green: rgba(21, 128, 61, 0.82);
    --shape-red: rgba(200, 30, 30, 0.82);
    --shape-blue: rgba(29, 78, 216, 0.82);
    --shape-yellow: rgba(234, 179, 8, 0.88);
    /* Behind the site's piece images off a board (the set-up tray): light in both themes — Black's pieces are black. */
    --piece-ground: #DCE5F3;

    --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-num: 'Inter', 'Nunito', system-ui, sans-serif;
    --font-chess: 'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', 'DejaVu Sans', system-ui, sans-serif;   /* the figurines ♔♕♖♗♘ */
    --fs-12: 0.75rem;
    --fs-13: 0.8125rem;
    --fs-15: 0.9375rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-30: 1.875rem;
    --fs-36: 2.25rem;
    --fw-body: 400;
    --fw-bold: 700;
    --fw-heavy: 800;
    --lh: 1.45;
    --lh-tight: 1.2;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 48px;
    --sp-10: 64px;

    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-pill: 999px;

    --control-h: 44px;
    --control-h-sm: 36px;
    --dur-fast: 120ms;
    --dur: 200ms;
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

    --side-w: 232px;
    --rail-w: 72px;
    --top-h: 60px;
    --tabbar-h: 64px;
  }

  :root[data-theme='dark'] {
    color-scheme: dark;

    --bg: #070D1B;
    --surface: #0F1B33;
    --surface-2: #0B1428;
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: #5C6B8C;
    --text: #E6ECF8;
    --muted: #8C9BBF;
    --primary: #38BDF8;
    --chart-line: #1E9BE0;
    --primary-hover: #7DD3FC;
    --chart-1: #4F8EF7;
    --on-primary: #04121F;
    --focus: #38BDF8;
    --good: #34D399;
    --warn: #FBBF24;
    --bad: #F87171;
    --on-bad: #07090F;
    --gold: #FBBF24;
    --scrim: rgba(0, 0, 0, 0.6);
    --primary-soft: rgba(56, 189, 248, 0.12);
    --bad-soft: rgba(248, 113, 113, 0.12);
    --good-soft: rgba(52, 211, 153, 0.12);
    --side-bg: #050A15;
    --shadow-1: 0 12px 30px -16px rgba(0, 0, 0, 0.8);
    --shadow-2: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
    --shadow-drag: rgba(0, 0, 0, 0.6);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-fast: 0ms;
      --dur: 0ms;
    }
  }
}