/* tokens.css — design tokens for the ManageSports console (light + dark).
   Ground/surfaces are cool slate, the single accent is court orange, semantic
   colours are separate from the accent. Theme resolution: :root is light;
   the dark block applies under prefers-color-scheme unless the user forced
   light; [data-theme="dark"] forces dark.

   Contrast contract (WCAG AA 4.5:1, checked by tests/tokens.test.js):
   --text, --muted and --faint are text colours on --surface and --surface-2;
   --good/--warning/--critical/--info carry text in the dark theme, so the dark
   blocks re-tint them (the brief's hues stay for pills, dots and borders in
   light); --accent-text sits on --accent-fill / --accent-fill-hover, and white
   sits on --critical-fill. --accent itself (#d9772b) is for non-text use only:
   focus ring, active-nav bar, soft tints, sparklines. */

:root {
  color-scheme: light;

  /* surfaces */
  --ground: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --surface-hover: #f7f8fa;
  --border: #dde1e7;
  --border-strong: #c7cdd6;
  --text: #151a21;
  --muted: #5b6572;
  --faint: #646e7d;
  --overlay: rgba(21, 26, 33, 0.45);

  /* accent: --accent for non-text use, --accent-fill behind --accent-text */
  --accent: #d9772b;
  --accent-hover: #c06622;
  --accent-soft: rgba(217, 119, 43, 0.12);
  --accent-fill: #a8561a;
  --accent-fill-hover: #93491a;
  --accent-text: #ffffff;

  /* semantic */
  --good: #2e9e6b;
  --good-soft: rgba(46, 158, 107, 0.14);
  --warning: #c9950b;
  --warning-soft: rgba(201, 149, 11, 0.16);
  --critical: #c7433d;
  --critical-fill: #c7433d;
  --critical-soft: rgba(199, 67, 61, 0.13);
  --info: #3572b0;
  --info-soft: rgba(53, 114, 176, 0.13);
  --neutral: #6b7684;
  --neutral-soft: rgba(107, 118, 132, 0.14);

  /* json syntax */
  --json-key: #3d4d63;
  --json-string: #2e7d4f;
  --json-number: #a35a15;
  --json-bool: #3572b0;
  --json-null: #646e7d;

  /* type */
  --font-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-26: 26px;
  --lh: 1.45;

  /* shape */
  --radius-card: 8px;
  --radius-control: 6px;
  --radius-pill: 999px;
  --shadow-pop: 0 6px 24px rgba(21, 26, 33, 0.12);

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

  /* layout */
  --sidebar-w: 240px;
  --topbar-h: 56px;
  --content-max: 1400px;
  --gutter: 24px;

  /* motion */
  --ease: 160ms ease;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0f141b;
    --surface: #161c25;
    --surface-2: #1c2431;
    --surface-hover: #1a2230;
    --border: #243040;
    --border-strong: #33425a;
    --text: #e6eaf0;
    --muted: #9aa5b4;
    --faint: #8b97a8;
    --overlay: rgba(5, 8, 12, 0.6);
    --accent-soft: rgba(217, 119, 43, 0.2);
    --good: #4fbf8b;
    --good-soft: rgba(46, 158, 107, 0.22);
    --warning: #d9a83a;
    --warning-soft: rgba(201, 149, 11, 0.22);
    --critical: #e8756c;
    --critical-soft: rgba(199, 67, 61, 0.22);
    --info: #6ea6de;
    --info-soft: rgba(53, 114, 176, 0.22);
    --neutral-soft: rgba(154, 165, 180, 0.18);
    --json-key: #b7c3d4;
    --json-string: #6fcf97;
    --json-number: #f0a15c;
    --json-bool: #7db2e8;
    --json-null: #8b97a8;
    --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0f141b;
  --surface: #161c25;
  --surface-2: #1c2431;
  --surface-hover: #1a2230;
  --border: #243040;
  --border-strong: #33425a;
  --text: #e6eaf0;
  --muted: #9aa5b4;
  --faint: #8b97a8;
  --overlay: rgba(5, 8, 12, 0.6);
  --accent-soft: rgba(217, 119, 43, 0.2);
  --good: #4fbf8b;
  --good-soft: rgba(46, 158, 107, 0.22);
  --warning: #d9a83a;
  --warning-soft: rgba(201, 149, 11, 0.22);
  --critical: #e8756c;
  --critical-soft: rgba(199, 67, 61, 0.22);
  --info: #6ea6de;
  --info-soft: rgba(53, 114, 176, 0.22);
  --neutral-soft: rgba(154, 165, 180, 0.18);
  --json-key: #b7c3d4;
  --json-string: #6fcf97;
  --json-number: #f0a15c;
  --json-bool: #7db2e8;
  --json-null: #8b97a8;
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.45);
}