/* NEON — the shipped look.
 *
 * A screen, not a lit table. Near-black ground, three saturated inks that read
 * as lit from inside, and one green that still only ever means "you can act
 * here". The board is the only source of light on the page, which is why the
 * chrome around it is almost black and why a freeze — the brightest thing that
 * happens in twenty seconds — lands.
 *
 * Committed to one appearance, like the theme it replaced: the palette is not a
 * dark mode of a light design, so it is repeated verbatim under both the
 * prefers-color-scheme and [data-theme] selectors. An explicit light toggle
 * must not hand back a half-inverted board. */

@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/themes/neon/space-grotesk-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/themes/neon/space-grotesk-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/themes/neon/space-grotesk-700.woff2') format('woff2');
}

:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --ground: #05050c;
  --panel: #0a0a16;
  --panel-2: #15152b;
  --ink: #eaf2ff;
  --ink-dim: #7b83a8;
  --rule: #0a0a16;
  --rule-soft: #26264d;
  --tile: #1b1b36;
  /* One green, and it means exactly one thing: you can act here. */
  --accent: #2bff9b;
  --accent-ink: #04140c;
  --good: #2bff9b;
  /* Amber is for an action that is about to waste something. */
  --warn: #ffd23d;

  /* One hue per PIECE. Shape still carries the meaning on its own. */
  --cr-king: #ffe14d;
  --cr-archer: #ff2e88;
  --cr-knight: #25e3ff;
  /* Lit from inside. The canvas reads this and blurs behind everything it
     draws; it is the single number that makes this look what it is. */
  --cr-glow: 22;
  --cr-edge: #05050c;
  --cr-rock: .5;

  --display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --ui: 'Space Grotesk', ui-sans-serif, -apple-system, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --radius: 14px;
  --rule-w: 1.5px;
  --shadow-hard: none;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }

body { background: var(--ground); color: var(--ink); }

#wordmark { letter-spacing: .1em; }
#wordmark span { color: var(--accent); text-shadow: 0 0 18px var(--accent); }

/* A DISABLED PRIMARY BUTTON MUST NOT LOOK PRESSABLE — and here it must also
   stop glowing, because glow is the whole signal that a thing is live. */
.btn:disabled {
  background: var(--panel-2); color: var(--ink-dim);
  border-color: var(--rule-soft); cursor: default; box-shadow: none;
}
.btn:disabled:active { transform: none; }
.btn { font-weight: 500; letter-spacing: .01em; box-shadow: 0 0 20px -6px var(--accent); }
.btn.ghost { box-shadow: none; }