/*
 * Design tokens for the whole game.
 *
 * Two ideas drive the board's look:
 *   - the board is a printed, textured surface with areas engraved INTO it;
 *   - every piece (cube, pawn, die, card) sits ON that surface and casts a shadow.
 * The `--well*` tokens do the first, the `--lift-*` tokens do the second.
 *
 * The `cqi` lengths below only resolve inside `.game-board`, which declares
 * `container-type: inline-size`, so keep `--lift-*` / `--well*` for board pieces.
 */
:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #0b100c;
  --board-rail: #10180f;
  --board-felt: #16201a;
  --plate: #1a241c;
  --panel: rgba(24, 32, 25, 0.82);
  --panel-strong: #182019;
  --line: #526354;

  /* Aged brass, used for every printed rule and fitting on the board */
  --brass: #a98d4f;
  --brass-lit: #d9b878;
  --brass-dim: #5c4c2b;
  --brass-rule: rgba(191, 158, 92, 0.26);

  /* Type */
  --ink: #e6ede3;
  --muted: #a6b3a4;
  --ink-faint: #7f8d7f;
  --accent: #cfed89;
  --gold: #efc475;
  --danger: #d9756a;

  /* Resource piece colours: muted and aged, never cartoon-bright */
  --wood: #6f4826;  --wood-face: #a06e3e;  --wood-lit: #c99560;
  --stone: #5c646a; --stone-face: #878f95; --stone-lit: #b4bcc1;
  --tools: #45606c; --tools-face: #6d8996; --tools-lit: #9ab4c0;
  --food: #7d5f26;  --food-face: #b08a3c;  --food-lit: #d9b45f;

  /* A piece resting on the board */
  --lift-1: 0 0.14cqi 0.24cqi rgba(0, 0, 0, 0.55);
  --lift-2: 0 0.3cqi 0.5cqi rgba(0, 0, 0, 0.6);
  --lift-3: 0 0.6cqi 1cqi rgba(0, 0, 0, 0.7);

  /* An area engraved into the board */
  --well: inset 0 0.16cqi 0.3cqi rgba(0, 0, 0, 0.6), inset 0 -0.07cqi 0 rgba(255, 255, 255, 0.055);
  --well-deep: inset 0 0.24cqi 0.44cqi rgba(0, 0, 0, 0.72), inset 0 -0.08cqi 0 rgba(255, 255, 255, 0.06);

  --grain: url("../assets/images/board-grain.png");

  --display-font: "Oswald", "DejaVu Sans Condensed", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --body-font: "PT Sans", "Segoe UI", system-ui, sans-serif;

  --shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.45);
  --board-ratio: 1.72;
  --button-ratio: 300 / 55;
  --card-ratio: 3 / 4;

  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(circle at center, #1b241d, #0a0e0a 70%);
  color: var(--ink);
  font: 15px/1.5 var(--body-font);
}

body {
  min-height: 100vh;
}

/* Every heading and printed label uses the condensed display face. */
h1, h2, h3 {
  font-family: var(--display-font);
  font-weight: 600;
  letter-spacing: 0.04em;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  color: var(--ink);
  background: transparent;
}

/*
 * Shared glyph element rendered by <game-icon>. It sizes from font-size and
 * paints with currentColor, so a piece is tinted entirely by its container.
 */
.game-icon {
  display: block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  fill: currentColor;
}