/* ============================================================================
   ScoreHub design tokens — "chalk on slate" scoreboard.
   Personality lives in colour, tabular numerals and motion, so the app stays
   fully offline with system fonts (no runtime font fetches).
   ========================================================================== */

:root {
  /* Type: strong system stacks. Numerals are the hero, so scores use a
     monospaced stack with tabular figures for a ledger-like alignment. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu,
    "Helvetica Neue", Arial, sans-serif;
  --font-score: "SF Mono", "SFMono-Regular", ui-monospace, "Cascadia Mono",
    "Roboto Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;

  /* Type scale (fluid, mobile-first) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.25rem;
  --fs-score: clamp(2.25rem, 9vw, 3.5rem);

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

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.22);
  --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.35);

  --tap: 48px;                 /* minimum touch target */
  --header-h: 56px;
  --content-max: 720px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 200ms;

  /* Player "coloured chalk" — distinct and legible on slate and paper. */
  --p1: #E0A82E;  /* brass */
  --p2: #3DDC97;  /* mint */
  --p3: #4EA8DE;  /* sky */
  --p4: #F25F5C;  /* coral */
  --p5: #B892FF;  /* violet */
  --p6: #FF9F45;  /* amber */
  --p7: #6FE3D3;  /* teal */
  --p8: #F49AC1;  /* rose */
}

/* Dark — the default "slate" scoreboard */
[data-theme="dark"] {
  --bg: #10161A;
  --surface: #171F24;
  --surface-2: #1E282E;
  --surface-3: #26333A;
  --line: #2A363C;
  --line-strong: #3A4A52;
  --text: #EAF2F1;
  --text-muted: #93A6A3;
  --text-faint: #6B7C7A;
  --accent: #E0A82E;          /* brass pencil */
  --accent-ink: #10161A;
  --win: #3DDC97;
  --danger: #F25F5C;
  --overlay: rgba(6, 10, 12, 0.66);
  color-scheme: dark;
}

/* Light — cool "card table" paper, deliberately not the warm-cream default */
[data-theme="light"] {
  --bg: #EAEEED;
  --surface: #FBFCFB;
  --surface-2: #F1F4F3;
  --surface-3: #E5EAE9;
  --line: #D3DBDA;
  --line-strong: #BAC5C3;
  --text: #14201E;
  --text-muted: #566461;
  --text-faint: #849491;
  --accent: #B7791F;          /* darker brass for contrast on paper */
  --accent-ink: #FFFFFF;
  --win: #1F9E6B;
  --danger: #D64541;
  --overlay: rgba(20, 32, 30, 0.42);
  color-scheme: light;
}

/* Large-text accessibility mode scales the root. */
html[data-large="on"] { font-size: 118%; }

/* Respect reduced-motion unless the user forces animations on. */
@media (prefers-reduced-motion: reduce) {
  html:not([data-animations="on"]) * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
html[data-animations="off"] * {
  animation-duration: 0.001ms !important;
  transition-duration: 0.001ms !important;
}