/* ============================================================================
   TOKENY — jedyne miejsce, w którym zapisane są „surowe” wartości.
   Reszta arkuszy odwołuje się wyłącznie do zmiennych.
   ============================================================================ */

:root {
  color-scheme: light;

  /* --- kolory: podłoże ---------------------------------------------------
     Ciepła biel, dobrana pod logo. Znak gabinetu jest srebrno-złoty, więc
     chłodne, błękitne tło (poprzednia wersja) walczyło z nim o temperaturę
     barwową. Karty na tym tle są czystą bielą — treść „leży na” podłożu jak
     dokumentacja na blacie. */
  --c-bg: #faf8f5;
  --c-surface: #ffffff;
  --c-surface-alt: #f3f0ea;
  --c-surface-sunken: #eae5dc;

  /* --- kolory: treść -----------------------------------------------------
     Ciepła, przymglona czerń zamiast granatu. Czysta czerń na bieli daje
     zbyt twardy kontrast i wygląda na wyświetloną, nie wydrukowaną. */
  --c-ink: #22201c;
  --c-ink-soft: #4a463f;
  --c-muted: #635e55;
  --c-faint: #a49d92;

  /* --- kolory: akcent ----------------------------------------------------
     Złoto wzięte wprost z logo (#b08d33 to jego uśredniona barwa).
     ROZDZIELENIE JEST CELOWE: firmowe złoto ma na jasnym tle kontrast 2.96:1,
     a z białym tekstem 3.13:1 — za mało, żeby cokolwiek na nim przeczytać.
     Dlatego:
       --c-gold        tylko ozdoba: znak, kreski, linia postaci,
       --c-gold-strong wszystko, co ma być czytelne: tekst, przyciski, ikony.
     Ta druga barwa to to samo złoto, tylko przyciemnione — marka zostaje
     rozpoznawalna, a tekst spełnia próg WCAG AA. */
  --c-gold: #b08d33;
  --c-gold-strong: #8a6c1f;
  --c-gold-deep: #6d541a;
  /* Odpowiednik `--c-gold-strong` dla ciemnego tła. Tam „czytelniej" znaczy
     jaśniej, nie ciemniej: na `--c-dark` ma 8,16:1, czyli AAA. Używany tylko
     wewnątrz `.section--dark` i tylko do tego samego, do czego na bieli służy
     `--c-gold-strong`: tekstu i elementów, które muszą być czytelne. */
  --c-gold-bright: #d2ab4e;
  --c-gold-tint: #f6f0e1;
  --c-gold-line: rgba(176, 141, 51, 0.34);

  /* Srebro z logo — druga barwa marki, wyłącznie dekoracyjna. */
  --c-silver: #a8a8a7;
  --c-silver-tint: #eeeeed;

  /* zgodność wstecz: reszta arkuszy zna te nazwy */
  --c-accent: var(--c-gold-strong);
  --c-accent-strong: var(--c-gold-deep);
  --c-accent-tint: var(--c-gold-tint);
  --c-accent-line: var(--c-gold-line);

  /* --- kolory: stany -----------------------------------------------------
     Używane wyłącznie jako status i nigdy samodzielnie — zawsze z tekstem,
     ikoną albo atrybutem `disabled`. */
  --c-vital: #456f3b;
  --c-vital-tint: #e9f0e4;
  --c-warn: #8a6318;
  --c-warn-tint: #fbf1dd;
  --c-error: #b3382b;
  --c-error-tint: #fbeae8;

  /* --- powierzchnie ciemne ------------------------------------------------
     Pasek nawigacji, stopka i akcenty. Znak gabinetu jest srebrno-złoty,
     czyli zaprojektowany na ciemne tło - na jasnym pasku srebro blakło.
     Dodatkowo na ciemnym firmowe złoto ma kontrast 5.66:1, więc może tu
     wystąpić w oryginalnym odcieniu, bez przyciemniania. */
  --c-dark: #1a1815;
  --c-dark-soft: #24211c;
  --c-on-dark: #f0ece4;
  --c-on-dark-muted: #b8afa1;
  --s-line-dark: rgba(240, 236, 228, 0.14);

  /* --- linie i powierzchnie ---------------------------------------------- */
  --s-line: #e6e0d6;
  --s-line-strong: #cfc7b9;

  /* --- typografia --------------------------------------------------------
     IBM Plex to krój stworzony dla dokumentacji technicznej i od lat
     obecny w oprogramowaniu medycznym i naukowym. Sans do nagłówków
     i danych, Mono do etykiet i liczb pomiarowych. Inter niesie tekst
     czytany, bo jest najczytelniejszy w małych rozmiarach. */
  --f-display: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --f-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --t-sm: clamp(0.84rem, 0.81rem + 0.14vw, 0.92rem);
  --t-base: clamp(0.98rem, 0.94rem + 0.2vw, 1.07rem);
  --t-md: clamp(1.08rem, 1.02rem + 0.3vw, 1.22rem);
  --t-lg: clamp(1.24rem, 1.12rem + 0.5vw, 1.5rem);
  --t-xl: clamp(1.5rem, 1.28rem + 1vw, 2.1rem);
  --t-2xl: clamp(1.95rem, 1.5rem + 2.1vw, 3.1rem);
  --t-3xl: clamp(2.5rem, 1.7rem + 3.8vw, 4.6rem);

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-normal: 1.65;
  --lh-loose: 1.78;

  --ls-tight: -0.021em;
  --ls-wide: 0.06em;
  --ls-label: 0.16em;

  /* --- rytm przestrzenny -------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  /* Odstęp nad i pod sekcją. Na szerokim ekranie stary limit (9,5rem = 152 px)
     dawał 304 px pustki MIĘDZY sekcjami, czyli prawie jedną trzecią ekranu,
     i to dziewięć razy na stronie. Zmierzone przy oknie 1600 px. Strona ma
     oddychać, ale nie ziewać: 7rem daje 224 px przerwy, wciąż przestronnie,
     a nagłówek kolejnej sekcji wchodzi w kadr razem z końcem poprzedniej. */
  --sp-section: clamp(4.5rem, 3rem + 5vw, 7rem);
  --sp-gutter: clamp(1.25rem, 0.8rem + 2.2vw, 2.75rem);

  /* Szerokość prawego marginesu, w którym stoi postać. Współdzielona przez
     układ i skrypt rysujący, żeby nic się nie rozjechało. */
  --w-figure: clamp(6rem, 11vw, 11rem);

  /* --- geometria ---------------------------------------------------------- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-xl: 10px;
  --r-full: 999px;

  --w-content: 1200px;
  --w-narrow: 700px;
  --w-text: 64ch;

  /* --- ruch ---------------------------------------------------------------- */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --d-fast: 150ms;
  --d-base: 260ms;
  --d-slow: 480ms;
  /* Odsłanianie treści przy przewijaniu. Dłużej niż `--d-slow` i celowo:
     im krótszy dystans przejeżdża element, tym wolniej może się pojawiać,
     zanim ruch zacznie irytować. Para (dystans, czas) siedzi w `.reveal`
     w `layout.css` — zmieniać razem. */
  --d-reveal: 1000ms;

  /* --- cienie -------------------------------------------------------------
     Miękkie i chłodne (z domieszką granatu), nie szare. Szary cień na
     chłodnym tle wygląda jak brud. */
  --sh-sm: 0 1px 2px rgba(13, 27, 36, 0.05);
  --sh-md: 0 4px 16px -4px rgba(13, 27, 36, 0.1);
  --sh-lg: 0 18px 48px -18px rgba(13, 27, 36, 0.22);
  --sh-card: 0 1px 3px rgba(13, 27, 36, 0.05), 0 8px 24px -14px rgba(13, 27, 36, 0.16);

  /* --- warstwy ------------------------------------------------------------ */
  --z-figure: 1;
  --z-content: 2;
  --z-nav: 50;
  --z-modal: 100;
  --z-toast: 120;
}