/* Hallmark · tokens · Massmedica — portfolio produktowe 2026
 * theme: studied-DNA (source: Kopia MASSMEDICA OFERTA PRODUKTOWA ROBIN LAFAYSSE.pdf)
 * paper-band: light (97.6%) · display-style: high-contrast-serif (Cormorant Garamond)
 * accent-hue: warm copper (61°)
 *
 * Miedz zrodlowa z PDF-a to rgb(197,160,130) = oklch(73.2% 0.0604 60.7).
 * Na papierze daje 2,41:1 — za malo nawet na duzy tekst, wiec rozbita na dwie role:
 *   --color-copper  73.2%  linie OZDOBNE i znaki (nigdy tekst, nigdy stan
 *                          kontrolki — na papierze ma tylko 2,24:1)
 *   --color-accent  52%    tekst miedziany, linki, stan aktywny (5,2:1)
 */

:root {
  /* ── Papier i tusz ────────────────────────────────────────────────
     Zrodlo drukuje na czystej bieli i czystej czerni. Oba na ekranie
     czytaja sie syntetycznie — papier dostaje cieply tint miedzi,
     tusz idzie w cieply grafit. */
  --color-paper:       oklch(97.6% 0.005 61);
  --color-paper-2:     oklch(95.0% 0.008 61);
  --color-paper-3:     oklch(92.4% 0.010 61);

  --color-ink:         oklch(22.5% 0.010 55);
  --color-ink-2:       oklch(40.0% 0.010 58);
  --color-neutral:     oklch(50.0% 0.009 58);
  /* 53%, nie 56% — na papierze stopki (--color-paper-2) 56% dawalo 4,02:1,
     ponizej AA. Zmierzone przez tools/check-contrast.py, nie oszacowane. */
  --color-muted:       oklch(53.0% 0.008 58);

  --color-rule:        oklch(88.0% 0.008 61);
  --color-rule-2:      oklch(80.0% 0.010 61);

  /* ── Akcent: miedz ────────────────────────────────────────────── */
  --color-accent:      oklch(52.0% 0.075 61);
  --color-accent-2:    oklch(44.0% 0.080 61);
  --color-accent-wash: oklch(95.5% 0.016 61);
  --color-copper:      oklch(73.2% 0.060 61);

  /* Podkladka pod packshot. Wyjatek od zakazu czystej bieli: packshoty z
     materialow Massmedica sa sfotografowane na 255/255/255 i nie maja kanalu
     alfa. Ocieplenie podkladki daloby widoczna ramke wokol kazdego zdjecia,
     a przyciemnienie samego packshotu falszowaloby kolor opakowania.
     Bialy talerz + hairline = swiadoma ramka specimenu, nie tlo strony. */
  --color-pack:        oklch(100% 0 0);
  --color-on-accent:   oklch(98.0% 0.004 61);

  /* Turkus z logo Massmedica. Wystepuje wylacznie jako sygnatura marki
     przy znaku — nigdy jako kolor akcji, bo bije sie z miedzia. */
  --color-brand:       oklch(69.0% 0.113 209);

  --color-focus:       oklch(45.0% 0.130 255);
  --color-error:       oklch(48.0% 0.170 27);

  /* ── Typografia ───────────────────────────────────────────────────
     Zrodlo: Alta (okladka), Lovelo Black (naglowki), Gotham (tekst) —
     wszystkie komercyjne. Zamienniki musialy udzwignac takze cyrylice,
     bo strona ma wersje UA i RU. Cormorant Garamond i Geist maja
     latin-ext + cyrillic + cyrillic-ext. Dwie rodziny, bez outliera. */
  --font-display: 'Cormorant Garamond', Cormorant, Georgia, 'Times New Roman', serif;
  --font-body:    'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1.0625rem;
  --text-md:      1.25rem;
  --text-lg:      1.5rem;
  --text-xl:      1.875rem;
  --text-2xl:     2.375rem;
  --text-3xl:     3rem;
  /* dolna granica 2.25rem, nie 2.5rem — przy 320 px „PRODUKTOWE" lamalo sie
     w polowie slowa (overflow-wrap: anywhere jest wymagany, wiec zjezdza font) */
  --text-display:   clamp(2.25rem, 4.5vw + 1rem, 4.75rem);
  --text-display-s: clamp(1.875rem, 3vw + 0.75rem, 3rem);

  --track-wide:   0.24em;
  --track-mid:    0.12em;
  --track-tight: -0.015em;

  /* ── Skala 4 pt ───────────────────────────────────────────────── */
  --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;

  --page-gutter: clamp(1.25rem, 4vw, 4.5rem);
  --measure:     68ch;

  /* ── Geometria ────────────────────────────────────────────────── */
  --rule-hair:  1px;
  --rule-thin:  2px;
  --radius-sm:  2px;
  --radius-md:  3px;

  /* ── Ruch ─────────────────────────────────────────────────────── */
  --dur-micro:  120ms;
  --dur-short:  220ms;
  --dur-long:   420ms;
  --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);

  /* ── Warstwy ──────────────────────────────────────────────────── */
  --z-base:       1;
  --z-raised:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-sticky-nav: 210;   /* nagłówki kategorii dokują POD masztem */
  --z-modal:    400;

  /* Wysokosc przyklejonego paska kategorii. Czyta ja sticky naglowek
     kategorii (S3) i scroll-margin kotwic. Mierzona z JS po layoucie —
     te wartosci to tylko sensowny start przed pierwszym pomiarem. */
  --banner-height: 61px;
}

/* Ponizej 40rem szukajka schodzi do drugiego wiersza paska. */
@media (max-width: 39.999rem) {
  :root { --banner-height: 105px; }
}