/* Shared design tokens and primitives for site, reader and admin. */
:root {
  --ink: #16181d;
  --ink-2: #3b404a;
  --muted: #6b7280;
  --line: #e4e2dc;
  --paper: #fbfaf7;
  --surface: #ffffff;
  --band: #efede8;
  --accent: #2d3561;
  --accent-ink: #ffffff;
  --accent-hover: #232a4f;
  --gold: #c9962b;
  --ok: #1f7a4d;
  --warn: #9a6400;
  --bad: #b42318;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.55; }
img { max-width: 100%; display: block; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid #6b7bd6; outline-offset: 2px; border-radius: 4px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .75em 1.4em; border-radius: 6px; border: 1px solid transparent;
  font: inherit; font-weight: 600; letter-spacing: .01em; text-decoration: none; cursor: pointer;
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-danger { background: var(--surface); color: var(--bad); border-color: #f2c4bf; }
.btn-small { min-height: 36px; padding: .4em .9em; font-size: .9rem; }
.btn-link { background: none; border: 0; color: var(--accent); text-decoration: underline; font-weight: 600; padding: 0; min-height: 0; cursor: pointer; font: inherit; }
.btn-block { width: 100%; }

.field { display: grid; gap: .35em; margin-bottom: 1em; }
.field label, .label { font-weight: 600; font-size: .9rem; color: var(--ink-2); }
.input, input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=search], select, textarea {
  width: 100%; min-height: 46px; padding: .6em .8em; border: 1px solid #cfccc4; border-radius: 6px;
  font: inherit; color: var(--ink); background: var(--surface);
}
textarea { min-height: 110px; resize: vertical; }
.hint { color: var(--muted); font-size: .88rem; }
.error-text { color: var(--bad); font-size: .92rem; }
.ok-text { color: var(--ok); font-size: .92rem; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}