/* StumpVision design tokens: single source of truth for the scorer app, admin panel and viewer pages.
   Palette: slate neutrals + cricket green (derived from the ui-ux-pro-max design-system output).
   Themes: auto (OS) | light | dark | sun (max contrast for outdoor glare). Set on <html data-theme="...">.
   Breakpoints (use min-width media queries, mobile-first): 600px (large phone) | 768px (tablet) | 1024px (desktop) | 1440px (wide).
   OUTDOOR READABILITY: default light theme targets >= 7:1 for score text, borders are strong (#6b7a90), and chips/buttons use solid fills with white/black text; the Sunlight theme is pure black-on-white with 2px borders. Never convey state by colour alone.
   Spacing scale: 4px rhythm (--s-1..--s-8). Touch targets >= 44px. Body text >= 16px. */
:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #e6ebf0;
  --ink: #0a1020;
  --muted: #334155;
  --line: #6b7a90;
  --accent: #05603a;
  --accent-ink: #ffffff;
  --accent-soft: #d3f0e0;
  --danger: #b71c1c;
  --danger-soft: #fde8e8;
  --success: #1b8a3e;
  --warn: #8a5000;
  --warn-soft: #fff1d6;
  --info: #0d47a1;
  --c-four: #0d47a1;
  --c-six: #6a1b9a;
  --c-wicket: #b71c1c;
  --c-extra: #8a5000;
  --scrim: rgba(15, 23, 42, .55);
  --focus: #1d4ed8;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(15,23,42,.06), 0 4px 14px rgba(15,23,42,.07);
  --shadow-lg: 0 12px 40px rgba(15,23,42,.22);
  --border-w: 1px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --gutter: 16px;
  --content-max: 1200px;
  --sidebar-w: 248px;

  --z-nav: 20; --z-sticky: 30; --z-drawer: 60; --z-modal: 70; --z-toast: 80;
  --t-fast: 150ms; --t-base: 220ms; --ease-out: cubic-bezier(.22, 1, .36, 1);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
@media (min-width: 768px)  { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]), :root[data-theme="auto"] {
    color-scheme: dark;
    --bg: #0b1220; --surface: #162033; --surface-2: #1f2b42; --ink: #f1f5f9; --muted: #a3b2c6; --line: #5a6d8c;
    --accent: #2fcf80; --accent-ink: #04140c; --accent-soft: #123a2a;
    --danger: #ff7b7b; --danger-soft: #3b1a1a; --success: #4ade80; --warn: #fbbf24; --warn-soft: #3a2c0a; --info: #7db8ff;
    --c-four: #7db8ff; --c-six: #d8a8ee; --c-wicket: #ff7b7b; --c-extra: #fbbf24;
    --scrim: rgba(0,0,0,.65); --focus: #93c5fd;
    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.35); --shadow-lg: 0 12px 40px rgba(0,0,0,.6);
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220; --surface: #162033; --surface-2: #1f2b42; --ink: #f1f5f9; --muted: #a3b2c6; --line: #5a6d8c;
  --accent: #2fcf80; --accent-ink: #04140c; --accent-soft: #123a2a;
  --danger: #ff7b7b; --danger-soft: #3b1a1a; --success: #4ade80; --warn: #fbbf24; --warn-soft: #3a2c0a; --info: #7db8ff;
  --c-four: #7db8ff; --c-six: #d8a8ee; --c-wicket: #ff7b7b; --c-extra: #fbbf24;
  --scrim: rgba(0,0,0,.65); --focus: #93c5fd;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.35); --shadow-lg: 0 12px 40px rgba(0,0,0,.6);
}
/* Sunlight: maximum contrast, no gradients or shadows, thick borders */
:root[data-theme="sun"] {
  color-scheme: light;
  --bg: #ffffff; --surface: #ffffff; --surface-2: #ececec; --ink: #000000; --muted: #1f1f1f; --line: #000000;
  --accent: #000000; --accent-ink: #ffffff; --accent-soft: #e0e0e0;
  --danger: #b00000; --danger-soft: #ffffff; --success: #006400; --warn: #7a4a00; --warn-soft: #ffffff; --info: #0000b0;
  --c-four: #0000b0; --c-six: #5a0070; --c-wicket: #b00000; --c-extra: #7a4a00;
  --scrim: rgba(0,0,0,.75); --focus: #000000;
  --shadow: none; --shadow-lg: none; --border-w: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}