/* tokens.css — design tokens as CSS custom properties (the source of truth).
   Loaded before style.css. Component/page rules reference these, never raw values.

   Two groups:
   - UI chrome tokens (--color-*): cozy warm neutrals; may switch for light/dark.
   - Map paint tokens (--map-*, --terrain-*): a FIXED cozy-earthy palette, never
     overridden by theme, so the rendered map and its PNG export look identical in
     any UI theme.

   Cozy palette basis: "Fireside Latte" neutrals + "Toasted Clay" terracotta accent
   (media.io cozy color tones). */

:root {
  color-scheme: light dark;

  /* --- UI chrome (light defaults) --- */
  --color-surface: #f3e6d6;
  --color-surface-raised: #faf3e8;
  --color-surface-sunken: #e9dac6;
  --color-ink: #2f2420;
  --color-ink-muted: #6d5442;
  --color-border: #d8bfa8;

  --color-accent: #a5542f;
  --color-accent-strong: #7e3f24;
  --color-accent-contrast: #fef6ec;

  --color-danger: #b23a2e;
  --color-focus: var(--color-accent);

  /* --- Map paint (FIXED across themes) --- */
  --map-background: #f3e6d6;
  --map-grid-line: #a98b6d;
  --map-settlement: #2f2420;
  --map-coord-label: #2f2420;

  --terrain-water: #7a9aa8;
  --terrain-ice: #e6e2d8;
  --terrain-desert: #e6c9a0;
  --terrain-plains: #c8c98f;
  --terrain-forest: #6e8a54;
  --terrain-swamp: #4f5d43;
  --terrain-hills: #c19a6b;
  --terrain-mountains: #8a7566;

  /* Spacing — 4px modular scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Typography */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-size-sm: clamp(0.8rem, 0.75rem + 0.2vw, 0.9rem);
  --font-size-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --font-size-lg: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --font-size-xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --line-tight: 1.2;
  --line-body: 1.5;

  /* Radii & elevation */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-1: 0 1px 2px rgb(47 36 32 / 0.12);
  --shadow-2: 0 4px 16px rgb(47 36 32 / 0.18);

  /* Motion */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

/* Dark UI chrome only — map paint tokens above are intentionally NOT overridden. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: #241a15;
    --color-surface-raised: #2f231c;
    --color-surface-sunken: #1b120e;
    --color-ink: #f3e6d6;
    --color-ink-muted: #c9b199;
    --color-border: #463527;

    --color-accent: #d0774a;
    --color-accent-strong: #e08a5f;
    --color-accent-contrast: #241a15;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 4px 16px rgb(0 0 0 / 0.5);
  }
}