/* ── System „Kodeks" — wspólne tokeny i atomy dla stron web Togago ──
   Papier + atrament + hairline; serif Newsreader (treść), sans Archivo (UI),
   mono JetBrains (liczby/sygnatury). Akcent granatowy (adw./radc.). */

:root {
  --paper: #F5F1E8;
  --paper2: #FBF8F1;
  --tint: #EFEADD;
  --ink: #191D26;
  --navy: #26355F;
  --navy-2: #45527A;
  --navy-light: #8FA0CC;
  --navy-lighter: #C7CFE6;
  --gold: #A67B24;
  --green: #2E7D5B;
  --green-tint: #E3EAE2;
  --brick: #A6402E;
  --brick-tint: #EEE4E0;
  --hairline: #D8D2C2;
  --chip: #DCD5C4;
  --muted: #5C5849;
  --muted2: #8A8371;
  --faint: #A29B87;
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Archivo', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--ink); }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; }

/* atomy */
.serif { font-family: var(--serif); }
.mono { font-family: var(--mono); }
.label {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted2);
}
.wrap { max-width: 1200px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }

/* przyciski */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: 10px; padding: 15px 28px;
  font-weight: 700; font-size: 15.5px; border: none;
  transition: background .15s ease, color .15s ease;
}
.btn-primary { background: var(--navy); color: var(--paper); }
.btn-primary:hover { background: var(--ink); color: var(--paper); }
.btn-ghost { background: none; border: 1.5px solid var(--navy); color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: var(--paper); }

/* pasek postępu */
.rail { height: 3px; background: var(--chip); }
.rail > span { display: block; height: 100%; background: var(--navy); }

@media (max-width: 760px) {
  .wrap { padding-left: 22px; padding-right: 22px; }
}