/* Self-hosted open-license fonts (SIL OFL 1.1, from the Google Fonts library). Licenses in /fonts. */
@font-face {
  font-family: 'Alfa Slab One';
  src: url('../fonts/alfa-slab-one-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-latin-var.woff2') format('woff2');
  font-weight: 300 900; font-style: normal; font-display: swap;
}
/* Metric-adjusted fallbacks reduce layout shift while fonts load */
@font-face { font-family: 'Slab Fallback'; src: local('Rockwell'), local('Georgia'), local('DejaVu Serif'); size-adjust: 112%; ascent-override: 90%; }
@font-face { font-family: 'Figtree Fallback'; src: local('Arial'), local('Helvetica'), local('DejaVu Sans'); size-adjust: 98%; }

/* ===== Design tokens =====
   Each palette sets a hue + chroma; light/dark surfaces derive from them.
   System light/dark is followed; html[data-theme="light|dark"] overrides it. */

:root {
  /* Palette: Sea (default) */
  --hue: 232;
  --chroma: 0.12;
  --accent-hue: 232;

  /* Land & sea motif colors (original, generic) */
  --land-sea: #2f7fb8;
  --land-forest: #2f6b3a;
  --land-pasture: #7cb342;
  --land-wheat: #e5b23a;
  --land-clay: #c8643b;
  --land-stone: #7b8794;
  --land-sand: #e9d8a6;

  /* Player colors (always shown with a name) */
  --pc-red: #d23b35;
  --pc-blue: #2f6fd1;
  --pc-orange: #ec8a24;
  --pc-white: #f3efe6;
  --pc-green: #3b9b4a;
  --pc-brown: #8a5a35;

  /* Clock states */
  --warn: #f2b233;
  --warn-glow: rgb(242 178 51 / 0.45);
  --over: #e5484d;
  --over-glow: rgb(229 72 77 / 0.45);
  --robber: #9b6bf2;
  --robber-glow: rgb(155 107 242 / 0.4);
  --bank: #f07c43;

  /* Type */
  --font-display: 'Alfa Slab One', 'Slab Fallback', Rockwell, Georgia, serif;
  --font-body: 'Figtree', 'Figtree Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Shape & space */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --gutter: 16px;
  --tap: 48px;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 6px 20px -8px rgb(0 0 0 / 0.18);

  /* Light surfaces */
  color-scheme: light;
  --bg: oklch(97.2% 0.016 var(--hue));
  --bg-deco: oklch(93% 0.03 var(--hue));
  --surface: oklch(99.6% 0.005 var(--hue));
  --surface-2: oklch(95% 0.022 var(--hue));
  --line: oklch(87% 0.025 var(--hue));
  --ink: oklch(24% 0.03 var(--hue));
  --ink-soft: oklch(44% 0.03 var(--hue));
  --accent: oklch(50% var(--chroma) var(--accent-hue));
  --accent-strong: oklch(42% var(--chroma) var(--accent-hue));
  --accent-ink: #fff;
  --accent-soft: oklch(92.5% 0.045 var(--accent-hue));
  --focus: oklch(60% 0.18 var(--accent-hue));

  /* Game "table" panel: dark in both themes */
  --table: oklch(24% 0.035 var(--hue));
  --table-2: oklch(30% 0.04 var(--hue));
  --table-3: oklch(37% 0.045 var(--hue));
  --table-ink: oklch(96% 0.01 var(--hue));
  --table-ink-soft: oklch(78% 0.025 var(--hue));
}

:root[data-palette='forest'] { --hue: 150; --chroma: 0.11; --accent-hue: 148; }
:root[data-palette='hills'] { --hue: 42; --chroma: 0.13; --accent-hue: 38; }
:root[data-palette='fields'] { --hue: 85; --chroma: 0.12; --accent-hue: 70; }
:root[data-palette='mountains'] { --hue: 255; --chroma: 0.085; --accent-hue: 250; }

/* Fields: gold accent needs dark text for contrast in light mode */
:root[data-palette='fields'] { --accent: oklch(56% 0.12 70); --accent-strong: oklch(46% 0.11 65); }

/* ---- Dark variants ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: oklch(18.5% 0.022 var(--hue));
    --bg-deco: oklch(22% 0.03 var(--hue));
    --surface: oklch(23% 0.025 var(--hue));
    --surface-2: oklch(27% 0.03 var(--hue));
    --line: oklch(34% 0.03 var(--hue));
    --ink: oklch(95% 0.012 var(--hue));
    --ink-soft: oklch(76% 0.02 var(--hue));
    --accent: oklch(74% var(--chroma) var(--accent-hue));
    --accent-strong: oklch(80% var(--chroma) var(--accent-hue));
    --accent-ink: oklch(20% 0.03 var(--accent-hue));
    --accent-soft: oklch(31% 0.05 var(--accent-hue));
    --table: oklch(14.5% 0.02 var(--hue));
    --table-2: oklch(20% 0.028 var(--hue));
    --table-3: oklch(27% 0.035 var(--hue));
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -10px rgb(0 0 0 / 0.6);
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: oklch(18.5% 0.022 var(--hue));
  --bg-deco: oklch(22% 0.03 var(--hue));
  --surface: oklch(23% 0.025 var(--hue));
  --surface-2: oklch(27% 0.03 var(--hue));
  --line: oklch(34% 0.03 var(--hue));
  --ink: oklch(95% 0.012 var(--hue));
  --ink-soft: oklch(76% 0.02 var(--hue));
  --accent: oklch(74% var(--chroma) var(--accent-hue));
  --accent-strong: oklch(80% var(--chroma) var(--accent-hue));
  --accent-ink: oklch(20% 0.03 var(--accent-hue));
  --accent-soft: oklch(31% 0.05 var(--accent-hue));
  --table: oklch(14.5% 0.02 var(--hue));
  --table-2: oklch(20% 0.028 var(--hue));
  --table-3: oklch(27% 0.035 var(--hue));
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -10px rgb(0 0 0 / 0.6);
}

/* Player color helper classes set --pc (fill) and --pc-ink (text on fill) */
.pc-red { --pc: var(--pc-red); --pc-ink: #fff; }
.pc-blue { --pc: var(--pc-blue); --pc-ink: #fff; }
.pc-orange { --pc: var(--pc-orange); --pc-ink: #2a1600; }
.pc-white { --pc: var(--pc-white); --pc-ink: #1d1d1d; }
.pc-green { --pc: var(--pc-green); --pc-ink: #fff; }
.pc-brown { --pc: var(--pc-brown); --pc-ink: #fff; }