/* The only home for colors, type, spacing and timing.
   Game and hub code use these names, never raw values. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;700&display=swap');

:root {
  /* Players: p1 pieces are solid, p2 pieces carry a ring. Same on every theme. */
  --p1: #f5b700;
  --p2: #e4473d;
  --p1-ink: #2e2200;
  --p2-ink: #ffffff;

  /* Boards */
  --board: #1f4e9c;

  /* Wood (Nesting Cups): maple is the first player, walnut the second */
  --maple: #f0dcba;
  --maple-core: #d6b588;
  --maple-rim: #a97c4b;
  --maple-ink: #3a2a14;
  --walnut: #4f301b;
  --walnut-core: #2e1a0d;
  --walnut-rim: #24130a;
  --walnut-ink: #f6eadb;
  --wood-board: #c99a68;
  --wood-board-shade: #a87a4b;
  --wood-frame: #5e3a20;

  /* Nest Egg cards: cream faces, one color per asset kind, metallic wilds */
  --nest-card: #fbf5e6;
  --nest-ink: #2b2620;
  --nest-back: #8a3b2c;
  --nest-1: #c97b2e;
  --nest-2: #7a5cc7;
  --nest-3: #6f9a2a;
  --nest-4: #d33f35;
  --nest-5: #7a5232;
  --nest-6: #1f9a92;
  --nest-7: #2f6fc8;
  --nest-8: #c8467f;
  --nest-9: #2f8a4a;
  --nest-silver: #8d99a6;
  --nest-gold: #c9961a;

  /* Dungeon Duo: the painted dungeon, always torch-lit dark whatever the table theme */
  --dd-void: #07060a;
  --dd-stone: #6e6459;
  --dd-stone-cool: #5d5a5e;
  --dd-grout: #2a241f;
  --dd-wall: #3a332e;
  --dd-wall-face: #554840;
  --dd-moss: #56703c;
  --dd-torch: #ffb347;
  --dd-ink: #1b1410;
  --dd-steel: #aab6c4;
  --dd-gold: #e8b931;
  --dd-wood: #8a5a33;
  --dd-leather: #6e4a2f;
  --dd-skin: #f0c6a0;
  --dd-blue: #3d5fa8;
  --dd-green: #3f7d4a;
  --dd-purple: #6b44a8;
  --dd-white: #ece6d6;
  --dd-red: #b8402f;
  --dd-bone: #e8e0cc;
  --dd-goblin: #79a843;
  --dd-orc: #5b7f3a;
  --dd-slime: #63d07a;
  --dd-magic: #6fd8ff;
  --dd-fire: #ff6a2b;
  --dd-heal: #9cf07a;

  /* Snake Squad arena: always dark, whatever the table theme. Snakes 1 and 2 are --p1 and --p2. */
  --arena: #0d1222;
  --arena-out: #1c0c14;
  --arena-dot: #26304d;
  --arena-edge: #ff4d5e;
  --arena-ink: #f2f0e6;
  --snake-3: #2ec4b6;
  --snake-4: #8b6cf0;
  --snake-5: #4c9aff;
  --snake-6: #a3d94a;
  --snake-7: #ff6fae;
  --snake-8: #e9e2cf;
  --snake-9: #9fe3ff;
  --snake-10: #c08a5a;

  /* Type */
  --font: 'Fredoka', ui-rounded, system-ui, sans-serif;
  --weight-text: 500;
  --weight-bold: 700;
  --text-sm: 0.875rem;
  --text-body: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.5rem;
  --text-xl: 2.25rem;
  --text-code: 3.5rem;

  /* Space and shape */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --gutter: 16px;
  --tap: 48px;
  --radius-control: 14px;
  --radius-piece: 50%;

  /* Motion */
  --dur-move: 280ms;
  --dur-quick: 120ms;
}

/* Table themes. Only the table colors change. Any element with data-theme
   gets that theme's values, which is how the theme swatches show their color. */
:root,
[data-theme='felt'] {
  --felt: #0e3b36;
  --felt-deep: #082a26;
  --chalk: #f2f0e6;
  --chalk-dim: #a8bdb6;
}

[data-theme='walnut'] {
  --felt: #3a2417;
  --felt-deep: #24160d;
  --chalk: #f6eadb;
  --chalk-dim: #c9ad94;
}

[data-theme='midnight'] {
  --felt: #15203b;
  --felt-deep: #0b1226;
  --chalk: #eef1f8;
  --chalk-dim: #a3afc8;
}

[data-theme='slate'] {
  --felt: #2a2e35;
  --felt-deep: #1a1d22;
  --chalk: #f1f2f4;
  --chalk-dim: #aab1bb;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-move: 1ms;
    --dur-quick: 1ms;
  }
}