/* ═══════════════════════════════════════════════════════════════════════════
   PTS - tokeny designu (motyw WordPress)

   ŹRÓDŁEM PRAWDY DLA KOLORÓW, TYPOGRAFII I ODSTĘPÓW JEST `theme.json`.
   WordPress generuje z niego zmienne `--wp--preset--*` i wstrzykuje je na
   stronie oraz w edytorze. Ten plik tylko nadaje im krótkie nazwy, których
   używają arkusze przeniesione z wersji B, i dokłada tokeny, których
   `theme.json` nie zna: kształt, cień, ruch, warstwy.

   Zmieniając kolor albo stopień pisma, edytuj `theme.json`, nie ten plik.
   Inaczej edytor bloków pokaże redakcji inne wartości niż strona.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── kolory podstawowe: aliasy presetów z theme.json (księga s. 10) ────── */
  --navy:   var(--wp--preset--color--navy);      /* #221E5E · PANTONE 273C */
  --orange: var(--wp--preset--color--orange);    /* #F16521 · PANTONE 165C */
  --white:  var(--wp--preset--color--white);
  --mist:   var(--wp--preset--color--mist);
  --ink:    var(--wp--preset--color--ink);
  --navy-ink: var(--wp--preset--color--navy-ink);

  /* ── warianty robocze ──────────────────────────────────────────────────
     Nie ma ich w palecie edytora celowo: to przyciemnienia i rozjaśnienia
     bazy, używane przez komponenty. Wystawienie ich redakcji zamieniłoby
     paletę marki w zestaw sześćnastu podobnych granatów. */
  --navy-deep:   #1A1750;
  --navy-soft:   #2E2A72;
  --navy-line:   rgba(34, 30, 94, 0.14);
  --navy-wash:   rgba(34, 30, 94, 0.05);
  --orange-deep: #D2531A;
  --orange-wash: rgba(241, 101, 33, 0.10);

  /* Pomarańcz marki (#F16521) na bieli daje 3.17:1 - wystarcza dla grafiki
     i dużego kroju, ale nie dla drobnego tekstu (WCAG AA wymaga 4.5:1).
     Do małych napisów na jasnym tle używamy przyciemnionego wariantu tego
     samego odcienia; na granacie zostaje pomarańcz podstawowy (5.65:1). */
  --orange-ink: #BC4610;

  /* ── neutralne ────────────────────────────────────────────────────────── */
  --paper:     var(--wp--preset--color--white);
  --mist-2:    #EDEFF6;
  --line:      #E1E4EF;
  --ink-2:     #4B4870;   /* tekst pomocniczy - 8.1:1 na bieli */
  --ink-3:     #6E6B90;   /* podpisy - 5.0:1 na bieli */
  --on-navy:   #FFFFFF;
  --on-navy-2: rgba(255, 255, 255, 0.76);
  --on-navy-3: rgba(255, 255, 255, 0.56);

  /* ── typografia: aliasy presetów (księga s. 11: font podstawowy ROBOTO) ── */
  --font: var(--wp--preset--font-family--roboto);

  --fs-small:   var(--wp--preset--font-size--small);
  --fs-body:    var(--wp--preset--font-size--medium);
  --fs-lead:    var(--wp--preset--font-size--lead);
  --fs-h3:      var(--wp--preset--font-size--large);
  --fs-h2:      var(--wp--preset--font-size--x-large);
  --fs-h1:      var(--wp--preset--font-size--xx-large);

  /* Stopnie spoza skali edytora: redakcja nie ustawia ich ręcznie, bo służą
     elementom układu, a nie treści wpisywanej w bloku. */
  --fs-eyebrow: clamp(0.69rem, 0.66rem + 0.15vw, 0.78rem);
  --fs-micro:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --fs-h4:      clamp(1.06rem, 0.98rem + 0.4vw, 1.28rem);
  --fs-display: clamp(3rem, 1.4rem + 7.4vw, 8rem);

  --lh-tight: 1.03;
  --lh-head:  1.12;
  --lh-body:  1.62;
  --ls-eyebrow: 0.19em;
  --ls-head: -0.022em;

  /* ── siatka i rytm (księga: układ modułowy, oparty na siatce) ─────────── */
  --shell:        1280px;   /* = wideSize w theme.json */
  --shell-narrow: 940px;    /* = contentSize w theme.json */
  --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 3rem);

  --s-1: 0.25rem;
  --s-2: var(--wp--preset--spacing--20);
  --s-3: 0.75rem;
  --s-4: var(--wp--preset--spacing--30);
  --s-5: var(--wp--preset--spacing--40);
  --s-6: var(--wp--preset--spacing--50);
  --s-7: var(--wp--preset--spacing--60);
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --section-y: var(--wp--preset--spacing--70);

  /* ── kształt ──────────────────────────────────────────────────────────── */
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;
  --hair: 1px solid var(--line);

  /* Księga zakazuje cieni w ikonografii; w interfejsie cień jest wyłącznie
     sygnałem uniesienia elementu (hover / warstwa nad treścią). */
  --lift-1: 0 1px 2px rgba(20, 17, 59, 0.05), 0 8px 24px rgba(20, 17, 59, 0.06);
  --lift-2: 0 2px 4px rgba(20, 17, 59, 0.07), 0 18px 46px rgba(20, 17, 59, 0.13);

  /* ── ruch ─────────────────────────────────────────────────────────────── */
  --t-fast: 0.18s;
  --t:      0.32s;
  --t-slow: 0.62s;
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── filtr „Deep Blue” dla fotografii (księga s. 15) ──────────────────── */
  --photo-filter-color: rgba(29, 40, 122, 1);
  --photo-filter-alpha: 0.26;

  /* Pasek administracyjny WordPressa siedzi na z-index 99999, więc warstwy
     motywu trzymamy poniżej, żeby zalogowany redaktor nie tracił dostępu
     do panelu pod nawigacją albo lightboxem. */
  --z-nav: 60;
  --z-zgoda: 65;   /* nad nawigacją, pod szufladą menu */
  --z-drawer: 70;
  --z-lightbox: 90;
  --z-intro: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t: 0.01ms;
    --t-slow: 0.01ms;
  }
}