/* Design tokens. Everything visual hangs off these, so a new theme is one block. */
:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  --step-3: clamp(2.2rem, 1.7rem + 2.6vw, 4rem);
  --step-4: clamp(2.8rem, 2rem + 4.5vw, 6.2rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 7rem;

  --radius: 10px;
  --measure: 66ch;
  --wide: 1180px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Dark is the default: it suits the game-like accents. */
  --bg: #0d0e14;
  --bg-raised: #151722;
  --bg-sunken: #090a0f;
  --line: #262a3a;
  --text: #e8e9f0;
  --text-muted: #9a9db2;
  --accent: #7cf7c4;      /* phosphor mint: "engineer" */
  --accent-2: #ff7ab6;    /* hot pink: "creative" */
  --accent-3: #ffd166;    /* coin gold: highlights, XP */
  --accent-ink: #07130e;
  --glow: 0 0 0.6em color-mix(in srgb, var(--accent) 45%, transparent);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f6f4ee;
  --bg-raised: #ffffff;
  --bg-sunken: #ece9df;
  --line: #d9d4c5;
  --text: #16171d;
  --text-muted: #5b5d6b;
  --accent: #0b8a5f;
  --accent-2: #c2185b;
  --accent-3: #a86b00;
  --accent-ink: #ffffff;
  --glow: none;
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f4ee;
    --bg-raised: #ffffff;
    --bg-sunken: #ece9df;
    --line: #d9d4c5;
    --text: #16171d;
    --text-muted: #5b5d6b;
    --accent: #0b8a5f;
    --accent-2: #c2185b;
    --accent-3: #a86b00;
    --accent-ink: #ffffff;
    --glow: none;
    color-scheme: light;
  }
}