:root {
  color-scheme: light;

  /* Calm, high-contrast game palette: neutral paper, charcoal, and muted green. */
  --color-canvas: #ffffff;
  --color-canvas-deep: #e9ede9;
  --color-surface: #ffffff;
  --color-surface-translucent: rgb(255 255 255 / 96%);
  --color-ink: #202421;
  --color-ink-muted: #505852;
  --color-ink-faint: #626a64;
  --color-line: #343a36;
  --color-accent: #427357;
  --color-accent-strong: #2f6246;
  --color-accent-wash: #e8f0ea;
  --color-sky: #427357;
  --color-sky-strong: #2f6246;
  --color-sky-wash: #eef3ef;
  --color-gold: #d4aa35;
  --color-gold-ink: #3d2600;
  --color-gold-wash: #f6f1e3;
  --color-success: #1f704d;
  --color-success-ink: #154a35;
  --color-success-line: #1f704d;
  --color-success-wash: #e1f3e8;
  --color-error: #b3261e;
  --color-error-wash: #fbe7e5;
  --color-disabled-ink: #69716b;
  --color-placeholder: #69716b;
  --color-focus: #075fcc;
  --color-focus-ring: rgb(7 95 204 / 24%);
  --color-backdrop: rgb(25 29 26 / 68%);
  --color-shadow: rgb(22 29 24 / 14%);

  /* Typography */
  --font-interface: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-editorial: Charter, "Bitstream Charter", Georgia, "Times New Roman", serif;
  --font-size-2xs: 0.72rem;
  --font-size-xs: 0.78rem;
  --font-size-sm: 0.84rem;
  --font-size-md: 0.9rem;
  --font-size-lg: 0.96rem;
  --font-size-score: clamp(2rem, 8vw, 3rem);
  --font-size-brand: 0.95rem;
  --font-size-body: 1rem;
  --font-size-prose: 1.25rem;
  --font-size-heading: 2rem;
  --font-size-icon: 1.6rem;
  --font-size-input: clamp(1.3rem, 3vw, 1.75rem);
  --font-size-display: clamp(2.6rem, 6vw, 4.8rem);
  --font-size-section: clamp(1.85rem, 4vw, 2.9rem);
  --font-size-display-mobile: clamp(2.35rem, 12vw, 3.1rem);
  --line-tight: 1.05;
  --line-prose: 1.45;
  --line-interface: 1.6;
  --weight-medium: 600;
  --tracking-label: 0.08em;
  --tracking-eyebrow: 0.12em;

  /* Spacing */
  --space-1: 4px;
  --space-half: 2px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --page-gutter: 20px;
  --page-gutter-mobile: 14px;

  /* Shape and controls */
  --radius-control: 8px;
  --radius-token: 6px;
  --radius-round: 999px;
  --control-height: 48px;
  --control-height-primary: 58px;
  --editor-min-height: 104px;
  --editor-max-height: 260px;
  --border-subtle: 1px solid var(--color-line);
  --border-strong: 2px solid var(--color-ink);
  --border-success: 2px solid var(--color-success-line);
  --shadow-panel: 0 2px 10px var(--color-shadow);
  --shadow-panel-mobile: 0 1px 6px var(--color-shadow);
  --shadow-modal: 0 18px 50px var(--color-shadow);
  --shadow-control: 0 1px 2px var(--color-shadow);
  --shadow-token: 0 1px 2px var(--color-shadow);
  --shadow-focus: 0 0 0 4px var(--color-focus-ring);
  --transition-fast: 140ms ease;
  --line-annotated: 2.05;

  /* Layout */
  --content-wide: 1120px;
  --content-game: 1120px;
  --content-copy: 680px;
  --modal-width: 540px;

  /* Backward-compatible semantic aliases used by existing components. */
  --paper: var(--color-canvas);
  --paper-deep: var(--color-canvas-deep);
  --white: var(--color-surface);
  --ink: var(--color-ink);
  --muted: var(--color-ink-muted);
  --line: var(--color-line);
  --accent: var(--color-accent);
  --accent-dark: var(--color-accent-strong);
  --success: var(--color-success);
  --success-pale: var(--color-success-wash);
  --error: var(--color-error);
  --error-pale: var(--color-error-wash);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #111512;
  --color-canvas-deep: #282e29;
  --color-surface: #1a1f1b;
  --color-surface-translucent: rgb(26 31 27 / 97%);
  --color-ink: #f1f4f1;
  --color-ink-muted: #bdc5bf;
  --color-ink-faint: #aab3ac;
  --color-line: #7e8981;
  --color-accent: #79bd91;
  --color-accent-strong: #91cca5;
  --color-accent-wash: #21382a;
  --color-sky: #79bd91;
  --color-sky-strong: #91cca5;
  --color-sky-wash: #242e27;
  --color-gold: #e6c45b;
  --color-gold-ink: #211900;
  --color-gold-wash: #342f20;
  --color-success: #88d3a2;
  --color-success-ink: #e2f7e9;
  --color-success-line: #88d3a2;
  --color-success-wash: #20402b;
  --color-error: #ffb4ab;
  --color-error-wash: #512522;
  --color-disabled-ink: #abb4ad;
  --color-placeholder: #abb4ad;
  --color-focus: #9ec5ff;
  --color-focus-ring: rgb(158 197 255 / 35%);
  --color-backdrop: rgb(0 0 0 / 76%);
  --color-shadow: rgb(0 0 0 / 44%);
  --shadow-token: 0 1px 2px var(--color-shadow);
  --shadow-panel: 0 2px 12px var(--color-shadow);
  --shadow-panel-mobile: 0 1px 8px var(--color-shadow);
  --shadow-modal: 0 18px 54px var(--color-shadow);
}