/* Shared design tokens -- GENERATED FILE, DO NOT EDIT.
 *
 * Source: design/tokens.json (W3C Design Tokens Community Group format).
 * Regenerate: python3 scripts/build_tokens.py
 *
 * Two surfaces consume this: the MV3 side panel (`sidepanel/panel.css`) and
 * the standalone mock room (`mockroom.css`), which `draft_app.py`
 * serves from disk at `/shared/tokens.css`. They are deliberately different
 * layouts -- 360px-floor panel vs. full-width tinkering page -- but they must
 * not be different *products*. Every color, radius, and shadow either of them
 * paints comes from the token file, so "consistent with the extension" is a
 * property of the build rather than something re-litigated per file.
 *
 * Add a token there only when multiple surfaces can use it. Layout belongs in the
 * consuming stylesheet; tokens own appearance primitives only. */

:root {
  color-scheme: light;
  --font: Carlito, Calibri, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ink: #1B1E23;
  --muted: #686E77;
  --faint: #666C75;
  --canvas: #F3F3F1;
  --panel: #FFFFFF;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --line: #EAEAE7;
  --line-strong: #C9C9C4;
  --arena: #1B1E23;
  --on-arena: #EDEDEA;
  --arena-2: #24282F;
  --on-ink: #FFFFFF;
  --on-accent: #FFFFFF;
  --orange: #B05C36;
  --orange-hover: #8A4A2B;
  --orange-soft: #F6E5DE;
  --blue: #4A6572;
  --blue-soft: #E3E9EA;
  --green: #31543C;
  --green-soft: #DFE8DE;
  --amber: #785A2F;
  --amber-soft: #F1E9D8;
  --red: #B42318;
  --red-soft: #FDECEC;
  --focus: #1B1E23;
  --green-rgb: 49 84 60;
  --red-rgb: 180 35 24;
  --pad-compact: 8px;
  --pad: 10px;
  --pad-wide: 12px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 12px;
  --shadow: 0 10px 28px rgba(27, 30, 35, .16);

  /* Motion. Every animated affordance reads its duration from one of these so
   * the reduced-motion guard below can neutralise all of them at once. */
  --motion-fast: 120ms;
  --motion: 220ms;
  --motion-slow: 420ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink: #EDEDEA;
    --muted: #9DA3AC;
    --faint: #8F96A0;
    --canvas: #17181A;
    --panel: #24282F;
    --surface: #24282F;
    --surface-raised: #24282F;
    --line: #34383F;
    --line-strong: #454A52;
    --arena: #101215;
    --on-arena: #EDEDEA;
    --arena-2: #1B1E23;
    --on-ink: #1B1E23;
    --on-accent: #1B1E23;
    --orange: #D98860;
    --orange-hover: #E6A27E;
    --orange-soft: #3A2A22;
    --blue: #8AA3AD;
    --blue-soft: #22333A;
    --green: #6FA080;
    --green-soft: #1C2E22;
    --amber: #C7A868;
    --amber-soft: #33291A;
    --red: #FDA29B;
    --red-soft: #3B1D23;
    --focus: #EDEDEA;
    --green-rgb: 111 160 128;
    --red-rgb: 253 162 155;
    --shadow: 0 10px 28px rgba(0, 0, 0, .4);
  }
}

/* The guard has to cover `animation` as well as `transition`: the draft-event
 * affordances (a player leaving the board, a recommendation changing hands)
 * are keyframed, and a transition-only reset would let them through. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion: 0ms;
    --motion-slow: 0ms;
  }

  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}