/* Hallmark · tokens · theme: studied-DNA (source: lokalizacje.xtremebrands.pl)
 * axes — paper band: light (99.4%) · display style: display-wide (roman) · accent hue: warm (27°)
 *
 * Paleta jest przeniesiona 1:1 z marki Xtreme Brands i przeliczona do OKLCH:
 *   #e31b23 (primary)      -> oklch(58.4% 0.227 27)
 *   #052d46 (fitness navy) -> oklch(28.5% 0.062 242)
 *   #e9590c (kids orange)  -> oklch(64.6% 0.193 42)
 *   #0f172a (ink)          -> oklch(20.8% 0.040 266)
 * Każdy kolor i każdy krój na stronie przechodzi przez jedną z tych nazw.
 */

/* ---- HK Grotesk · jedyny krój na stronie ----------------------------
 * Hostowany lokalnie z /fonts (SIL Open Font License — wolno osadzać).
 * Strona nie robi ŻADNEGO zapytania do zewnętrznego dostawcy fontów,
 * co przy banerze RODO jest o jeden problem mniej.
 *
 * Pliki .woff2 są zawężone do znaków, których strona faktycznie używa
 * (Latin-1 + Latin Extended-A + interpunkcja + strzałki): ok. 18 kB na
 * wagę zamiast 67 kB pełnego .otf. Źródłowe .otf leżą obok — jeśli
 * dopiszesz treść w innym alfabecie, przegeneruj subsety (patrz
 * fonts/README.md), bo brakujący znak poleci fallbackiem.
 */
@font-face {
  font-family: "HK Grotesk";
  font-style: normal;
  font-weight: 400; /* tekst podstawowy */
  font-display: swap;
  src: url("../fonts/HKGrotesk-Regular.woff2") format("woff2"),
       url("../fonts/HKGrotesk-Regular.otf") format("opentype");
}
@font-face {
  font-family: "HK Grotesk";
  font-style: normal;
  font-weight: 500; /* jednostki przy liczbach */
  font-display: swap;
  src: url("../fonts/HKGrotesk-Medium.woff2") format("woff2"),
       url("../fonts/HKGrotesk-Medium.otf") format("opentype");
}
@font-face {
  font-family: "HK Grotesk";
  font-style: normal;
  font-weight: 600; /* nagłówki sekcji, etykiety, przyciski */
  font-display: swap;
  src: url("../fonts/HKGrotesk-SemiBold.woff2") format("woff2"),
       url("../fonts/HKGrotesk-SemiBold.otf") format("opentype");
}
@font-face {
  font-family: "HK Grotesk";
  font-style: normal;
  font-weight: 700; /* masthead, hero, liczby dowodów, stopka */
  font-display: swap;
  src: url("../fonts/HKGrotesk-Bold.woff2") format("woff2"),
       url("../fonts/HKGrotesk-Bold.otf") format("opentype");
}

:root {
  /* ---- Type faces --------------------------------------------------
     Jeden krój na całą stronę. Nagłówki od tekstu odróżnia stopień
     i waga (600/700 vs 400), nie druga rodzina.

     Dwa tokeny zostają rozdzielone celowo: gdyby kiedyś doszedł osobny
     krój nagłówkowy (np. HK Grotesk Wide), podmieniasz sam
     --font-display i nic w komponentach nie musi się ruszyć. */
  --font-display: "HK Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "HK Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Colour · zimny papier, granatowy pas, jeden sygnał ---------- */
  --color-paper: oklch(99.4% 0.002 250);
  --color-paper-2: oklch(97.6% 0.005 250);
  --color-paper-3: oklch(95.2% 0.008 252);
  --color-rule: oklch(92.9% 0.013 256);
  --color-rule-2: oklch(87% 0.016 256);
  --color-neutral: oklch(55% 0.033 257);
  --color-muted: oklch(44.6% 0.037 257); /* slate-600 — 7,4:1 na papierze */
  --color-ink-2: oklch(32% 0.038 260);
  --color-ink: oklch(20.8% 0.040 266); /* slate-900 — 17,5:1 na papierze */

  /* granatowy pas — hero, dowody, stopka. */
  --color-slab: oklch(28.5% 0.062 242); /* #052d46 */
  --color-slab-2: oklch(33% 0.055 245); /* #1b3850 */
  --color-slab-3: oklch(23.5% 0.050 243); /* #042034 */
  --color-slab-rule: oklch(42% 0.043 245); /* #395063 */
  --color-slab-muted: oklch(78% 0.026 237); /* 7,2:1 na granacie */
  --color-slab-ink: oklch(97% 0.006 237); /* 13,1:1 na granacie */

  /* akcent — sygnał, nigdy duża płaszczyzna */
  --color-accent: oklch(58.4% 0.227 27); /* #e31b23 — biel na nim ma 4,7:1 */
  --color-accent-deep: oklch(52.2% 0.204 27); /* #c41419 — stan :hover, jak w marce */
  --color-accent-ink: oklch(49% 0.200 27); /* akcent jako TEKST na papierze — 6,8:1 */
  --color-accent-slab: oklch(70% 0.180 30); /* akcent na granacie — 4,9:1 */
  --color-accent-quiet: oklch(95.5% 0.030 30);

  /* druga marka — wyłącznie jako marker (z bielą ma 3,6:1, więc nigdy pod tekst) */
  --color-kids: oklch(64.6% 0.193 42); /* #e9590c */

  --color-focus: oklch(52% 0.200 27);
  --color-focus-inv: oklch(75% 0.160 33);

  /* Błąd musi odróżniać się od czerwieni marki, a marka JEST czerwona.
     Odsuwamy więc odcień na 14° (głęboki karmin) i schodzimy z jasnością:
     #9f0936 obok #e31b23 czyta się jako problem, nie jako akcent. */
  --color-error: oklch(50% 0.195 14); /* obramowanie pola — 6,6:1 */
  --color-error-ink: oklch(45% 0.175 14); /* tekst błędu — 8,1:1 */
  --color-error-quiet: oklch(95.5% 0.022 14);
  --color-success-ink: oklch(45% 0.120 150);

  /* ---- Type scale · major third (1.25) from 16px ------------------- */
  --text-xs: 0.7rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5625rem;
  --text-xl: 1.9531rem;
  --text-2xl: 2.4414rem;
  --text-3xl: 3.0518rem;
  --text-4xl: 3.8147rem;
  /* HK Grotesk mieści w linii ok. 45% mniej znaków niż kondensowany
     display, który był tu wcześniej (szerokość znaku 0,58 em vs 0,40 em),
     więc stopnie display zjeżdżają o oczko w dół. Zweryfikowane w
     przeglądarce: każdy nagłówek łamie się na tyle samo linii co dotąd. */
  --text-display: clamp(1.95rem, 3.5vw, 2.95rem);
  --text-display-s: clamp(1.7rem, 3.1vw, 2.5rem);

  --lh-display: 1.1;
  --lh-caps: 1.08;
  --lh-body: 1.6;
  --track-caps: 0.11em;
  /* Marka prowadzi nagłówki ciasno (-0.025em), ale HK Grotesk jest
     okrąglejszy od kondensowanego poprzednika i przy -0.025em zaczyna się
     zlepiać — stajemy na -0.02em. */
  --track-display: -0.02em;
  --track-display-caps: -0.01em; /* wersaliki potrzebują więcej luzu */

  /* ---- Space · 4pt scale ------------------------------------------ */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* ---- Measure & gutters ------------------------------------------ */
  --page-max: 78rem;
  --page-gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 62ch;
  --measure-tight: 48ch;

  /* ---- Rules, radii, control height --------------------------------
     Marka jest miękka (12/16/24 px). Schodzimy niżej, żeby kondensowany
     display nie zrobił się pluszowy, ale kierunek jest ten sam. */
  --rule-hair: 1px;
  --rule-thick: 3px;
  --radius: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --control-h: 3rem; /* 48px — wspólna dla każdego pola I każdego przycisku */
  --dock-h: 3.75rem; /* wysokość dokowanego paska — używana też jako scroll-padding */

  /* ---- Motion ------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 200ms;
  --dur-nav: 320ms;
  --dur-long: 420ms;

  /* ---- Depth · dwa stopnie, nie cztery ----------------------------- */
  --shadow-whisper: 0 1px 2px oklch(20.8% 0.040 266 / 0.06);
  --shadow-card: 0 1px 2px oklch(20.8% 0.040 266 / 0.05),
                 0 10px 26px -14px oklch(20.8% 0.040 266 / 0.18);
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
  --z-sticky-nav: 300;
  --z-modal: 400;
}