/* ============================================================================
   BASE — zmienne, reset, typografia
   ----------------------------------------------------------------------------
   Jedyne miejsce z definicjami kolorów i promieni. Reszta arkuszy korzysta
   wyłącznie z tych zmiennych — zmiana palety odbywa się tutaj.
   ========================================================================== */

:root{
  --ink:#0E1512; --ink-soft:#4A5A52; --ink-faint:#7A8A82;
  --ground:#F7FAF8; --card:#FFFFFF; --line:#DCE6E0;
  --green:#12382B; --green-mid:#1F4E3D; --green-soft:#EAF2ED;
  --sand:#F6EEDF; --lav:#ECEAF6;
  --amber-bg:#FBF3E3; --amber-line:#E2C88B; --amber-ink:#6B4E12;
  /* akcent akcji — pogłębiona wersja piaskowego; kontrast z ciemną zielenią 6,8:1 */
  --gold:#E9B44C; --gold-dark:#DFA83C;
  --err:#8A2B20; --err-bg:#FBEEEC; --err-line:#E7C3BD;
  --radius:14px;
  --shadow:0 1px 2px rgba(14,21,18,.04), 0 8px 26px rgba(14,21,18,.06);
  --dur:.16s;
}
@media(prefers-reduced-motion:reduce){ :root{--dur:0s} }

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  background:var(--ground); color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Schibsted Grotesk",system-ui,sans-serif;letter-spacing:-.02em}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
:focus-visible{outline:2px solid var(--green-mid);outline-offset:2px;border-radius:4px}
[hidden]{display:none !important}