/* Gedeelde stijl: kleuren uit het moodboard (ecru, zand, olijfgroen, taupe, brons, saliegroen) */
:root {
  --bg: #fbf5ef; --surface: #fffcf8; --sunk: #f3e8db; --ink: #3b3a2a; --muted: #7e7a6b; --line: #e8dccd;
  --olive: #666548; --olive-ink: #fbf5ef; --clay: #a8774d; --sage: #7e8566; --taupe: #a7a292;
  --ok: #5b6b3c; --ok-bg: #e5e7d6; --warn: #96673a; --warn-bg: #f3e4d2; --bad: #9c4a3a; --bad-bg: #f3ddd5;
  --display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --body: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1d1c16; --surface: #26251d; --sunk: #302e25; --ink: #efe8dc; --muted: #a7a292; --line: #3c3a2f;
    --olive: #b5b48c; --olive-ink: #1d1c16; --clay: #d3a27b; --sage: #6f7658; --taupe: #7d7869;
    --ok: #a9b98a; --ok-bg: #2f3424; --warn: #dcae7f; --warn-bg: #3b2f22; --bad: #e08f7c; --bad-bg: #3f2621;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.55;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-wrap: balance; margin: 0 }
button, input, select, textarea { font: inherit; color: inherit }
img { max-width: 100% }
[hidden] { display: none !important }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 2px }
.num { font-variant-numeric: tabular-nums }

.eyebrow { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); font-weight: 500 }
.rule { width: 48px; height: 1px; background: var(--taupe); border: 0; margin: 16px auto }

.btn {
  border: 1px solid var(--olive); background: var(--olive); color: var(--olive-ink); border-radius: 8px;
  padding: 10px 18px; font-weight: 500; letter-spacing: .04em; cursor: pointer;
}
.btn:disabled { opacity: .6; cursor: progress }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line) }
.btn.danger { background: transparent; color: var(--bad); border-color: var(--bad) }
.btn.danger.armed { background: var(--bad); color: var(--surface) }
.link-btn { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 14px }

.field { display: grid; gap: 4px; min-width: 0 }
.field > label, .label { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: .18em; text-transform: uppercase }
.field input, .field select, .field textarea, input.input {
  border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 10px 12px; width: 100%;
}
.notice { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 12px 16px; font-size: 14px }
.notice.bad { background: var(--bad-bg); color: var(--bad) }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; font-size: 14px; z-index: 30; max-width: calc(100% - 32px);
}
@media (prefers-reduced-motion: no-preference) { .btn { transition: background .15s, border-color .15s } }