/* ==========================================================================
   eloelo — design system: fundamenty
   duotone D2: fiolet (ty) × turkus (ktoś); mgła zamiast bieli, śliwka zamiast czerni.
   Kalibracja „nie korpo, nie gra": tuszowe obrysy 1.5–2px, offset-cień max 2px.
   ========================================================================== */

:root{
  --paper:#EFEFED;             /* mgła — tło strony */
  --paper-deep:#FFFFFF;        /* karty */
  --ink:#17161A;
  --ink-soft:#615E68;
  --rule:rgba(23,22,26,.16);
  --accent:#A55CFF;            /* fiolet — „ty" */
  --accent-deep:#8A45D6;       /* fiolet w tekście / hover */
  --accent-2:#2FD4C4;          /* turkus — „ktoś" */
  --accent-2-deep:#1FBFAF;     /* turkus w tekście (kontrast na jasnym) */
  --vio-pastel:#E3CCFF;        /* zakreślacz 1 */
  --tur-pastel:#C9F6EF;        /* zakreślacz 2 */
  --vio-tint:#E9DCFF;          /* tint sekcji */
  --tur-tint:#D8F7F1;          /* tint sekcji 2 */
  --plum:#1D1A22;              /* ciemne sekcje */
  --serif:'Gabarito', system-ui, sans-serif;   /* tekst bieżący (nazwa var historyczna) */
  --disp:'Space Grotesk', var(--serif);        /* nagłówki, liczby, wordmark */
  --mono:'IBM Plex Mono', 'Courier New', monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
::selection{background:var(--vio-pastel);color:var(--ink);}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

main{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:0 24px;}

/* ── helpery typograficzne ─────────────────────────────── */
.mono{font-family:var(--mono);}
.label{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);
}
.rule{border:0;border-top:1px solid var(--rule);margin:0;}

section{padding:72px 0;scroll-margin-top:76px;}
section + section{border-top:1px solid var(--rule);}

h2.secnum{font-size:13px;font-family:var(--mono);color:var(--accent-2-deep);font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;}
h2.sectitle{font-family:var(--disp);font-size:33px;font-weight:700;margin-bottom:28px;letter-spacing:-.02em;}
/* em w nagłówku = zakreślacz (pastel), nie kursywa */
h2.sectitle em{font-style:normal;background:var(--tur-pastel);padding:0 .14em;box-decoration-break:clone;-webkit-box-decoration-break:clone;}

a{color:inherit;}

/* przypisy [n] — systemowy nośnik „explanations" */
.footnote{max-width:52ch;font-size:15px;color:var(--ink-soft);}
.footnote .idx{font-family:var(--mono);font-size:10px;color:var(--ink);background:var(--vio-pastel);border-radius:6px;padding:1px 6px;margin-right:8px;}
.footnote em{font-style:italic;}
/* błysk przypisu po kliknięciu [n]: tekst na chwilę pogrubiony + ciemniejszy (bez tła) */
.footnote.fn-flash{animation:fnFlash 1.1s ease;}
.footnote.fn-flash .idx{display:inline-block;animation:fnIdx 1.1s ease;}
@keyframes fnFlash{
  0%,55%{color:var(--ink);text-shadow:0.4px 0 0 currentColor,-0.4px 0 0 currentColor;}
  100%{color:var(--ink-soft);text-shadow:0 0 0 transparent;}
}
@keyframes fnIdx{
  0%,55%{transform:scale(1.3);}
  100%{transform:scale(1);}
}
@media (prefers-reduced-motion: reduce){
  .footnote.fn-flash,.footnote.fn-flash .idx{animation:none;}
}

/* dostępność: focus states */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}