/* Theme tokens: colours, surfaces and spacing as CSS custom properties, dark by
   default with a light override ([data-theme="light"]). Use these, not raw colours. */

:root {
  /* Semantic colours, identical in both themes. */
  --danger: #ef4444;       /* destructive actions, attack highlights, alert dots */
  --success: #22c55e;      /* selected / valid-move highlights */
  --shadow-soft: rgba(0,0,0,.35);
  --shadow: rgba(0,0,0,.4);
  --shadow-strong: rgba(0,0,0,.5);
  /* Status messages (components/status-line.js) -- same in both themes. */
  --status-error: #fca5a5;
  --status-success: #86efac;
  --text-subtle: #94a3b8;
  --text-dim: #64748b;
  --mat-bg: #ecdfc0;
  --mat-border: #8a5a3d;
  --cell-bg: #f4ecd6;
  --cell-border: #8a5a3d;
  /* Board-zone tints — deliberately distinct from --cell-bg and from each
     other (not just a shade darker/lighter), so track/safe/reserve/home
     read as different *zones* at a glance instead of one long strip of
     near-identical parchment. */
  --safe-cell-bg: #f0d98a;
  --safe-cell-border: #a9760f;
  --reserve-red-bg: rgba(193, 102, 107, 0.24);
  --reserve-red-border: #a2555a;
  --reserve-green-bg: rgba(127, 160, 133, 0.28);
  --reserve-green-border: #5c8161;
  --home-bg: rgba(201, 162, 39, 0.26);
  --home-border: #c9a227;
  --red-team: #c1666b;
  --red-highlight: #e0949a;
  --red-dark: #a2555a;
  --green-team: #7fa085;
  --green-border: #5c8161;
  --green-light: #aecdb2;
  --gold-accent: #c9a227;
  --dark-wood: #1e130c;

  /* App shell (lobby/menus) — pro app polish */
  --shell-ribbon-gold-1: #ffe27a;
  --shell-ribbon-gold-2: #d4af37;
  --shell-ribbon-gold-3: #a5790f;
  --shell-ribbon-blue-1: #bcd7ff;
  --shell-ribbon-blue-2: #5f92d8;
  --shell-ribbon-blue-3: #2f5da3;
  --shell-cta-green-1: #8be86a;
  --shell-cta-green-2: #3f9e34;
  --shell-cta-green-shadow: #1f5c1a;
  --shell-chip-bg: rgba(0, 0, 0, 0.35);
  --shell-max-width: 480px;
  --topbar-h: 52px;
  --navbar-h: 58px;

  /* Theme tokens — dark is the default palette */
  --page-bg-1: #2c1b12;
  --page-bg-2: #120a06;
  --surface-1: #3c2316;
  --surface-2: #23130b;
  --surface-solid: #25160d;
  --surface-deep: #120a06;
  --surface-deep-2: #160b07;
  --text-primary: #ffffff;
  --text-strong: #f7ead0;
  --text-muted: #b9a68c;
  --text-faint: #8f7c63;
  --border-gold: rgba(212, 175, 55, 0.32);
  --border-gold-soft: rgba(212, 175, 55, 0.22);
  --scrim: rgba(0, 0, 0, 0.92);
}

:root[data-theme="light"] {
  --page-bg-1: #f7ecd3;
  --page-bg-2: #ecdcb4;
  --surface-1: #fffaf0;
  --surface-2: #f3e6c9;
  --surface-solid: #fff8ea;
  --surface-deep: #ffffff;
  --surface-deep-2: #fbf1dc;
  --text-primary: #2b1a10;
  --text-strong: #3a2405;
  --text-muted: #6b5847;
  --text-faint: #8a7358;
  --border-gold: rgba(150, 110, 20, 0.35);
  --border-gold-soft: rgba(150, 110, 20, 0.22);
  --scrim: rgba(255, 250, 240, 0.92);
  --gold-accent: #9a6f10;
  --dark-wood: #3a2405;
  --shell-chip-bg: rgba(255, 255, 255, 0.5);
}