/* theoboard theme: colour tokens (used by UnoCSS via uno.config.ts) and the few rules utilities can't express.
   Loaded after uno.css, so these win over its reset; utilities (one class) still beat the element rules here. */
:root {
  --c-bg: #f6f3ec;
  --c-panel: #fffdf8;
  --c-fg: #1f1c18;
  --c-muted: #6a6359;
  --c-line: #e2dbcf;
  --c-oxblood: #8a2f2a;
  --c-oxblood-strong: #74241f;
  --c-oxblood-soft: #f3e1dc;
  --c-paper: #fffdf8;
  --c-ok: #2f7d4f;
  --c-ok-soft: #e1f0e6;

  --c-tier-iron: #6f6a66;
  --c-tier-bronze: #9c6338;
  --c-tier-silver: #8f9aa3;
  --c-tier-gold: #c99a2e;
  --c-tier-platinum: #3a9e95;
  --c-tier-emerald: #2f8f58;
  --c-tier-diamond: #4f72d6;
  --c-tier-master: #8c4fc4;
  --c-tier-grandmaster: #c7413a;
  --c-tier-challenger: #d9a919;

  --f-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --f-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg: #13120f;
    --c-panel: #1b1915;
    --c-fg: #ebe5d9;
    --c-muted: #a29a8d;
    --c-line: #322d26;
    --c-oxblood: #e08a7c;
    --c-oxblood-strong: #f0a597;
    --c-oxblood-soft: #3a2420;
    --c-paper: #1b1915;
    --c-ok: #6cc28f;
    --c-ok-soft: #18291f;
    color-scheme: dark;
  }
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-fg);
  font: 16px/1.6 var(--f-sans);
}
a { color: var(--c-oxblood); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--c-oxblood); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; }
img { max-width: 100%; }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--c-oxblood); color: var(--c-paper); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip-link:focus { left: 8px; }

.site-header { background: color-mix(in srgb, var(--c-panel) 88%, transparent); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(8px); }
.brand { font: 600 21px/1 var(--f-serif); letter-spacing: .01em; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; color: var(--c-fg); text-decoration: none; background: none; border: 0; cursor: pointer; font-size: 14px; }
.nav-link:hover { background: var(--c-oxblood-soft); }
.nav-who { color: var(--c-muted); font-size: 14px; padding: 0 6px; }

.flash { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--c-ok-soft); color: var(--c-fg); border: 1px solid color-mix(in srgb, var(--c-ok) 40%, transparent); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-oxblood); }
.field-error { color: var(--c-oxblood); font-size: 14px; margin: 6px 0 0; }
.field[aria-invalid="true"] { border-color: var(--c-oxblood); }

.display { font: 600 clamp(36px, 7vw, 56px)/1.05 var(--f-serif); letter-spacing: -.01em; }
.page-h { font: 600 26px/1.2 var(--f-serif); }
.section-h { font: 600 24px/1.2 var(--f-serif); margin: 0 0 12px; }
.subject-h { font: 600 18px/1.3 var(--f-serif); }
.lede { font-size: 18px; color: var(--c-muted); max-width: 680px; }
.hero { padding: 24px 0 8px; }
.verse { font: italic 14px/1.5 var(--f-serif); }

.tiers { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.tier { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid var(--c-line); background: var(--c-panel); font-size: 14px; font-weight: 600; }
.swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }