/* tokens.css - whiteboard classroom rebuild 2026-09-17.
 * Component CSS in entrypoints/workspace/style.css uses only these tokens.
 * Lifted from docs/design/rebuild-2026-09-17/mock-shared.css.
 */
/* ===== tokens.css (the line's names, this product's values). Component CSS below uses
   only these tokens; the implementer lifts this block into tokens.css unchanged.
   World: a classroom whiteboard after the teacher has drawn the teams. Warm neutral room,
   board-white plates, hairlines for every rule, one accent (a red marker).
   Sector tints --m1..--m6 are not a second accent: they are the only way a wheel can say
   "this slice is not that slice", and they carry no meaning off the wheel. ===== */
:root {
  color-scheme: light;
  --background: #ebe5d9;        /* the room: warm neutral ground */
  --foreground: #221f1a;        /* marker black */
  --card: #f6f2ea;              /* raised chrome on the ground: strip, rail */
  --card-foreground: #221f1a;
  --muted: #e0d9cb;             /* hover fills, segment track, chip ground */
  --muted-foreground: #6a6255;  /* labels, hints, counts */
  --board: #fdfcfa;             /* the whiteboard: plates, fields */
  --board-ink: #1c1a16;         /* names written on the board */
  --rule: #9a9284;              /* drawn hairline: sector edges, pointer */
  --primary: #af1f45;           /* the one accent: primary export, active division mode */
  --primary-foreground: #ffffff;
  --primary-hover: #8d1738;
  --border: #d5ccbb;            /* hairline separators, field borders, plate edge */
  --ring: var(--primary);
  --chip: #e0d9cb;
  --chip-ink: #585043;
  --m1: #f2d7d7;                /* the marker set, pale enough to write on */
  --m2: #d7e1f1;
  --m3: #d8e9d8;
  --m4: #f5e3cc;
  --m5: #e3daef;
  --m6: #d2e7e5;
  --radius: 10px;
  --radius-sm: 7px;
  --radius-xs: 5px;
  --border-width: 1px;
  --outline-width: 2px;
  --destructive: #b3261e;
  --destructive-foreground: #ffffff;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-base: 14px;
  --text-lg: 16px;
  --text-sm: 12px;
  --text-xs: 12px;
  --text-count: 13px;
  --text-name: 26px;            /* ONE size across every plate, set by the longest name */
  --name-lh: 1.35;
  --text-plate: 13px;           /* the plate's own title */
  --text-winner: 34px;
  --text-sector: 12px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --strip-top: 48px;
  --rail-w: 360px;
  --rail-pad: 18px;
  --viewbar-h: 44px;
  --stage-pad: 20px;
  --plate-min: 420px;           /* two plates across the stage at 1440 */
  --plate-pad: 16px;
  --plate-gap: 14px;
  --control-h: 30px;
  --btn-h: 36px;
  --target-min: 44px;
  --field-h: 32px;
  --icon-glyph: 14px;
  --mark: 20px;
  --mark-radius: 5px;
  --check: 15px;
  --picked-w: 236px;
  --duration-fast: 120ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --shadow-raised: 0 1px 2px rgb(34 31 26 / .13);
}
/* CLOD palette and sizing layered on the original token contract. */
:root {
  color-scheme: light;
  --background: #eef0fa;
  --foreground: #272747;
  --card: #ffffff;
  --card-foreground: #272747;
  --muted: #e8eaf6;
  --muted-foreground: #62647e;
  --board: #ffffff;
  --board-ink: #272747;
  --rule: #aaaecb;
  --primary: #4954c8;
  --primary-foreground: #ffffff;
  --primary-hover: #3944b3;
  --border: #dce0ef;
  --ring: var(--primary);
  --chip: #eef0fa;
  --chip-ink: #4a4f79;
  --m1: #e2e7fb;
  --m2: #f5dfe5;
  --m3: #ecedc5;
  --m4: #d8eeef;
  --m5: #e9dff4;
  --m6: #f4e6d3;
  --radius: 18px;
  --radius-sm: 10px;
  --radius-xs: 7px;
  --destructive: #a82d4e;
  --font-sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-base: 14px;
  --text-lg: 16px;
  --text-sm: 12px;
  --text-xs: 12px;
  --text-name: 21px;
  --text-winner: 28px;
  --text-plate: 13px;
  --text-sector: 15px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --border-width: 1px;
  --target-compact: 28px;
  --icon: 18px;
  --duration-fast: 120ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --surface-field: #f8f9fd;
  --surface-result: #f8f9fe;
  --surface-track: #f0f2fa;
  --surface-hover: #ffffff80;
  --badge-fill: #ffffffb8;
  --disabled-bg: #e2e5f4;
  --disabled-fg: #737997;
  --error-background: #fcecf1;
  --error-border: #edcada;
  --storage-background: #fbeaf0;
  --stale-background: #f2edcf;
  --stale-foreground: #635922;
  --result-shadow: #d7dbed80;
  --plate-rule: #eceef6;
  --wheel-shadow: #dce0f1;
  --shadow-raised: 0 2px 5px #2425520c;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #17150f;
    --foreground: #ece7db;
    --card: #211e17;
    --card-foreground: #ece7db;
    --muted: #2c281f;
    --muted-foreground: #a49b8a;
    --board: #24211a;
    --board-ink: #f2ece0;
    --rule: #766d5e;
    --primary: #ff93ab;
    --primary-foreground: #3d0418;
    --primary-hover: #ffb3c4;
    --border: #383327;
    --chip: #2c281f;
    --chip-ink: #bcb2a0;
    --m1: #3d2a2c;
    --m2: #25303f;
    --m3: #25352a;
    --m4: #3b3225;
    --m5: #312b3d;
    --m6: #23363a;
    --shadow-raised: 0 1px 2px rgb(0 0 0 / .55);
  }
}
/* The same CLOD contrast roles in the user's dark colour scheme. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #171923;
    --foreground: #eef0fc;
    --card: #242635;
    --card-foreground: #eef0fc;
    --muted: #303348;
    --muted-foreground: #b8bed7;
    --board: #242635;
    --board-ink: #eef0fc;
    --rule: #8c93b5;
    --primary: #b0baff;
    --primary-foreground: #181e45;
    --primary-hover: #c5ccff;
    --border: #4c5271;
    --chip: #303348;
    --chip-ink: #d6dcf4;
    --m1: #323e68;
    --m2: #573544;
    --m3: #454c29;
    --m4: #294b50;
    --m5: #49375c;
    --m6: #53422e;
    --destructive: #ffabc0;
    --surface-field: #1c1f2e;
    --surface-result: #1d2030;
    --surface-track: #303348;
    --surface-hover: #42475b80;
    --badge-fill: #242635b8;
    --disabled-bg: #303348;
    --disabled-fg: #b8bed7;
    --error-background: #462735;
    --error-border: #865368;
    --storage-background: #462735;
    --stale-background: #423d24;
    --stale-foreground: #eee0a5;
    --result-shadow: #10121d;
    --plate-rule: #4c5271;
    --wheel-shadow: #10121d;
  }
}

/* @pair --foreground on --background */
/* @pair --muted-foreground on --background */
/* @pair --muted-foreground on --card */
/* @pair --board-ink on --board */
/* @pair --muted-foreground on --board */
/* @pair --primary-foreground on --primary */
/* @pair --chip-ink on --chip */
/* @pair --board-ink on --m1 .. --m6 (sector labels) */
/* @pair --rule on --board (hairline, non-text) */

/* Focus ring sits ON the border (owner rule / hygiene gate), never outside it. */
:where(input, select, textarea, button, [tabindex]):focus-visible {
  outline: var(--outline-width, 2px) solid var(--ring, currentColor);
  outline-offset: calc(-1 * var(--border-width, 1px));
}
:where(input, select, textarea)[aria-invalid='true']:focus-visible {
  outline-color: var(--destructive, currentColor);
}