/* Design tokens. Colour tokens are overwritten at runtime by theme.js from
   the user's primary colour; these are the defaults (primary #0f1421). */
:root {
  --bg: #0b0f17;
  --panel: #151a24;
  --surface: #0f1421;
  --border: #2a3348;
  --ink: #e8ecf2;
  --muted: #a8b2c3;
  --accent: #58b4ff;
  --glow: #58b4ff44;
  --danger: #e05252;
  --ok: #3fb67a;

  /* Stage background */
  --bg-blur: 5px;
  --vignette-strength: 0.64;
  --vignette-size: 0.7;

  /* Card surface: --card-alpha = how much surface colour remains,
     --card-opacity = border/shadow strength (0–1) */
  --card-alpha: 100%;
  --card-opacity: 1;

  /* Sizing (thumb size is user-adjustable) */
  --thumb-size: 56px;
  --thumb-gap: calc(var(--thumb-size) / 6);
  --thumb-radius: calc(var(--thumb-size) / 4.5);
  --radius-panel: 14px;
  --radius-control: 10px;
  --edge: 14px;
  --stage-pad-x: 16px;
  --stage-pad-y: 44px;

  /* Motion */
  --anim: 220ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --shadow-float: 0 6px 18px #000a, inset 0 1px 0 #ffffff10;
  --shadow-pop: 0 12px 32px #000c, inset 0 1px 0 #ffffff12;
  --font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Noto Sans', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --anim: 0ms; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}