/* ============================================================
   01 — baza: reset, elementy HTML, typografia dokumentu
   Wartości wyłącznie z tokens.css.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `color-scheme` musi iść za motywem, nie za systemem. Bez tego przeglądarka
     rysuje kontrolki (checkboxy, pola wyboru, paski przewijania) według
     ustawienia systemowego — czyli czarne kwadraty na jasnej stronie albo
     jaskrawo białe pola na ciemnej. Jedno i drugie wygląda jak usterka. */
  color-scheme: light;
}

html[data-motyw="ciemny"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--ai-bg);
  color: var(--ai-text);
  font-family: var(--ai-font-body);
  font-size: var(--ai-size-body);
  line-height: var(--ai-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; }

/* --- nagłówki ---------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--ai-font-display);
  font-weight: 800;               /* Plus Jakarta Sans jest zmienny; projekt niesie nagłówki grube */
  color: var(--ai-heading);
  line-height: var(--ai-lh-tight);
  text-wrap: balance;
}

h1 { font-size: var(--ai-size-h1); letter-spacing: -.01em; }
h2 { font-size: var(--ai-size-h2); letter-spacing: -.008em; line-height: 1.18; }
h3 { font-size: var(--ai-size-h3); line-height: 1.25; }

/* Redaktor wyróżnia fragment nagłówka **gwiazdkami** — markdown robi z tego
   <strong>, a kolorem wyróżnienia jest --ai-rose (nie magenta: patrz brand.md). */
h1 strong, h2 strong, h3 strong {
  font-weight: inherit;
  color: var(--ai-rose);
}

/* Pole „nagłówek" przechodzi przez filtr markdown, który opakowuje tekst w <p> */
h1 > p, h2 > p, h3 > p { margin: 0; }

/* --- tekst -------------------------------------------------- */

p { margin: 0 0 var(--ai-s3); max-width: var(--ai-miara); }
p:last-child { margin-bottom: 0; }

strong { color: var(--ai-heading); font-weight: 700; }

a { color: var(--ai-rose); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ai-heading); }

ul, ol { margin: 0 0 var(--ai-s3); padding-left: 1.2em; }
li { margin-bottom: var(--ai-s1); }

hr {
  height: 1px;
  border: 0;
  background: var(--ai-line);
  margin: var(--ai-s6) 0;
}

/* --- fokus i pomijanie treści ------------------------------- */

:focus-visible {
  outline: 2px solid var(--ai-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.ai-skip {
  position: absolute;
  left: var(--ai-s4);
  top: calc(-1 * var(--ai-s6) - var(--ai-s4));
  z-index: 100;
  padding: var(--ai-s2) var(--ai-s4);
  background: var(--ai-rose);
  color: var(--ai-on-accent);
  font-weight: 700;
  border-radius: var(--ai-r-sm);
  text-decoration: none;
  transition: top var(--ai-fast) var(--ai-ease);
}
.ai-skip:focus { top: var(--ai-s2); color: var(--ai-on-accent); }

/* Kotwice nawigacji nie mogą chować się pod przyklejonym paskiem */
[id] { scroll-margin-top: calc(var(--ai-pasek) + var(--ai-s4)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --- tekst wyłącznie dla czytnika ekranu ---------------------- */
/* „Profil na LinkedIn" powtórzone przy każdym prelegencie brzmi w czytniku jak lista
   identycznych odnośników. Dopisane nazwisko rozróżnia je, nie zaśmiecając ekranu.
   Nie `display:none` ani `visibility:hidden` — te ukrywają treść także przed czytnikiem. */
.ai-tylko-dla-czytnika {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}