/* as the War Turns — shared tokens.
   Palette is taken from the map itself: terrain greens and ochres on lichen-grey stone,
   with cobalt as the player's banner colour. Display face: IM Fell English (old map lettering). */
:root {
  --stone: #e4e8e0;
  --stone-deep: #d3d9cf;
  --ink: #1f2a23;
  --ink-soft: #4a5a4f;
  --field: #8fae63;
  --forest: #2f5d3a;
  --ochre: #b08a4a;
  --water: #3d6e8f;
  --banner: #2c4fa3;
  --rival: #9e2a2b;
  --paper: #f7f9f5;
  --display: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --radius-s: 4px;
  --radius-m: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--stone); color: var(--ink);
  font: 400 1rem/1.55 var(--body);
}
a { color: var(--banner); }
:focus-visible { outline: 3px solid var(--banner); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0 0 .5em; }
button, input, select, textarea { font: inherit; color: inherit; }
button {
  cursor: pointer; border: 1px solid var(--ink); background: var(--paper);
  border-radius: var(--radius-s); padding: .45em .9em;
}
button.primary { background: var(--banner); border-color: var(--banner); color: #fff; }
button.danger { border-color: var(--rival); color: var(--rival); }
button:disabled { opacity: .45; cursor: not-allowed; }
input, select, textarea {
  border: 1px solid var(--ink-soft); background: var(--paper);
  border-radius: var(--radius-s); padding: .4em .55em;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
[hidden] { display: none !important; }

/* Wordmark: lighter introductory words, then the dark, bold title. */
.wordmark span, .brand-title span {
  color: var(--ink-soft); font-family: var(--body); font-weight: 400;
  font-size: .56em; display: block; line-height: 1.3; letter-spacing: .025em;
}
.wordmark strong, .brand-title strong {
  color: var(--ink); font-family: var(--body); font-weight: 700; letter-spacing: -.035em;
}
.wordmark { display: inline-block; }