/* Cricket Scores — design tokens.
 *
 * The single place the appearance is defined. Every other stylesheet consumes
 * these names and never a raw colour, so light and dark are two mappings of one
 * system rather than two separate designs.
 *
 * Layering:
 *   1. Raw palette      — literal colours, never used directly by a component.
 *   2. Semantic tokens  — what a component actually asks for (--surface,
 *                         --border, --accent-text, …). Mapped once per mode.
 *   3. Scales           — type, space, radius, shadow, elevation, motion.
 *
 * Contrast contract (WCAG 2.1, measured, see reports/THEME-AUDIT-2026-10-10.md):
 * every `*-text` token clears 4.5:1 against the surfaces it is allowed on, every
 * `on-*` token clears 4.5:1 against its matching fill, and every non-text
 * accent/indicator clears 3:1. Components must use the companion token for
 * text-on-fill; there is no hardcoded colour anywhere in the component layer.
 *
 * Dark is mapped under both `[data-theme="dark"]` and the system preference.
 * The duplication is deliberate: it is what lets a no-JavaScript visitor keep
 * their system appearance, and keeping the two mappings side by side is how they
 * stay identical.
 */

/* ------------------------------------------------------------------ 1. raw */

:root {
  /* Neutral ink — text and light-theme structure */
  --c-ink-900: #101424;
  --c-ink-600: #4c5673;
  --c-ink-500: #5f6a86;

  /* Paper — light-theme surfaces (warm white is the product identity) */
  --c-paper-0: #ffffff;
  --c-paper-50: #f7f6f2;
  --c-paper-100: #efeee8;

  /* Navy — dark-theme surfaces */
  --c-navy-900: #080d1a;
  --c-navy-800: #111827;
  --c-navy-700: #182034;

  /* Slate — text on navy */
  --c-slate-100: #eef2f8;
  --c-slate-400: #9aa6bf;
  --c-slate-500: #8693ad;

  /* Emerald — live play, primary action, positive state */
  --c-emerald-700: #0a6c45;
  --c-emerald-600: #0b7f50;
  --c-emerald-400: #34c98d;
  --c-emerald-300: #6dd6a5;

  /* Amber — interruptions, breaks, provisional data */
  --c-amber-800: #8a5a12;
  --c-amber-600: #b5731a;
  --c-amber-500: #d98324;
  --c-amber-300: #f0b969;

  /* Red — failures and destructive actions */
  --c-red-700: #a3271c;
  --c-red-500: #c2452f;
  --c-red-300: #ff9a86;

  /* Blue — focus only. Deliberately outside the brand hue so the ring is never
     confused with the accent that marks live play. */
  --c-blue-700: #1050c8;
  --c-blue-300: #9dc0ff;
}

/* ------------------------------------------------- 2. semantic: light mode */

:root {
  color-scheme: light;

  --bg: var(--c-paper-50);
  --surface: var(--c-paper-0);
  --surface-sunken: var(--c-paper-100);
  --surface-hover: #f2f1ec;
  --surface-active: #ebeae3;

  --border: #e0e0d8;
  --border-strong: #c9c9bf;

  --text: var(--c-ink-900);
  --text-muted: var(--c-ink-600);
  --text-subtle: var(--c-ink-500);

  --accent: var(--c-emerald-600);
  --accent-hover: var(--c-emerald-700);
  --accent-text: var(--c-emerald-700);
  --accent-soft: rgba(14, 138, 88, 0.1);
  --accent-border: rgba(11, 127, 80, 0.35);
  --on-accent: #ffffff;
  --on-accent-hover: #ffffff;

  --warn: var(--c-amber-500);
  --warn-text: var(--c-amber-800);
  --warn-soft: rgba(217, 131, 36, 0.12);
  --warn-border: rgba(217, 131, 36, 0.38);

  --danger: var(--c-red-500);
  --danger-text: var(--c-red-700);
  --danger-soft: rgba(194, 69, 47, 0.1);
  --danger-border: rgba(194, 69, 47, 0.35);

  --live: var(--c-emerald-600);
  --break: var(--c-amber-600);
  --focus: var(--c-blue-700);

  --shadow-1: 0 1px 2px rgba(16, 20, 36, 0.06), 0 1px 3px rgba(16, 20, 36, 0.06);
  --shadow-2: 0 2px 4px rgba(16, 20, 36, 0.06), 0 8px 20px rgba(16, 20, 36, 0.08);
  --shadow-3: 0 12px 32px rgba(16, 20, 36, 0.14);
}

/* -------------------------------------------------- 2. semantic: dark mode */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: var(--c-navy-900);
    --surface: var(--c-navy-800);
    --surface-sunken: #0b1120;
    --surface-hover: var(--c-navy-700);
    --surface-active: #1d2843;

    --border: #232c42;
    --border-strong: #35405c;

    --text: var(--c-slate-100);
    --text-muted: var(--c-slate-400);
    --text-subtle: var(--c-slate-500);

    --accent: var(--c-emerald-400);
    --accent-hover: var(--c-emerald-300);
    --accent-text: var(--c-emerald-300);
    --accent-soft: rgba(52, 201, 141, 0.14);
    --accent-border: rgba(52, 201, 141, 0.42);
    --on-accent: #04231a;
    --on-accent-hover: #04231a;

    --warn: var(--c-amber-300);
    --warn-text: var(--c-amber-300);
    --warn-soft: rgba(240, 185, 105, 0.14);
    --warn-border: rgba(240, 185, 105, 0.38);

    --danger: var(--c-red-300);
    --danger-text: var(--c-red-300);
    --danger-soft: rgba(255, 154, 134, 0.14);
    --danger-border: rgba(255, 154, 134, 0.38);

    --live: var(--c-emerald-300);
    --break: var(--c-amber-300);
    --focus: var(--c-blue-300);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.55);
  }
}

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

  --bg: var(--c-navy-900);
  --surface: var(--c-navy-800);
  --surface-sunken: #0b1120;
  --surface-hover: var(--c-navy-700);
  --surface-active: #1d2843;

  --border: #232c42;
  --border-strong: #35405c;

  --text: var(--c-slate-100);
  --text-muted: var(--c-slate-400);
  --text-subtle: var(--c-slate-500);

  --accent: var(--c-emerald-400);
  --accent-hover: var(--c-emerald-300);
  --accent-text: var(--c-emerald-300);
  --accent-soft: rgba(52, 201, 141, 0.14);
  --accent-border: rgba(52, 201, 141, 0.42);
  --on-accent: #04231a;
  --on-accent-hover: #04231a;

  --warn: var(--c-amber-300);
  --warn-text: var(--c-amber-300);
  --warn-soft: rgba(240, 185, 105, 0.14);
  --warn-border: rgba(240, 185, 105, 0.38);

  --danger: var(--c-red-300);
  --danger-text: var(--c-red-300);
  --danger-soft: rgba(255, 154, 134, 0.14);
  --danger-border: rgba(255, 154, 134, 0.38);

  --live: var(--c-emerald-300);
  --break: var(--c-amber-300);
  --focus: var(--c-blue-300);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------- 3. scales */

:root {
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  /* Numerals get their own stack so a score never renders in a proportional
     face: 12.4 must not read as 12.4 in a column of 8.1. */
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --fs-1: 0.8125rem; /* 13px — metadata floor */
  --fs-2: 0.875rem;  /* 14px — table cells, captions */
  --fs-3: 1rem;      /* 16px — body */
  --fs-4: 1.0625rem; /* 17px — lede, card title */
  --fs-5: 1.25rem;   /* 20px — section heading */
  --fs-6: 1.5rem;    /* 24px — page heading, match score */
  --fs-7: 1.875rem;  /* 30px — display */

  --fw-normal: 400;
  --fw-medium: 550;
  --fw-bold: 680;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.55;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  --sp-8: 3rem;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  /* Control geometry, so a button, an input and a select always line up. */
  --control-h: 2.375rem;
  --control-h-sm: 2rem;
  --hit: 2.75rem;

  --maxw: 76rem;
  --rail: 16rem;
  --topbar-h: 3.5rem;
  /* The label column of a stacked card table, and the glyph-to-label gap inside
     a pill, badge or status. Both are geometry rather than steps on `--sp`, but
     they are named so no component carries a bare length. */
  --label-col: 6.5rem;
  --gap-tight: 0.4rem;

  --dur-fast: 120ms;
  --dur: 180ms;
  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
}