/* Zen — the house look. Dan's pass on Hex Smash, read out of its style.css.
 *
 * This theme deliberately COMMITS to one appearance. The palette is not a dark
 * mode of a light design; it is a lit table in a dark room, and the board's
 * flat fills and 1.5px dark edges are calibrated against that ground. So the
 * warm dark lives on bare :root and is repeated verbatim under both the
 * prefers-color-scheme and the [data-theme] selectors, which is what keeps an
 * explicit toggle from handing back a half-inverted board. */

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

:root {
  --ground: #262421;
  --panel: #21201d;
  --panel-2: #2e2c28;
  --ink: #e4e1dd;
  --ink-dim: #98948e;
  --rule: #221f1c;
  --rule-soft: #3a3733;
  --tile: #4b4741;
  /* One green, and it means exactly one thing: you can act here. */
  --accent: #81b64c;
  --accent-ink: #1b1a17;
  --good: #81b64c;
  /* Amber is for an action that is about to waste something. */
  --warn: #d9a13b;

  /* Board colours live in the view.
   * the second channel, not the only one — but "the blue one" is how a person
   * describes a board, and a board of white outlines cannot be described. */

  --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: 10px;
  --rule-w: 1.5px;
  --shadow-hard: none;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"], :root[data-theme="light"] {
  --ground: #262421;
  --panel: #21201d;
  --panel-2: #2e2c28;
  --ink: #e4e1dd;
  --ink-dim: #98948e;
  --rule: #221f1c;
  --rule-soft: #3a3733;
  --tile: #4b4741;
  --accent: #81b64c;
  --accent-ink: #1b1a17;
  --good: #81b64c;
  --warn: #d9a13b;
  color-scheme: dark;
}

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

/* A DISABLED PRIMARY BUTTON MUST NOT LOOK PRESSABLE. The host styles .btn and
   has nothing for :disabled, so a button the game has switched off still
   arrives full-green and full-contrast — the player taps it, nothing happens,
   and that reads as broken rather than as "not yet". */
.btn:disabled {
  background: var(--panel-2); color: var(--ink-dim);
  border-color: var(--rule-soft); cursor: default;
}
.btn:disabled:active { transform: none; }
.btn { font-weight: 500; letter-spacing: .01em; }