/* =============================================================================
   PA 2.0 — warstwa tokenów katalogu.
   Odczyt z repo website-2, app/assets/css/tokens, 06.08.2026.
   Pliki źródłowe: palette/main.scss, spacing/eight.scss, typography/roboto.scss,
   scales/desktop.scss, mode/light.scss.
   To jedyne miejsce w katalogu, w którym stoją wartości. Strony katalogu
   używają wyłącznie var(). Nie poprawiamy tu nic względem kodu.
   ============================================================================= */

/* PISMO CAŁEGO KATALOGU — FIGTREE (polecenie zamawiającego 24.08.2026: „zmien czcionke w DS
   na Figtree"). Wczytanie ma JEDEN nośnik — `pa-figtree-300-900.css` — i ten import jest
   drugą drogą do tego samego pliku, nie drugą kopią: nagłówki stron wskazują go wprost,
   a tokeny czyta każda strona, więc rodzina dociera także tam, gdzie wpisu w nagłówku
   zabrakło. */
@import url("./pa-figtree-300-900.css");

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

:root {
  /* --- palette/main.scss --------------------------------------------------- */
  --static-gray-0: #FFFFFFFF;
  --static-gray-50: #F6F6F9FF;
  --static-gray-100: #F3F3F7FF;
  --static-gray-150: #F1F1F6FF;
  --static-gray-200: #E8E8EFFF;
  --static-gray-250: #E1E1EAFF;
  --static-gray-300: #D9D9E3FF;
  --static-gray-350: #C6C6D3FF;
  --static-gray-400: #B0B0C0FF;
  --static-gray-450: #9C9CB0FF;
  --static-gray-500: #8B8BA0FF;
  --static-gray-550: #7E7E95FF;
  --static-gray-600: #707085FF;
  --static-gray-650: #5E5E70FF;
  --static-gray-700: #4D4D5CFF;
  --static-gray-750: #41414EFF;
  --static-gray-800: #3A3A47FF;
  --static-gray-850: #32323EFF;
  --static-gray-900: #2B2B36FF;
  --static-gray-950: #21212BFF;
  --static-gray-1000: #000000FF;

  --static-primary-50: #DEF7EFFF;
  --static-primary-100: #BAEEDCFF;
  --static-primary-150: #A9EAD3FF;
  --static-primary-200: #9FE6D0FF;
  --static-primary-250: #8EE1C8FF;
  --static-primary-300: #7EDDBDFF;
  --static-primary-350: #55D8B0FF;
  --static-primary-400: #36D2A5FF;
  --static-primary-450: #2ABC92FF;
  --static-primary-500: #07C07EFF;
  --static-primary-550: #06B174FF;
  --static-primary-600: #06A06AFF;
  --static-primary-650: #048A5AFF;
  --static-primary-700: #047E55FF;
  --static-primary-750: #036D49FF;
  --static-primary-800: #035C3FFF;
  --static-primary-850: #024A33FF;
  --static-primary-900: #023A29FF;
  --static-primary-950: #02130DFF;

  --static-orange-50: #FFEBE0FF;
  --static-orange-100: #FFCEB2FF;
  --static-orange-200: #FFB48AFF;
  --static-orange-350: #FF9052FF;
  --static-orange-400: #FF8038FF;
  --static-orange-450: #FF7324FF;
  --static-orange-500: #FF6914FF;
  --static-orange-600: #E65E12FF;
  --static-orange-650: #D75811FF;
  --static-orange-700: #C34F0FFF;
  --static-orange-850: #7F370BFF;

  --static-purple-50: #EFE7FEFF;
  --static-purple-100: #E3D4FAFF;
  --static-purple-200: #C5A9F3FF;
  --static-purple-300: #A780ECFF;
  --static-purple-350: #9469E8FF;
  --static-purple-400: #8253E5FF;
  --static-purple-500: #7540E2FF;
  --static-purple-550: #6A32E0FF;
  --static-purple-600: #6130CCFF;
  --static-purple-650: #5236AAFF;
  --static-purple-700: #4E3599FF;
  --static-purple-750: #442E85FF;
  --static-purple-800: #3B2970FF;
  --static-purple-900: #2A1E4DFF;
  --static-purple-950: #0E0A1AFF;

  --static-blue-400: #3D8BFFFF;
  --static-blue-500: #1A76FFFF;
  --static-blue-550: #0066FFFF;
  --static-blue-600: #005EEAFF;
  --static-blue-650: #0052CCFF;

  --static-red-50: #FCE3E3FF;
  --static-red-100: #F9C8C8FF;
  --static-red-200: #F6ACACFF;
  --static-red-400: #ED5959FF;
  --static-red-500: #EA3D3DFF;
  --static-red-600: #E71D1DFF;
  --static-red-650: #B81414FF;
  --static-red-700: #AF1313FF;
  --static-red-950: #450707FF;

  --static-discord-400: #717CF4FF;
  --static-discord-500: #5865F2FF;
  --static-discord-600: #4250F0FF;
  --static-discord-700: #2533D0FF;
  --static-discord-800: #1F2BADFF;
  --static-discord-950: #0A0D29FF;
  --static-discord-alpha-800: #1223E3CC;
  --static-primary-alpha-900: #023A29E5;

  --static-overlay-light-0: #FFFFFF00;
  --static-overlay-light-50: #FFFFFF0D;
  --static-overlay-light-100: #FFFFFF1A;
  --static-overlay-light-200: #FFFFFF33;
  --static-overlay-light-300: #FFFFFF4D;
  --static-overlay-light-400: #FFFFFF66;
  --static-overlay-light-500: #FFFFFF80;
  --static-overlay-dark-50: #0000000D;
  --static-overlay-dark-100: #0000001A;
  --static-overlay-dark-150: #00000026;
  --static-overlay-dark-200: #00000033;
  --static-overlay-dark-300: #0000004D;
  --static-overlay-light-650: #FFFFFFA6;
  --static-overlay-light-800: #FFFFFFCC;
  --static-overlay-light-900: #FFFFFFE5;
  --static-overlay-light-950: #FFFFFFF2;

  /* --- spacing/eight.scss -------------------------------------------------- */
  --static-space-0x: 0px;
  --static-space-0-25x: 2px;
  --static-space-0-5x: 4px;
  --static-space-0-75x: 6px;
  --static-space-1x: 8px;
  --static-space-1-25x: 10px;
  --static-space-1-5x: 12px;
  --static-space-2x: 16px;
  --static-space-2-5x: 20px;
  --static-space-3x: 24px;
  --static-space-3-5x: 28px;
  --static-space-4x: 32px;
  --static-space-5x: 40px;
  --static-space-6x: 48px;
  --static-space-7x: 56px;
  --static-space-8x: 64px;
  --static-space-9x: 72px;
  --static-space-10x: 80px;
  --static-space-12x: 96px;
  --static-space-11x: 88px;
  --static-space-13x: 104px;
  --static-space-14x: 112px;
  --static-space-15x: 120px;
  --static-space-16x: 132px;
  --static-space-17x: 136px;
  --static-space-18x: 144px;
  --static-space-19x: 152px;
  --static-space-20x: 160px;

  /* --- typography/roboto.scss (plik nazwany Roboto, deklarował Poppins) -------
     WARTOŚĆ ZMIENIONA 24.08.2026 z `Poppins` na `Figtree`, polecenie zamawiającego. Rolę czyta
     każda strona katalogu (body) i każdy komponent, więc zmiana obejmuje CAŁY katalog
     naraz — tego chciało polecenie. Rodzinę wczytuje `@import` na górze tego pliku. */
  --static-typography-font-family: Figtree;
  --static-typography-letter-spacing: 0px;
  /* Dziewięć nazwanych grubości. UWAGA: zapisane SŁOWEM, nie liczbą, więc
     w tej postaci nie da się ich użyć jako wartości font-weight. */
  --static-typography-font-weight-light: Light;
  --static-typography-font-weight-light-italic: Light Italic;
  --static-typography-font-weight-regular: Regular;
  --static-typography-font-weight-italic: Italic;
  --static-typography-font-weight-medium: Medium;
  --static-typography-font-weight-semi-bold: SemiBold;
  --static-typography-font-weight-bold: Bold;
  --static-typography-font-weight-black: Black;

  /* --- scales/desktop.scss: skale UI -------------------------------------- */
  --pui-ui-radius-none: 0px;
  --pui-ui-radius-xs: 3px;
  --pui-ui-radius-sm: 4px;
  --pui-ui-radius-md: 6px;
  --pui-ui-radius-lg: 8px;
  --pui-ui-radius-xl: 10px;
  --pui-ui-radius-2xl: 12px;
  --pui-ui-radius-3xl: 16px;
  --pui-ui-radius-4xl: 20px;
  --pui-ui-radius-5xl: 24px;
  --pui-ui-radius-6xl: 32px;
  --pui-ui-radius-7xl: 40px;
  --pui-ui-radius-8xl: 48px;
  --pui-ui-radius-rounded: 999px;

  --pui-ui-border-divider-width: 1px;
  --pui-ui-border-outline-border-width: 1px;
  --pui-ui-border-outline-border-width-active: 2px;
  --pui-ui-border-focus-ring-width: 2px;

  --pui-text-h1-font-size: 60px;
  --pui-text-h1-line-height: 72px; --pui-text-h1-line-height-tight: 63px;
  --pui-text-h1-letter-spacing: -2px;
  --pui-text-h2-font-size: 48px;
  --pui-text-h2-line-height: 62px; --pui-text-h2-line-height-tight: 54px;
  --pui-text-h2-letter-spacing: -0.5px;
  --pui-text-h3-font-size: 42px;
  --pui-text-h3-line-height: 56px; --pui-text-h3-line-height-tight: 49px;
  --pui-text-h4-font-size: 32px;
  --pui-text-h4-line-height: 42px; --pui-text-h4-line-height-tight: 37px;
  --pui-text-h5-font-size: 28px;
  --pui-text-h5-line-height: 36px; --pui-text-h5-line-height-tight: 31px;
  --pui-text-h6-font-size: 24px;
  --pui-text-h6-line-height: 30px; --pui-text-h6-line-height-tight: 26px;
  --pui-text-h7-font-size: 20px;
  --pui-text-h7-line-height: 26px; --pui-text-h7-line-height-tight: 23px;
  --pui-text-h8-font-size: 18px;
  --pui-text-h8-line-height: 23px; --pui-text-h8-line-height-tight: 20px;
  --pui-text-p-xxlg-font-size: 24px;
  --pui-text-p-xxlg-line-height: 38px; --pui-text-p-xxlg-line-height-tight: 33px;
  --pui-text-p-xlg-font-size: 20px;
  --pui-text-p-xlg-line-height: 32px; --pui-text-p-xlg-line-height-tight: 28px;
  --pui-text-p-lg-font-size: 17px;
  --pui-text-p-lg-line-height: 30px; --pui-text-p-lg-line-height-tight: 26px;
  --pui-text-p-base-font-size: 15px;
  --pui-text-p-base-line-height: 26px; --pui-text-p-base-line-height-tight: 23px;
  --pui-text-p-sm-font-size: 14px;
  --pui-text-p-sm-line-height: 24px; --pui-text-p-sm-line-height-tight: 21px;
  --pui-text-p-xs-font-size: 13px;
  --pui-text-p-xs-line-height: 21px; --pui-text-p-xs-line-height-tight: 18px;
  --pui-text-p-xxs-font-size: 11px;
  --pui-text-p-xxs-line-height: 18px; --pui-text-p-xxs-line-height-tight: 16px;

  --pui-button-base-height: 56px;
  --pui-button-base-radius: var(--pui-ui-radius-lg);
  --pui-button-base-padding-h: var(--static-space-3x);
  --pui-button-base-gap: var(--static-space-1-5x);
  --pui-button-base-icon-size: 24px;
  --pui-button-xs-height: 36px;
  --pui-button-xs-radius: var(--pui-ui-radius-md);
  --pui-button-xs-padding-h: var(--static-space-2x);
  --pui-button-xs-gap: var(--static-space-1x);
  --pui-button-sm-height: 44px;
  --pui-button-sm-radius: var(--pui-ui-radius-md);
  --pui-button-sm-padding-h: var(--static-space-2x);
  --pui-button-sm-gap: var(--static-space-1-25x);
  --pui-button-lg-height: 64px;
  --pui-button-lg-radius: var(--pui-ui-radius-xl);
  --pui-button-lg-padding-h: var(--static-space-3x);
  --pui-button-lg-gap: var(--static-space-2x);
  --pui-button-xlg-height: 72px;
  --pui-button-xlg-radius: var(--pui-ui-radius-2xl);
  --pui-button-xlg-padding-h: var(--static-space-3-5x);
  --pui-button-xlg-gap: var(--static-space-2x);
  --pui-button-xxlg-height: 80px;
  --pui-button-xxlg-radius: var(--pui-ui-radius-2xl);
  --pui-button-xxlg-padding-h: var(--static-space-3-5x);
  --pui-button-xxlg-gap: var(--static-space-2x);

  --pui-label-base-height: 32px;
  --pui-label-base-padding-h: var(--static-space-1-5x);
  --pui-label-base-padding-v: var(--static-space-0-5x);
  --pui-label-base-gap: var(--static-space-0-75x);
  --pui-label-base-radius: var(--pui-ui-radius-rounded);
  --pui-label-base-icon-size: 12px;
  --pui-label-lg-height: 36px;
  --pui-label-lg-padding-h: var(--static-space-1-5x);
  --pui-label-lg-padding-v: var(--static-space-0-75x);
  --pui-label-lg-radius: var(--pui-ui-radius-rounded);
  --pui-label-sm-height: 30px;
  --pui-label-sm-padding-h: var(--static-space-1-5x);
  --pui-label-sm-padding-v: var(--static-space-0-25x);
  --pui-label-sm-radius: var(--pui-ui-radius-rounded);
  --pui-label-xs-height: 26px;
  --pui-label-xs-padding-h: var(--static-space-1x);
  --pui-label-xs-padding-v: var(--static-space-0-5x);
  --pui-label-xs-radius: var(--pui-ui-radius-rounded);
  --pui-label-xxs-height: 22px;
  --pui-label-xxs-padding-h: var(--static-space-0-75x);
  --pui-label-xxs-padding-v: var(--static-space-0-25x);
  --pui-label-xxs-radius: var(--pui-ui-radius-rounded);

  --pui-form-base-height: 56px;
  --pui-form-base-radius: var(--pui-ui-radius-lg);
  --pui-form-base-padding-h: var(--static-space-2x);
  --pui-form-base-gap: var(--static-space-1-5x);
  --pui-form-base-icon-size: var(--static-space-2-5x);
  --pui-form-sm-height: 44px;
  --pui-form-sm-radius: var(--pui-ui-radius-md);
  --pui-form-sm-padding-h: var(--static-space-2x);
  --pui-form-sm-gap: var(--static-space-1-5x);

  --pui-accordion-radius: var(--pui-ui-radius-3xl);
  --pui-accordion-padding-h: var(--static-space-4x);
  --pui-accordion-padding-v: var(--static-space-4x);
  --pui-accordion-column-gap: var(--static-space-3x);
  --pui-accordion-gap-v: var(--static-space-3x);
  --pui-accordion-icon-size: var(--static-space-2-5x);

  /* --- mode/light.scss: role ---------------------------------------------- */
  --pui-text-heading: var(--static-gray-950);
  --pui-text-body: var(--static-gray-800);
  --pui-text-lighter: var(--static-gray-600);
  --pui-text-faded: var(--static-gray-500);
  --pui-text-icon: var(--static-gray-700);
  /* Dopisane 09.08.2026 przy kadrach menu zwiniętego (NV-09, NV-10): rola belek
     burgera w stanie otwartym, mode/light.scss linia 540. */
  --pui-text-icon-primary: var(--static-primary-600);
  --pui-text-primary: var(--static-primary-600);
  --pui-text-orange: var(--static-orange-600);
  --pui-text-purple: var(--static-purple-600);
  --pui-text-red: var(--static-red-600);
  --pui-text-blue: var(--static-blue-500);
  --pui-text-discord: var(--static-discord-500);

  --pui-surface-solid-main: var(--static-gray-0);
  --pui-surface-solid-primary: var(--static-primary-950);
  --pui-surface-solid-purple: var(--static-purple-950);
  --pui-surface-gradient-primary-start: var(--static-primary-950);
  --pui-surface-gradient-primary-end: var(--static-primary-900);

  --pui-accordion-bg: var(--static-gray-0);
  --pui-accordion-border: var(--static-gray-200);
  --pui-navigation-separator: var(--static-gray-100);
  --pui-footer-divider: var(--static-gray-200);
  --pui-table-divider: var(--static-gray-150);
  --pui-table-border: var(--static-gray-200);
  --pui-table-bg-muted: var(--static-gray-50);
  --pui-pagination-active: var(--static-primary-600);
  --pui-pagination-muted: var(--static-gray-200);

  --pui-form-bg: var(--static-gray-0);
  --pui-form-border: var(--static-gray-300);
  --pui-form-border-active: var(--static-orange-500);
  --pui-form-border-hover: var(--static-orange-500);
  --pui-form-fg: var(--pui-text-lighter);
  --pui-form-fg-filled: var(--pui-text-heading);
  --pui-form-icon: var(--static-orange-500);

  --pui-label-primary-faded-bg: var(--static-primary-50);
  --pui-label-primary-faded-fg: var(--static-primary-600);
  --pui-label-orange-faded-bg: var(--static-orange-50);
  --pui-label-orange-faded-fg: var(--static-orange-600);
  --pui-label-purple-faded-bg: var(--static-purple-50);
  --pui-label-purple-faded-fg: var(--static-purple-550);
  --pui-label-default-faded-bg: var(--static-gray-100);
  --pui-label-default-faded-fg: var(--static-gray-800);

  --pui-button-primary-solid-bg: var(--static-primary-600);
  --pui-button-primary-solid-bg-hover: var(--static-primary-650);
  --pui-button-primary-solid-fg: var(--static-gray-0);
  --pui-button-primary-faded-bg: var(--static-primary-50);
  --pui-button-primary-faded-bg-hover: var(--static-primary-100);
  --pui-button-primary-faded-fg: var(--static-primary-650);
  --pui-button-primary-outline-bg: var(--static-overlay-light-0);
  --pui-button-primary-outline-bg-hover: var(--static-primary-50);
  --pui-button-primary-outline-border: var(--static-primary-600);
  --pui-button-primary-outline-fg: var(--static-primary-650);
  --pui-button-default-faded-bg: var(--static-gray-100);
  --pui-button-default-faded-bg-hover: var(--static-gray-200);
  --pui-button-default-faded-fg: var(--static-gray-800);
  --pui-button-default-outline-bg: var(--static-overlay-light-0);
  --pui-button-default-outline-bg-hover: var(--static-gray-100);
  --pui-button-default-outline-border: var(--static-gray-600);
  --pui-button-default-outline-fg: var(--static-gray-800);
}

/* =============================================================================
   Chrome katalogu. Nie są to tokeny produktu — to wymiary samego warsztatu,
   trzymane tu, żeby na stronach katalogu nie stała ani jedna wartość wprost.
   ============================================================================= */

:root {
  --cat-drawer-width: 296px;
  --cat-drawer-handle-width: var(--static-space-3x);
  --cat-drawer-handle-height: var(--static-space-12x);
  --cat-tresc-max: 1480px;
  --cat-page-bg: var(--static-gray-50);
  --cat-dot-size: var(--static-space-1x);
  /* Bok rombu. 6 px daje przekątną 8,49 px, czyli znacznik obrócony mieści się
     w tej samej kolumnie co pozostałe trzy (09.08.2026). */
  --cat-dot-diamond: 6px;
  /* ROZMIAR ZNACZNIKA-IKONY. Figura miała 8 px, ikona przy tej wielkości jest
     nieczytelna (rysunek ma w środku szczegół, figura nie miała), więc znacznik
     idzie o dwa kroki skali wyżej. Jedna rola dla szuflady, kafli i filtra. */
  --cat-dot-icon: var(--static-space-2x);
  --cat-dot-confirmed: var(--static-primary-500);
  --cat-dot-draft: var(--static-gray-550);
  --cat-dot-building: var(--static-orange-500);
  /* ZNACZNIK „do akceptacji" BYŁ BIAŁY, czyli niewidoczny wszędzie poza ciemną
     szufladą — zmierzone 09.08.2026 na jasnym tle: rgb(255,255,255) na białym.
     To ta sama klasa co kształty nierozróżnialne przy 8 px: reguła spełniona
     w zapisie, cel nieosiągnięty, i nic tego nie zgłasza. Na niebieski, bo
     rodzina statusów miała już zieleń, pomarańcz i dwie szarości. */
  --cat-dot-review: var(--static-blue-500);
  --cat-dot-retired: var(--static-gray-400);
  /* TŁA LABELEK STATUSU, warstwa ról katalogu (11.08.2026). Rodzina --static-*
     ma dla zieleni, pomarańczu i czerwieni stopień 50, dla niebieskiego NIE —
     zaczyna się od 400. Zamiast dopisywać do palety produktu stopień, którego
     repozytorium nie ma, katalog wyprowadza swoje tło z istniejącego stopnia
     przez color-mix. Wartość jest POCHODNA, nie wymyślona: zmiana palety
     pociągnie ją za sobą. */
  --cat-status-confirmed-bg: var(--static-primary-50);
  --cat-status-confirmed-fg: var(--static-primary-700);
  --cat-status-review-bg: color-mix(in oklab, var(--static-blue-500) 12%, white);
  --cat-status-review-fg: var(--static-blue-700);
  --cat-status-building-bg: var(--static-orange-50);
  --cat-status-building-fg: var(--static-orange-700);
  --cat-status-draft-bg: var(--static-gray-100);
  --cat-status-draft-fg: var(--static-gray-600);
  --cat-status-retired-bg: var(--static-gray-100);
  --cat-status-retired-fg: var(--static-gray-500);
  --cat-status-none-bg: var(--static-red-50);
  --cat-status-none-fg: var(--static-red-600);
  /* KOLOR OPISU W KATALOGU. Rola produktu --pui-text-lighter (gray-600) jest
     dla treści produktu i jej NIE ruszamy — zmiana tam byłaby zmianą systemu,
     nie katalogu. Katalog czyta się na własnym tle (gray-50) i przy dłuższych
     akapitach 600 siada; własna rola o stopień ciemniejsza rozwiązuje to bez
     dotykania warstwy produktu (11.08.2026, uwaga zamawiającego). */
  --cat-opis-fg: var(--static-gray-700);
  /* Pasek przewijania szuflady, warstwa ról katalogu (11.08.2026). Wyprowadzony
     z istniejących stopni palety, nie wymyślony: uchwyt to ta sama szarość, którą
     szuflada niesie na obwiedniach, w wersji przezroczystej. */
  --cat-scroll-thumb: color-mix(in oklab, var(--static-gray-0) 22%, transparent);
  --cat-scroll-thumb-hover: color-mix(in oklab, var(--static-gray-0) 38%, transparent);
  /* ROLA „DROBNY DRUK TECHNICZNY" — od 01.09.2026 NIE JEST monospace.
     Decyzja zamawiającego: „nigdy nie używaj czcionki monospace". Zmiana idzie
     TOKENEM, nie po plikach: nazwa `--cat-mono` stoi w ~200 miejscach katalogu
     i jest identyfikatorem, a wartość jest tym, co ta rola znaczy. Wpisanie
     nowego kroju obok tokenu ominęłoby wszystkie te miejsca po cichu.
     Do przeglądu po tej zmianie: bloki kodu i tabele pomiarowe reaktora, gdzie
     monospace trzymał kolumny w pionie — tam wyrównanie może zmięknąć. */
  --cat-mono: var(--static-typography-font-family), system-ui, sans-serif;
}

/* ZAKAZ MONOSPACE DOMYKA SIĘ TUTAJ, i bez tej reguły był nieprawdziwy.
   Zmierzone 01.09.2026: po podmianie roli --cat-mono na stronie zostało
   19 elementów w monospace — wszystkie to <code> w prozie. Powód: <code>,
   <kbd>, <samp> i <pre> mają krój monospace OD PRZEGLĄDARKI, więc token nie
   miał czego nadpisać. Podmiana wartości roli załatwia miejsca, które krój
   podają JAWNIE, i nie dotyka tych, które dziedziczą go z UA.
   Reguła stoi w arkuszu tokenów, bo ten arkusz niosą wszystkie strony
   katalogu — reset na jednej stronie zostawiłby resztę katalogu w monospace,
   a ściąga w Opisie DS obiecuje, że nie ma go nigdzie. */
code, kbd, samp, pre, tt {
  font-family: inherit;
  font-size: inherit;
}

:root {
  --cat-retired-opacity: 0.45;

  /* Chrome warsztatu: szuflada i nagłówek to ta sama ciemna powierzchnia. */
  --cat-chrome-bg: var(--static-gray-1000);
  --cat-chrome-bg-raised: var(--static-gray-950);
  --cat-chrome-glow: linear-gradient(180deg, var(--pui-surface-gradient-primary-start) 0%, var(--pui-surface-gradient-primary-end) 100%);
  --cat-chrome-glow-h: linear-gradient(90deg, var(--pui-surface-gradient-primary-start) 0%, var(--pui-surface-gradient-primary-end) 100%);
  --cat-chrome-fg: var(--static-gray-0);
  --cat-chrome-fg-muted: var(--static-gray-400);
  --cat-chrome-fg-faint: var(--static-gray-550);
  --cat-chrome-divider: var(--static-gray-800);
  --cat-chrome-hover: var(--static-overlay-light-50);
  --cat-chrome-active-bg: var(--static-overlay-light-100);
  --cat-chrome-active-fg: var(--static-gray-0);
  --cat-chrome-radius: var(--pui-ui-radius-5xl);
  --cat-chrome-shadow: 0 var(--static-space-3x) var(--static-space-9x) var(--static-overlay-dark-200), 0 var(--static-space-0-5x) var(--static-space-2x) var(--static-overlay-dark-100);
  --cat-status-fg: var(--static-gray-950);
  --cat-status-pill-bg: var(--static-overlay-light-100);
  --cat-status-pill-bg-strong: var(--static-overlay-light-200);
  /* Szerokość wiodącego akapitu strony: wcześniej pożyczał minimalną szerokość
     kolumny kart (420px) i przez to był węższy niż wszystko pod nim. */
  --cat-lead-max: 100%;
  /* Przygaszenie warstw pomocniczych chrome: podpis roli i pas metadanych.
     Jedna rola, żeby obie rzeczy gasły tak samo. */
  --cat-meta-opacity: 0.62;
  /* Kontrolki WARSZTATU: pole szukania i filtr. Nie biorą rodziny formularza
     produktu, bo ta jest dostrojona do szarej powierzchni (gray-950) i na
     zielonym gradiencie szuflady daje obcy prostokąt — zmierzone: ta sama
     wartość co poprzednie role chrome, czyli podmiana bez różnicy.
     Powierzchnia jest tu WYPROWADZONA z tła: przezroczysta, więc gradient
     przez nią prześwituje i kontrolka należy do szuflady, a nie leży na niej.
     Obwiednia aktywna zostaje z produktu — to jedyna rzecz, która ma tu
     nieść znaczenie, a nie barwę. */
  --cat-control-bg: var(--static-overlay-light-50);
  --cat-control-bg-hover: var(--static-overlay-light-100);
  --cat-control-border: var(--static-overlay-light-150);
  --cat-control-border-hover: var(--static-overlay-light-300);
  --cat-control-fg: var(--pui-text-heading);
  --cat-control-placeholder: var(--pui-text-faded);
  /* Skala chrome: nagłówek i szuflada mają być CICHSZE od treści, którą
     opisują. Stopień niżej niż wcześniej i ciaśniejsze wiersze listy. */
  --cat-title-size: var(--pui-text-h3-font-size);
  --cat-title-line: var(--pui-text-h3-line-height);
  --cat-lead-size: var(--pui-text-p-lg-font-size);
  --cat-lead-line: var(--pui-text-p-lg-line-height);
  --cat-item-size: var(--pui-text-p-sm-font-size);
  --cat-item-padding-v: var(--static-space-0-5x);
  --cat-item-padding-h: var(--static-space-1-25x);
  --cat-nav-gap: var(--static-space-1x);
  --cat-card-shadow: 0 var(--static-space-0-25x) var(--static-space-1x) var(--static-overlay-dark-50), 0 var(--static-space-1-5x) var(--static-space-4x) var(--static-overlay-dark-50);

  /* Rola katalogu dla linii nazw klas. Nie pożycza tokenu semantyki produktu. */
  --cat-class-line: var(--static-gray-450);
  --cat-class-line-bg: var(--static-gray-50);
  --cat-class-line-border: var(--static-gray-200);
}

/* =============================================================================
   Odczyt 2 — 06.08.2026. Domknięcie zestawów potrzebnych stronom treści:
   pełna macierz przycisku, content block i sekcja opisu, kontekst on-dark.
   Pliki źródłowe: scales/desktop.scss, mode/light.scss, mode/lightondark.scss,
   elements/buttons.scss. Wartości bez zmian względem kodu.
   ============================================================================= */

:root {
  /* scales/desktop.scss — rozmiary przycisku, reszta pól */
  --pui-button-loader-weight: 4px;
  --pui-button-base-border-width: 0px;
  --pui-button-base-outline-border-width: var(--pui-ui-border-outline-border-width);
  --pui-button-base-padding-v: var(--static-space-1-5x);
  --pui-button-base-loader-size: 32px;
  --pui-button-base-focus-ring-radius: var(--pui-ui-radius-xl);
  --pui-button-xs-border-width: 0px;
  --pui-button-xs-outline-border-width: var(--pui-ui-border-outline-border-width-active);
  --pui-button-xs-padding-v: var(--static-space-0-75x);
  --pui-button-xs-icon-size: 20px;
  --pui-button-xs-loader-size: 20px;
  --pui-button-xs-focus-ring-radius: var(--pui-ui-radius-lg);
  --pui-button-sm-border-width: 0px;
  --pui-button-sm-outline-border-width: var(--pui-ui-border-outline-border-width);
  --pui-button-sm-padding-v: var(--static-space-1-25x);
  --pui-button-sm-icon-size: 20px;
  --pui-button-sm-loader-size: 24px;
  --pui-button-sm-focus-ring-radius: var(--pui-ui-radius-lg);
  --pui-button-lg-border-width: 0px;
  --pui-button-lg-outline-border-width: var(--pui-ui-border-outline-border-width);
  --pui-button-lg-padding-v: var(--static-space-2x);
  --pui-button-lg-icon-size: 24px;
  --pui-button-lg-loader-size: 32px;
  --pui-button-lg-focus-ring-radius: var(--pui-ui-radius-2xl);
  --pui-button-xlg-border-width: 0px;
  --pui-button-xlg-outline-border-width: var(--pui-ui-border-outline-border-width);
  --pui-button-xlg-padding-v: var(--static-space-2-5x);
  --pui-button-xlg-icon-size: 28px;
  --pui-button-xlg-loader-size: 36px;
  --pui-button-xlg-focus-ring-radius: 14px;
  --pui-button-xxlg-border-width: 0px;
  --pui-button-xxlg-outline-border-width: var(--pui-ui-border-outline-border-width);
  --pui-button-xxlg-padding-v: var(--static-space-2-5x);
  --pui-button-xxlg-icon-size: 28px;
  --pui-button-xxlg-loader-size: 40px;
  --pui-button-xxlg-focus-ring-radius: 14px;

  /* mode/light.scss — domknięcie roli przycisku primary */
  --pui-button-primary-solid-bg-active: var(--static-primary-700);
  --pui-button-primary-solid-bg-disabled: var(--static-gray-300);
  --pui-button-primary-solid-bg-loading: var(--static-primary-800);
  --pui-button-primary-solid-border: var(--static-primary-600);
  --pui-button-primary-solid-border-active: var(--static-primary-700);
  --pui-button-primary-solid-border-hover: var(--static-primary-650);
  --pui-button-primary-solid-border-disabled: var(--static-gray-300);
  --pui-button-primary-solid-fg-disabled: var(--static-gray-400);
  --pui-button-primary-faded-bg-active: var(--static-primary-200);
  --pui-button-primary-faded-bg-disabled: var(--static-gray-300);
  --pui-button-primary-faded-border: var(--static-primary-50);
  --pui-button-primary-faded-border-active: var(--static-primary-200);
  --pui-button-primary-faded-border-hover: var(--static-primary-100);
  --pui-button-primary-faded-fg-disabled: var(--static-gray-400);
  --pui-button-primary-outline-bg-active: var(--static-primary-100);
  --pui-button-primary-outline-bg-disabled: var(--static-overlay-light-0);
  --pui-button-primary-outline-border-active: var(--static-primary-600);
  --pui-button-primary-outline-border-hover: var(--static-primary-600);
  --pui-button-primary-outline-border-disabled: var(--static-gray-300);
  --pui-button-primary-outline-fg-disabled: var(--static-gray-400);

  /* mode/light.scss — domknięcie roli przycisku default */
  --pui-button-default-solid-bg: var(--static-gray-800);
  --pui-button-default-solid-bg-hover: var(--static-gray-900);
  --pui-button-default-solid-bg-active: var(--static-gray-950);
  --pui-button-default-solid-bg-disabled: var(--static-gray-300);
  --pui-button-default-solid-fg: var(--static-gray-0);
  --pui-button-default-solid-fg-disabled: var(--static-gray-400);
  --pui-button-default-faded-bg-active: var(--static-gray-300);
  --pui-button-default-faded-fg-disabled: var(--static-gray-350);
  --pui-button-default-outline-bg-active: var(--static-gray-200);
  --pui-button-default-outline-border-hover: var(--static-gray-600);
  /* DZIURA W KOPII, nie brak w kodzie: rola stoi w mode/light.scss w linii 93
     i jest wołana w PlanComparisonTable.vue w linii 736, a katalog przepisał
     obok niej samo -fg-disabled. Nierozwiązana nazwa nie gaśnie głośno —
     deklaracja border-color jest po cichu odrzucana, więc strzałka wyłączona
     miała obwiednię stanu zwykłego (PR-19a). */
  --pui-button-default-outline-border-disabled: var(--static-gray-300);
  --pui-button-default-outline-fg-disabled: var(--static-gray-350);

  /* scales/desktop.scss — content block i sekcja opisu.
     SPROSTOWANIE 08.08.2026: dziewięć ról tej grupy niosło wartości z
     scales/mobile.scss i scales/tablet.scss pod nagłówkiem „desktop”.
     Skutek był widoczny gołym okiem: rama ilustracji bloku funkcji miała
     284 px zamiast 558, czyli ilustracje były o połowę za małe, a wyściółka
     bloku i rama stały na stopniach z telefonu. Wartości przepisane z
     app/assets/css/tokens/scales/desktop.scss, linie 190–204. */
  --pui-content-block-body-radius: var(--pui-ui-radius-6xl);
  --pui-content-block-body-border-width: var(--pui-ui-border-outline-border-width);
  --pui-content-block-container-gap: var(--static-space-2x);
  --pui-content-block-container-padding-h: var(--static-space-3x);
  --pui-content-block-container-padding-v: var(--static-space-3x);
  --pui-content-block-illustration-container-default-padding-h: var(--static-space-4x);
  --pui-content-block-illustration-container-default-padding-v: var(--static-space-4x);
  --pui-content-block-illustration-container-default-radius: var(--pui-ui-radius-4xl);
  --pui-content-block-illustration-container-default-slot-max-size: 558px;
  --pui-content-block-illustration-container-default-vertical-height: 300px;
  --pui-content-block-illustration-container-custom-padding-custom-h: var(--static-space-13x);
  --pui-content-block-illustration-container-custom-padding-h: var(--static-space-4x);
  --pui-content-block-illustration-container-custom-padding-v: var(--static-space-4x);
  --pui-content-block-illustration-container-custom-radius: var(--pui-ui-radius-4xl);
  --pui-content-block-illustration-container-custom-slot-max-size: 542px;
  --pui-section-desc-default-base-body-gap: var(--static-space-5x);
  --pui-section-desc-default-base-body-padding-h: var(--static-space-5x);
  --pui-section-desc-default-base-body-padding-v: var(--static-space-5x);
  --pui-section-desc-default-base-body-padding-extra-h: var(--static-space-12x);
  --pui-section-desc-default-base-main-gap: var(--static-space-3x);
  --pui-section-desc-default-base-main-rows-gap: var(--static-space-1-5x);

  /* scales/desktop.scss — reszta pól etykiety i formularza */
  --pui-label-base-icon-size: 12px;
  --pui-label-lg-icon-size: 16px;
  --pui-label-sm-icon-size: 12px;
  --pui-label-xs-icon-size: 12px;
  --pui-label-xxs-icon-size: 10px;
  --pui-label-lg-gap: var(--static-space-1x);
  --pui-label-sm-gap: var(--static-space-0-75x);
  --pui-label-xs-gap: var(--static-space-0-5x);
  --pui-label-xxs-gap: var(--static-space-0-5x);
  --pui-form-base-border-width: var(--pui-ui-border-outline-border-width);
  --pui-form-sm-border-width: var(--pui-ui-border-outline-border-width);

  /* mode/light.scss — etykieta: TYLKO wariant faded, cztery kolory.
     Solid i outline nie mają w kodzie ról; braku nie uzupełniamy. */
  --pui-label-primary-faded-bg-hover: var(--static-primary-100);
  --pui-label-primary-faded-bg-active: var(--static-primary-200);
  --pui-label-primary-faded-fg-hover: var(--static-primary-650);
  --pui-label-primary-faded-fg-active: var(--static-primary-700);
  --pui-label-orange-faded-bg-hover: var(--static-orange-100);
  --pui-label-orange-faded-bg-active: var(--static-orange-200);
  --pui-label-orange-faded-fg-hover: var(--static-orange-650);
  --pui-label-orange-faded-fg-active: var(--static-orange-700);
  --pui-label-purple-faded-bg-hover: var(--static-purple-100);
  --pui-label-purple-faded-bg-active: var(--static-purple-200);
  --pui-label-purple-faded-fg-hover: var(--static-purple-600);
  --pui-label-purple-faded-fg-active: var(--static-purple-650);
  --pui-label-default-faded-bg-hover: var(--static-gray-200);
  --pui-label-default-faded-bg-active: var(--static-gray-300);
  --pui-label-default-faded-fg-hover: var(--static-gray-900);
  --pui-label-default-faded-fg-active: var(--static-gray-950);

  /* DOMKNIĘCIE RODZINY ETYKIETY — 05.09.2026, plan domknięcia atomów, poz. 2.
     Klasy .badge--{kolor} i --{kolor}-outline generowały się dla sześciu kolorów,
     a role istniały wyłącznie dla wariantu faded w czterech — 14 z 18 pól nic nie
     malowało. Wartości przepisane z WZORU siostrzanych rodzin: solid i outline
     z rodziny przycisku, faded z wariantu, który etykieta już miała. W produkcie
     tych ról jeszcze nie ma: deweloper dopisuje je z dziennika, my ich nie
     zgadujemy — każda pochodzi z pasma tego samego koloru.
     Czego NIE dopisano, bo nie ma z czego: stopień xl (skala label kończy się na
     lg) oraz faded i outline dla koloru info (pasmo blue ma tylko stopnie ciemne,
     600-700, bez 50/100/200). Obie rzeczy WYCIĘTE z arkusza klas. */

  /* DOMKNIĘCIE RODZINY ANIMACJI — 05.09.2026, plan domknięcia atomów.
     Rodzina nie wołała ani jednej roli barwy ani czasu: trzy barwy stały HEXEM
     wprost w regułach, a czasy trwania liczbami. Role poniżej to NAZWY dla
     wartości, które kod już ma — wartość przepisana co do znaku, więc wygląd
     się nie zmienia, ale da się ją zmienić w jednym miejscu.
     Dwie barwy pierścienia NIE ISTNIEJĄ W PALECIE (#E5E5F0 i #F2F2F7 leżą między
     gray-150 i gray-200) — nie podmieniam ich na najbliższy stopień, bo to byłaby
     cicha zmiana wyglądu produktu; rozjazd zgłoszony w docs/Rozbieznosci. */
  --pui-animation-pulse-ring-outer: #E5E5F0;
  --pui-animation-pulse-ring-inner: #F2F2F7;
  --pui-animation-pulse-dot-bg: var(--static-primary-500);
  --pui-animation-pulse-dot-halo: #07C07E1A;
  --pui-animation-pulse-duration: 2s;
  --pui-animation-pulse-star-duration: 3s;
  --pui-animation-slide-fade-duration: 0.4s;
  --pui-animation-slide-fade-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --pui-label-primary-solid-bg: var(--static-primary-600);
  --pui-label-primary-solid-bg-hover: var(--static-primary-650);
  --pui-label-primary-solid-bg-active: var(--static-primary-700);
  --pui-label-primary-solid-fg: var(--static-gray-0);
  --pui-label-primary-solid-fg-hover: var(--static-gray-0);
  --pui-label-primary-solid-fg-active: var(--static-gray-0);
  --pui-label-primary-outline-bg: var(--static-overlay-light-0);
  --pui-label-primary-outline-bg-hover: var(--static-primary-50);
  --pui-label-primary-outline-bg-active: var(--static-primary-100);
  --pui-label-primary-outline-border: var(--static-primary-600);
  --pui-label-primary-outline-fg: var(--static-primary-650);
  --pui-label-primary-outline-fg-hover: var(--static-primary-650);
  --pui-label-primary-outline-fg-active: var(--static-primary-600);
  --pui-label-orange-solid-bg: var(--static-orange-600);
  --pui-label-orange-solid-bg-hover: var(--static-orange-650);
  --pui-label-orange-solid-bg-active: var(--static-orange-700);
  --pui-label-orange-solid-fg: var(--static-gray-0);
  --pui-label-orange-solid-fg-hover: var(--static-gray-0);
  --pui-label-orange-solid-fg-active: var(--static-gray-0);
  --pui-label-orange-outline-bg: var(--static-overlay-light-0);
  --pui-label-orange-outline-bg-hover: var(--static-orange-50);
  --pui-label-orange-outline-bg-active: var(--static-orange-100);
  --pui-label-orange-outline-border: var(--static-orange-600);
  --pui-label-orange-outline-fg: var(--static-orange-650);
  --pui-label-orange-outline-fg-hover: var(--static-orange-650);
  --pui-label-orange-outline-fg-active: var(--static-orange-600);
  --pui-label-purple-solid-bg: var(--static-purple-600);
  --pui-label-purple-solid-bg-hover: var(--static-purple-650);
  --pui-label-purple-solid-bg-active: var(--static-purple-700);
  --pui-label-purple-solid-fg: var(--static-gray-0);
  --pui-label-purple-solid-fg-hover: var(--static-gray-0);
  --pui-label-purple-solid-fg-active: var(--static-gray-0);
  --pui-label-purple-outline-bg: var(--static-overlay-light-0);
  --pui-label-purple-outline-bg-hover: var(--static-purple-50);
  --pui-label-purple-outline-bg-active: var(--static-purple-100);
  --pui-label-purple-outline-border: var(--static-purple-600);
  --pui-label-purple-outline-fg: var(--static-purple-650);
  --pui-label-purple-outline-fg-hover: var(--static-purple-650);
  --pui-label-purple-outline-fg-active: var(--static-purple-600);
  --pui-label-default-solid-bg: var(--static-gray-800);
  --pui-label-default-solid-bg-hover: var(--static-gray-850);
  --pui-label-default-solid-bg-active: var(--static-gray-900);
  --pui-label-default-solid-fg: var(--static-gray-0);
  --pui-label-default-solid-fg-hover: var(--static-gray-0);
  --pui-label-default-solid-fg-active: var(--static-gray-0);
  --pui-label-default-outline-bg: var(--static-overlay-light-0);
  --pui-label-default-outline-bg-hover: var(--static-gray-50);
  --pui-label-default-outline-bg-active: var(--static-gray-100);
  --pui-label-default-outline-border: var(--static-gray-300);
  --pui-label-default-outline-fg: var(--static-gray-800);
  --pui-label-default-outline-fg-hover: var(--static-gray-900);
  --pui-label-default-outline-fg-active: var(--static-gray-950);
  --pui-label-red-faded-bg: var(--static-red-50);
  --pui-label-red-faded-bg-hover: var(--static-red-100);
  --pui-label-red-faded-bg-active: var(--static-red-200);
  --pui-label-red-faded-fg: var(--static-red-600);
  --pui-label-red-faded-fg-hover: var(--static-red-650);
  --pui-label-red-faded-fg-active: var(--static-red-700);
  --pui-label-red-solid-bg: var(--static-red-600);
  --pui-label-red-solid-bg-hover: var(--static-red-650);
  --pui-label-red-solid-bg-active: var(--static-red-700);
  --pui-label-red-solid-fg: var(--static-gray-0);
  --pui-label-red-solid-fg-hover: var(--static-gray-0);
  --pui-label-red-solid-fg-active: var(--static-gray-0);
  --pui-label-red-outline-bg: var(--static-overlay-light-0);
  --pui-label-red-outline-bg-hover: var(--static-red-50);
  --pui-label-red-outline-bg-active: var(--static-red-100);
  --pui-label-red-outline-border: var(--static-red-600);
  --pui-label-red-outline-fg: var(--static-red-650);
  --pui-label-red-outline-fg-hover: var(--static-red-650);
  --pui-label-red-outline-fg-active: var(--static-red-600);
  --pui-label-info-solid-bg: var(--static-blue-600);
  --pui-label-info-solid-bg-hover: var(--static-blue-650);
  --pui-label-info-solid-bg-active: var(--static-blue-700);
  --pui-label-info-solid-fg: var(--static-gray-0);
  --pui-label-info-solid-fg-hover: var(--static-gray-0);
  --pui-label-info-solid-fg-active: var(--static-gray-0);

  /* mode/light.scss — content block, role */
  --pui-content-block-body-primary-bg: var(--static-gray-0);
  --pui-content-block-body-primary-border-start: var(--static-primary-500);
  --pui-content-block-body-primary-border-end: var(--static-gray-300);
  --pui-content-block-body-primary-primary-bg-start: var(--static-primary-950);
  --pui-content-block-body-primary-primary-bg-end: var(--static-primary-900);
  --pui-content-block-illustration-container-primary-bg-start: var(--static-primary-950);
  --pui-content-block-illustration-container-primary-bg-end: var(--static-primary-800);
  --pui-content-block-illustration-container-purple-bg-start: var(--static-purple-950);
  --pui-content-block-illustration-container-purple-bg-end: var(--static-purple-700);
  --pui-content-block-illustration-container-gray-bg-start: var(--static-gray-0);
  --pui-content-block-illustration-container-gray-bg-end: var(--static-gray-100);
}

:root {
  /* scales/desktop.scss — testimonial */
  --pui-testimonial-body-active-border-width: var(--pui-ui-border-outline-border-width);
  --pui-testimonial-body-active-gap: var(--static-space-4x);
  --pui-testimonial-body-active-height-max: 528px;
  --pui-testimonial-body-active-max-width: 1200px;
  --pui-testimonial-body-active-min-width: 1024px;
  --pui-testimonial-body-active-padding-h: var(--static-space-3x);
  --pui-testimonial-body-active-padding-v: var(--static-space-3x);
  --pui-testimonial-body-active-radius: var(--pui-ui-radius-6xl);
  --pui-testimonial-body-default-height-max: 528px;
  --pui-testimonial-body-default-min-width: 200px;
  --pui-testimonial-body-default-padding-h: var(--static-space-0x);
  --pui-testimonial-body-default-padding-v: var(--static-space-3x);
  --pui-testimonial-body-default-radius: var(--pui-ui-radius-4xl);
  --pui-testimonial-body-default-width-max: 400px;
  --pui-testimonial-container-active-padding-v: var(--static-space-3x);
  --pui-testimonial-container-default-padding-v: var(--static-space-1x);
  --pui-testimonial-graphic-container-height: 480px;
  --pui-testimonial-graphic-container-max-width: 320px;
  --pui-testimonial-graphic-container-max-width-expanded: 400px;
  --pui-testimonial-graphic-container-min-width: 200px;
  --pui-testimonial-graphic-container-padding-h: var(--static-space-1-5x);
  --pui-testimonial-graphic-container-padding-v: var(--static-space-1-5x);
  --pui-testimonial-graphic-container-radius: var(--pui-ui-radius-4xl);
  --pui-testimonial-graphic-label-collapsed-border-width: var(--pui-ui-border-outline-border-width);
  --pui-testimonial-graphic-label-collapsed-padding-h: var(--static-space-3x);
  --pui-testimonial-graphic-label-collapsed-padding-v: var(--static-space-1x);
  --pui-testimonial-graphic-label-collapsed-radius: var(--pui-ui-radius-2xl);
  --pui-testimonial-graphic-label-expanded-border-width: var(--pui-ui-border-outline-border-width);
  --pui-testimonial-graphic-label-expanded-padding-h: var(--static-space-3x);
  --pui-testimonial-graphic-label-expanded-padding-v: var(--static-space-2x);
  --pui-testimonial-graphic-label-expanded-radius: var(--pui-ui-radius-2xl);
  --pui-testimonial-graphic-label-expanded-text-gap: var(--static-space-0-5x);
  --pui-testimonial-logo-max-width: 160px;
  --pui-testimonial-logo-min-width: 120px;
  --pui-testimonial-main-actions-gap: var(--static-space-3x);
  --pui-testimonial-main-actions-logo-padding-h: var(--static-space-3x);
  --pui-testimonial-main-gap: var(--static-space-5x);
  --pui-testimonial-main-padding-h: var(--static-space-3x);
  --pui-testimonial-main-padding-v: var(--static-space-3x);
  --pui-testimonial-main-text-gap: var(--static-space-3x);
  --pui-testimonial-title-height-max: 84px;

  /* mode/light.scss — testimonial, role */
  --pui-testimonial-body-bg: var(--static-gray-0);
  --pui-testimonial-body-border-end: var(--static-primary-500);
  --pui-testimonial-body-border-start: var(--static-gray-300);
  --pui-testimonial-border: var(--static-gray-200);
  --pui-testimonial-border-active: var(--static-orange-500);
  --pui-testimonial-border-hover: var(--static-orange-500);
  --pui-testimonial-fg: var(--pui-text-lighter);
  --pui-testimonial-fg-filled: var(--pui-text-heading);
  --pui-testimonial-graphic-container-bg-end: var(--static-primary-800);
  --pui-testimonial-graphic-container-bg-hover-end: var(--static-primary-600);
  --pui-testimonial-graphic-container-bg-hover-start: var(--static-primary-950);
  --pui-testimonial-graphic-container-bg-start: var(--static-primary-950);
  --pui-testimonial-graphic-container-overlay-end: var(--static-primary-950);
  --pui-testimonial-graphic-container-overlay-hover-end: var(--static-primary-900);
  --pui-testimonial-graphic-container-overlay-hover-start: #02171000;
  --pui-testimonial-graphic-container-overlay-start: #02171000;
  --pui-testimonial-graphic-label-bg: var(--static-overlay-dark-100);
  --pui-testimonial-graphic-label-bg-hover: var(--static-overlay-light-100);
  --pui-testimonial-graphic-label-border: var(--static-overlay-light-300);
  --pui-testimonial-graphic-label-border-hover: var(--static-overlay-light-400);
  --pui-testimonial-icon: var(--static-orange-500);
  --pui-testimonial-main-logo-fg: var(--static-gray-1000);
  --pui-testimonial-main-symbol-bg-end: var(--static-primary-200);
  --pui-testimonial-main-symbol-bg-start: var(--static-primary-600);

  /* scales/desktop.scss — nawigacja */
  --pui-navigation-height: 116px;
  --pui-navigation-width-max: 1420px;
  --pui-navigation-main-padding-h: var(--static-space-4x);
  --pui-navigation-main-padding-top: var(--static-space-1-5x);
  --pui-navigation-main-padding-bottom: var(--static-space-1-5x);
  --pui-navigation-main-menu-item-gap: var(--static-space-1x);
  /* Dopisane 09.08.2026: odstęp między pozycjami w .nav__nav, ta sama wartość
     we wszystkich czterech skalach (scales/desktop.scss linia 388). */
  --pui-navigation-main-items-wrap-gap: var(--static-space-1x);
  --pui-navigation-main-menu-item-item-padding-h: var(--static-space-1-5x);
  --pui-navigation-main-menu-item-item-padding-v: var(--static-space-1-5x);
  --pui-navigation-main-menu-item-icon-size: 20px;
  --pui-navigation-main-action-padding-left: var(--static-space-4x);
  --pui-navigation-secondary-padding-h: var(--static-space-4x);
  --pui-navigation-secondary-padding-v: var(--static-space-0-5x);
  --pui-navigation-secondary-gap: var(--static-space-4x);
  --pui-navigation-secondary-item-padding-h: var(--static-space-1-5x);
  --pui-navigation-secondary-item-padding-v: var(--static-space-1-25x);
  --pui-navigation-secondary-divider-width: var(--pui-ui-border-outline-border-width);
  --pui-navigation-left-navigation-gap: var(--static-space-1x);
  --pui-ui-blur-md: 12px;

  /* mode/light.scss — nawigacja, role */
  --pui-navigation-bg-scroll: var(--static-gray-0);

  /* mode/light.scss — znak. UWAGA: wartość szesnastkowa wprost w warstwie mode. */
  --pui-logo-logo: #FFFFFFFF;
  --pui-logo-height: var(--static-space-7x);
}

/* mode/lightondark.scss — ten sam selektor atrybutu co w kodzie.
   Powierzchnia ciemna nie jest osobnym tokenem, jest przełączeniem ról. */
[data-context="on-dark"] {
  --pui-text-heading: var(--static-gray-0);
  --pui-text-body: var(--static-overlay-light-950);
  --pui-text-lighter: var(--static-overlay-light-800);
  --pui-text-faded: var(--static-overlay-light-650);
  --pui-text-icon: var(--static-gray-500);
  --pui-text-icon-primary: var(--static-primary-400);
  --pui-text-primary: var(--static-primary-400);
  --pui-text-orange: var(--static-orange-400);
  --pui-text-purple: var(--static-purple-400);
  --pui-text-red: var(--static-red-400);
  --pui-text-blue: var(--static-blue-400);
  --pui-text-discord: var(--static-discord-400);
  --pui-surface-solid-main: var(--static-gray-1000);
  --pui-button-primary-solid-bg: var(--static-primary-600);
  --pui-button-primary-solid-bg-hover: var(--static-primary-550);
  --pui-button-primary-solid-bg-active: var(--static-primary-500);
  --pui-button-primary-solid-fg: var(--static-gray-0);
  --pui-button-primary-outline-fg: var(--static-primary-500);
  --pui-button-primary-outline-border: var(--static-primary-600);
  --pui-button-primary-outline-bg: var(--static-overlay-light-0);
  --pui-button-primary-outline-bg-hover: var(--static-overlay-light-100);
  --pui-button-primary-faded-bg: var(--static-overlay-light-100);
  --pui-button-primary-faded-bg-hover: var(--static-overlay-light-200);
  --pui-button-primary-faded-fg: var(--static-primary-500);
  --pui-button-default-outline-fg: var(--static-gray-300);
  --pui-button-default-faded-bg: var(--static-overlay-light-100);
  --pui-button-default-faded-fg: var(--static-gray-300);

  /* Nawigacja: separator inny na ciemnym tle, tło przewinięcia to samo */
  --pui-navigation-separator: var(--static-overlay-light-100);
  --pui-navigation-bg-scroll: var(--static-gray-0);

  /* Testimonial — komplet ról ciemnych */
  --pui-testimonial-body-bg: var(--static-gray-1000);
  --pui-testimonial-body-border-start: var(--static-gray-700);
  --pui-testimonial-border: var(--static-gray-700);
  --pui-testimonial-border-active: var(--static-orange-300);
  --pui-testimonial-border-hover: var(--static-orange-300);
  --pui-testimonial-icon: var(--static-orange-350);
  --pui-testimonial-main-logo-fg: var(--static-gray-0);
  --pui-testimonial-main-symbol-bg-end: var(--static-primary-50);
  --pui-testimonial-main-symbol-bg-start: var(--static-primary-300);

  /* Accordion — jedyny atom z pełnym przełączeniem powierzchni */
  --pui-accordion-bg: var(--static-gray-950);
  --pui-accordion-border: var(--static-gray-700);

  /* Formularz — tło, obwiednia i ikona MAJĄ warianty ciemne */
  --pui-form-bg: var(--static-gray-950);
  --pui-form-border: var(--static-gray-700);
  --pui-form-border-active: var(--static-orange-300);
  --pui-form-border-hover: var(--static-orange-300);
  --pui-form-icon: var(--static-orange-350);

  /* Etykieta — tła wszystkich czterech kolorów schodzą na overlay.
     UWAGA: --pui-label-primary-faded-fg NIE jest tu przedefiniowany,
     w przeciwieństwie do orange, purple i default. Brak jest w kodzie,
     nie w odczycie — zgłoszony na liście rozbieżności. */
  --pui-label-primary-faded-bg: var(--static-overlay-light-100);
  --pui-label-primary-faded-bg-hover: var(--static-overlay-light-200);
  --pui-label-primary-faded-bg-active: var(--static-overlay-light-300);
  --pui-label-orange-faded-bg: var(--static-overlay-light-100);
  --pui-label-orange-faded-bg-hover: var(--static-overlay-light-200);
  --pui-label-orange-faded-bg-active: var(--static-overlay-light-300);
  --pui-label-orange-faded-fg: var(--static-orange-450);
  --pui-label-orange-faded-fg-hover: var(--static-orange-400);
  --pui-label-orange-faded-fg-active: var(--static-orange-350);
  --pui-label-purple-faded-bg: var(--static-overlay-light-100);
  --pui-label-purple-faded-bg-hover: var(--static-overlay-light-200);
  --pui-label-purple-faded-bg-active: var(--static-overlay-light-300);
  --pui-label-purple-faded-fg: var(--static-purple-350);
  --pui-label-purple-faded-fg-hover: var(--static-purple-300);
  --pui-label-purple-faded-fg-active: var(--static-purple-200);
  --pui-label-default-faded-bg: var(--static-overlay-light-100);
  --pui-label-default-faded-bg-hover: var(--static-overlay-light-200);
  --pui-label-default-faded-bg-active: var(--static-overlay-light-300);
  --pui-label-default-faded-fg: var(--static-overlay-light-800);
  --pui-label-default-faded-fg-hover: var(--static-overlay-light-900);
  --pui-label-default-faded-fg-active: var(--static-gray-0);

  /* Domknięcie dziury primary-faded w kontekście ciemnym — 05.09.2026, plan
     domknięcia atomów poz. 2. Trzy role z 24: siostry (orange, purple, default)
     miały przedefiniowany tekst, primary wyłącznie tła, i to była JEDYNA
     przyczyna negatywnego wyniku testu powierzchni dla etykiety. Stopnie wzięte
     z wzoru sióstr: jaśniejszy niż w warstwie jasnej, przy wskazaniu jeszcze
     jaśniejszy. */
  /* ALIAS MUSI BYĆ POWTÓRZONY W KAŻDEJ WARSTWIE — poprawka 05.09.2026 po przeglądzie.
     Podstawienie var() w custom property zachodzi na elemencie DEKLARACJI, więc alias
     zapisany tylko w :root zamraża wartość warstwy jasnej: potomkowie dziedziczą już
     podstawioną barwę i przedefiniowanie roli wskazywanej nigdy do nich nie dochodzi.
     Zmierzony skutek przed poprawką: .text-variant-strong dawało niemal czerń na
     niemal czarnym tle na KAŻDEJ ciemnej powierzchni produktu — baner, stopka, sekcje
     on-dark. Alias na rolę nie jest więc jednym nośnikiem wartości, tylko dwoma
     zapisami tej samej intencji, po jednym na warstwę. */
  --pui-text-strong: var(--pui-text-heading);
  --pui-text-default: var(--pui-text-body);

  --pui-label-primary-faded-fg: var(--static-primary-350);
  --pui-label-primary-faded-fg-hover: var(--static-primary-300);
  --pui-label-primary-faded-fg-active: var(--static-primary-250);

  /* Domknięcie rodziny formularza w kontekście ciemnym — brakowało 2 ról,
     przez co pole szukania w szufladzie brało kolor pisma z warstwy jasnej. */
  --pui-form-fg: var(--pui-text-lighter);
  --pui-form-fg-filled: var(--pui-text-heading);
  /* Kontrolki warsztatu: kolor pisma musi rozwiązać się TUTAJ, nie na :root. */
  --cat-control-fg: var(--static-gray-0);
  --cat-control-placeholder: var(--static-overlay-light-650);
}

/* =============================================================================
   Role katalogu dla stron treści.
   Dwa światy trzymane osobno pod dwiema nazwami, żeby jedna nazwa nie znaczyła
   dwóch rzeczy (dług nr 3): --cat-scenery-* to SCENERIA HOSTA, czyli obwiednia
   kadru rysowana przez katalog. --cat-probe-* to POWIERZCHNIE SYSTEMU, które
   są przedmiotem testu — ich wartości pochodzą wprost z produktu.
   ============================================================================= */

:root {
  /* sceneria hosta — obwiednia kadru, prostsza niż każdy komponent w środku */
  --cat-scenery-bg: var(--static-gray-0);
  --cat-frame-min-height: var(--static-space-15x);
  /* Wysokość kadru dla rzeczy pozycjonowanych absolutnie, np. warstwy tła:
     gospodarz musi mieć własną wysokość, bo inset:0 nie ma czego wypełnić.
     To wymiar WARSZTATU, nie produktu, więc ma własną rolę zamiast pożyczać
     stopień skali odstępów — tym bardziej że stopnia 40x w skali nie ma. */
  --cat-frame-bg-height: 560px;
  /* Kadr kwadratowy dla rzeczy o proporcji 1:1 (rama ilustracji) oraz
     szerokość samej ramy w kadrze. Wymiary WARSZTATU: skala odstępów kończy
     się na 20x i sięganie po nieistniejący stopień kończy się cichym auto. */
  --cat-frame-square-height: 384px;
  --cat-frame-instance-width: 176px;
  --cat-substituted-bg: var(--static-orange-200);
  /* tła, jakie daje STRONA GOSZCZĄCA — to nie powierzchnie systemu */
  --cat-host-light-bg: var(--static-gray-0);
  --cat-host-muted-bg: var(--static-gray-50);
  --cat-host-dark-bg: var(--static-gray-950);
  --cat-scenery-border: var(--static-gray-250);
  --cat-scenery-radius: var(--pui-ui-radius-4xl);
  --cat-scenery-padding: var(--static-space-5x);
  --cat-scenery-shadow: 0 var(--static-space-0-5x) var(--static-space-3x) var(--static-overlay-dark-50);
  --cat-scenery-gap: var(--static-space-1-5x);

  /* jedna nazwa podpisu kadru na cały katalog — nie siedem */
  --cat-caption-code-size: var(--pui-text-p-sm-font-size);
  --cat-caption-code-line: var(--pui-text-p-sm-line-height);
  --cat-caption-human-size: var(--pui-text-p-base-font-size);
  --cat-caption-human-line: var(--pui-text-p-base-line-height);
  --cat-caption-chip-bg: var(--static-gray-950);
  --cat-caption-chip-fg: var(--static-gray-0);
  --cat-caption-fg: var(--static-gray-650);
  /* PODPIS PRZEPIĘTY Z gray-500 NA gray-650 — 06.09.2026, trzecie zgłoszenie zamawiającego
     o szarych czcionkach. Zmierzone: gray-500 (#8B8BA0) daje na białym kontrast 3.33:1,
     czyli PONIŻEJ progu 4.5:1 wymaganego dla tekstu. gray-650 (#5E5E70) daje 6.34:1.

     ZMIANA W TOKENIE, NIE W TRZECH KLASACH: rola jest wołana w wielu miejscach katalogu,
     więc poprawianie klas po jednej zostawiłoby resztę pod progiem i rozjechało barwy
     podpisu między stronami. Naprawa u źródła dotyka wszystkich naraz.

     CO SIĘ JESZCZE PRZEZ TO ZMIENIA (zasada 4: przed zmianą tokenu sprawdź czytelników):
     wszystkie podpisy katalogu ciemnieją o dwa stopnie skali. To jest zamierzone — trzy
     zgłoszenia tej doby dotyczyły dokładnie tego, że podpis jest za jasny. */
  --cat-caption-note-fg: var(--static-gray-650);

  /* rozstrzelenie: trzy role warsztatu, żeby ta sama wartość nie żyła
     w dwóch nośnikach (podpis kadru w stronie i wersaliki w shellu) */
  --cat-tracking-caption: 1.5px;
  --cat-tracking-group: 2px;
  --cat-tracking-pill: 0.5px;
  --cat-tracking-action: 1px;
  --cat-caption-tracking: var(--cat-tracking-caption);

  /* minimalne szerokości kolumn siatek warsztatu — wymiar warsztatu,
     nie produktu, więc stoi tu, a nie w markupie strony */
  --cat-col-min-card: 420px;
  --cat-col-min-probe: 320px;
  --cat-col-min-swatch: var(--static-space-16x);
  /* Kolumna nazw tokenów: STAŁA, nie dopasowana do treści wiersza. Przy
     max-content każdy wiersz ma własną szerokość i prawa kolumna skacze
     w lewo i w prawo przez całą listę. Dwa stopnie, bo rodziny mają dwie
     długości nazw: krótka dla stopni skali, długa dla ról sekcji. */
  --cat-col-token: var(--static-space-20x);
  --cat-col-token-long: 400px;
  /* Kafel stopnia rampy: węższy niż próbka ogólna, bo niesie tylko liczbę
     i hex — pełna nazwa tokenu siedzi w podpowiedzi. Przy szerokości próbki
     rampa gray rozkładała się na cztery wiersze i przestawała być rampą. */
  --cat-col-min-stop: var(--static-space-11x);
  --cat-contract-col-mod: var(--static-space-16x);

  /* Ról zastępczych tu nie ma i nie będzie. Wartość, której kod nie trzyma
     w tokenie, pokazuje się na stronie jako BRAK, nie jako próbka na wartości
     dobranej w katalogu. Sufiks w nazwie widzi tylko ten, kto czyta pliki;
     człowiek oglądający stronę zobaczyłby normalny stopień i nie miałby jak
     się dowiedzieć, że w kodzie go nie ma. Decyzja z 06.08.2026.
     Wartości wpisane w kodzie wprost trafiają na listę rozbieżności. */

  /* powierzchnie systemu poddawane testowi */
  --cat-probe-light-bg: var(--pui-surface-solid-main);
  --cat-probe-primary-bg: var(--pui-surface-solid-primary);
  --cat-probe-purple-bg: var(--pui-surface-solid-purple);

  /* tabela umowy na stronie atomu */
  --cat-table-divider: var(--static-gray-200);
  --cat-table-head-fg: var(--static-gray-550);
  --cat-table-bg-muted: var(--static-gray-50);
  --cat-verdict-pass: var(--static-primary-600);
  /* Werdykt testu: czerwony zostaje TYLKO tutaj, przy wyniku negatywnym sekcji
     powierzchni. Przerywanych obrysów już nie obsługuje — patrz niżej. */
  --cat-verdict-fail: var(--static-red-600);
  /* 11.6.4: przerywany obrys znaczy „TEGO NIE MA” i obejmuje dwa przypadki
     jednej rodziny. Rozróżnia je KOLOR I PODPIS, nie kreska:
       neutralny + numer pozycji  → brakujący odczyt (mój dług, do zrobienia),
       bursztyn + słowo znalezisko → luka do rozstrzygnięcia po stronie kodu.
     Osobnego znaku nie wprowadzamy: dwa podobne znaki czyta się gorzej niż
     jeden znak w dwóch kolorach. Czerwony w tym schemacie nie znaczy nic,
     więc przestał tu stać (07.08.2026).
     Zmierzone przy wprowadzeniu: osiem przerywanych obrysów w katalogu, osiem
     to znaleziska, zero to brakujące odczyty. Rola neutralna ma zero użyć i
     jest to WYNIK, nie zaległość — pierwszy brakujący odczyt ją weźmie. */
  --cat-finding-border: var(--static-orange-500);
  --cat-finding-fg: var(--static-orange-600);
  --cat-absence-border: var(--static-gray-350);
  --cat-absence-fg: var(--static-gray-500);
  --cat-swatch-size: var(--static-space-5x);
}

/* =============================================================================
   Rodzina --pui-community-box-* — odczyt 06.08.2026.
   scales/desktop.scss (wymiary) + mode/light.scss (kolory).
   POMIAR: lightondark.scss przedefiniowuje wszystkie 15 ról tej rodziny
   identycznymi wartościami, więc rodzina jest niewrażliwa na kontekst.
   Zapisane na liście rozbieżności jako dwa mechanizmy jednej rzeczy.
   ============================================================================= */
:root {
  --pui-container-grid-gap: var(--static-space-4x);
  --pui-use-case-main-icon-size: var(--static-space-3x);

  --pui-community-box-forum-body-min-width: 400px;
  --pui-community-box-forum-body-radius: var(--pui-ui-radius-6xl);
  --pui-community-box-forum-graphic-max-width: 240px;
  --pui-community-box-forum-graphic-padding-v: var(--static-space-2-5x);
  --pui-community-box-forum-graphic-radius: var(--pui-ui-radius-lg);
  --pui-community-box-forum-main-gap: var(--static-space-3-5x);
  --pui-community-box-forum-main-padding-h: var(--static-space-4x);
  --pui-community-box-forum-main-padding-v: var(--static-space-4x);
  --pui-community-box-forum-main-text-gap: var(--static-space-2x);
  --pui-community-box-newsletter-body-border-width: var(--pui-ui-border-outline-border-width);
  --pui-community-box-newsletter-body-gap: var(--static-space-3x);
  --pui-community-box-newsletter-body-padding-h: var(--static-space-3x);
  --pui-community-box-newsletter-body-padding-v: var(--static-space-3x);
  --pui-community-box-newsletter-body-radius: var(--pui-ui-radius-6xl);
  --pui-community-box-newsletter-body-width-min: 666px;
  --pui-community-box-newsletter-form-gap: var(--static-space-2x);
  --pui-community-box-newsletter-form-padding-h: var(--static-space-4x);
  --pui-community-box-newsletter-form-padding-v: var(--static-space-4x);
  --pui-community-box-newsletter-form-radius: var(--pui-ui-radius-4xl);
  --pui-community-box-newsletter-main-content-gap: var(--static-space-3x);
  --pui-community-box-newsletter-main-content-padding-h: var(--static-space-3x);
  --pui-community-box-newsletter-main-content-padding-v: var(--static-space-3x);
  --pui-community-box-newsletter-main-gap: var(--static-space-5x);
  --pui-community-box-newsletter-validation-padding-h: var(--static-space-1-25x);
  --pui-community-box-newsletter-validation-padding-v: var(--static-space-1-25x);
  --pui-community-box-newsletter-validation-radius: var(--pui-ui-radius-md);
  --pui-sub-navigation-newsletter-form-gap-v: var(--static-space-2x);

  --pui-community-box-discord-bg-end: var(--static-discord-800);
  --pui-community-box-discord-bg-start: var(--static-discord-950);
  --pui-community-box-discord-graphic-gradient-start: var(--static-discord-alpha-800);
  --pui-community-box-forum-bg-end: var(--static-primary-800);
  --pui-community-box-forum-bg-start: var(--static-primary-950);
  --pui-community-box-forum-graphic-gradient-start: var(--static-primary-alpha-900);
  --pui-community-box-newsletter-border-end: var(--static-gray-300);
  --pui-community-box-newsletter-border-start: var(--static-orange-500);
  --pui-community-box-newsletter-form-bg: var(--static-orange-400);
  --pui-community-box-newsletter-icon: var(--static-gray-0);
  --pui-community-box-newsletter-icon-bg: var(--static-orange-400);

  /* mode/light.scss — trzy barwy sekcji FAQ. Rodzina --pui-faq-* stała w arkuszu
     od 12.08 w postaci NIEPEŁNEJ: czternaście ról wymiarowych, zero barw, bo
     żadna strona katalogu ich nie wołała. Dosypane 18.08.2026 razem z pozycją
     sekcji, ta sama droga co szósta rola przycisku purpurowego: wartość z tego
     samego motywu (mode/light.scss, linie 261-264), nie z pierwszego znalezionego.
     --pui-faq-bg z tamtego pliku NIE wchodzi: żadna reguła kodu jej nie czyta,
     więc jej przepisanie byłoby dodaniem od siebie. */
  --pui-faq-avatar-border: var(--static-overlay-light-300);
  --pui-faq-border-end: var(--static-gray-300);
  --pui-faq-border-start: var(--static-primary-500);

  /* mode/light.scss — przycisk discord ma SAM solid, bez faded i outline.
     Brak zgłoszony na liście rozbieżności (C.4), tu nie uzupełniam. */
  --pui-button-discord-solid-bg: var(--static-discord-500);
  --pui-button-discord-solid-bg-hover: var(--static-discord-600);
  --pui-button-discord-solid-bg-active: var(--static-discord-700);
  --pui-button-discord-solid-border: var(--static-discord-500);
  --pui-button-discord-solid-fg: var(--static-gray-0);

  /* mode/light.scss — przycisk secondary faded (Subscribe w formularzu) */
  --pui-button-secondary-faded-bg: var(--static-orange-50);
  --pui-button-secondary-faded-bg-hover: var(--static-orange-100);
  --pui-button-secondary-faded-border: var(--static-orange-50);
  --pui-button-secondary-faded-fg: var(--static-orange-650);
  --pui-button-secondary-solid-bg: var(--static-orange-500);
  --pui-button-secondary-solid-fg: var(--static-gray-0);

  /* palette/main.scss — czerwień alpha używana przez komunikat walidacji */
  --static-red-alpha-150: #F7BABA26;
  --static-red-alpha-250: #F49E9E40;

  /* Literały ui/NewsletterForm.vue: obwiednia komunikatu (1px), odstęp w nim
     (10px) i biel tekstu. Przedrostek --src-* znaczy odczyt literału. */
  --src-newsletter-msg-border-width: 1px;
  --src-newsletter-msg-gap: 10px;
  --src-newsletter-msg-fg: #fff;
  --src-newsletter-captcha-bg: #198754;
  --src-newsletter-captcha-fg: #fff;
  --src-newsletter-captcha-radius: 5px;
  --src-newsletter-captcha-font-size: 14px;
  --src-newsletter-captcha-line-height: 24px;
  --src-newsletter-captcha-padding-v: 13px;
  --src-newsletter-captcha-padding-h: 16px;

  /* Dwie role tej rodziny stoją w light.scss jako hex WPROST, bez odwołania
     do palety: -discord-graphic-gradient-end (#1223E300) oraz
     -forum-graphic-gradient-end (#023A2900). Przenoszę wartość taką, jaka jest,
     i zgłaszam. --*-graphic-bg (biel i #2B2D31FF) nie są przez Card.vue czytane. */
  --pui-community-box-discord-graphic-gradient-end: #1223E300;
  --pui-community-box-forum-graphic-gradient-end: #023A2900;

  /* ODCZYT LITERAŁÓW z Card.vue. Przedrostek --src-* znaczy: wartość stoi
     w arkuszu komponentu WPROST i NIE jest tokenem produktu. To nie jest
     rola zastępcza z D3 (tam kod nie ma wartości i katalog pokazuje brak) —
     tutaj kod wartość ma, a nie ma dla niej tokenu. Siedemnaście sztuk,
     policzone w Card.vue 06.08.2026, wypisane na liście rozbieżności.
     Strona galerii mówi to wprost, żeby nikt nie wziął ich za tokeny. */
  --src-card-border: #E1E1E1;
  --src-card-bg: #FFFFFF;
  --src-card-content-gap: 12px;
  --src-card-content-padding: 16px;
  --src-card-title-gap: 16px;
  --src-card-footer-gap: 16px;
  --src-card-top-gap: 10px;
  --src-card-graphic-max-width: 240px;
  --src-card-graphic-min-height: 278px;
  --src-card-graphic-img-max-height: 238px;
  --src-card-title-weight: 600;
  --src-card-forum-overlay: rgba(2, 58, 41, 0.90);
  --src-card-forum-overlay-end: rgba(2, 58, 41, 0.00);
  --src-card-discord-overlay: rgba(18, 35, 227, 0.8);
  --src-card-discord-overlay-end: rgba(18, 35, 227, 0);
  --src-card-mask-width: 1px;
  /* ODCZYT LITERAŁÓW z ui/Section.vue: odstęp w pasie wyróżnień oraz dwie wagi
     opisu, wpisane w klasę, bo rodzina nazwanych grubości nie nadaje się
     do użycia. Przedrostek --src-* znaczy odczyt literału, nie token. */
  --src-section-highlights-gap: 8px;
  /* ODCZYT LITERAŁÓW z ui/content/List.vue: odstęp pozycji i pudełko ikony.
     Kod pisze je wprost (gap: 12px, 24x24 przy ikonie 20x20). */
  --src-feature-list-gap: 12px;
  --src-feature-list-icon-wrap: 24px;
  /* ODCZYT LITERAŁÓW z ui/PlanComparisonTable.vue */
  --src-table-caption-margin-h: 1px;
  --src-table-nav-gap: 8px;
  --src-table-light-weight: 300;
  --src-table-label-height: 26px;
  --src-table-label-padding-v: 4px;
  --src-table-label-padding-h: 8px;
  --src-table-label-gap: 4px;
  --src-table-stuck-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 8px 24px 6px rgba(0, 0, 0, 0.05);
  --src-table-tooltip-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 8px 24px 0 rgba(0, 0, 0, 0.02), 0 8px 32px 0 rgba(0, 0, 0, 0.08);
  --src-section-desc-weight: 300; /* main.scss: p { font-weight: 300 } — literał globalny */
  --src-section-cta-desc-weight: 200;
  --src-card-graphic-hover-shift: -10px;
  --src-card-mask-newsletter: linear-gradient(127.75deg, #D9D9E3 0%, #D9D9E3 15%, #FF6914 43.27%, #D9D9E3 52.88%, #FF6914 100%);
  --src-card-mask-default: linear-gradient(99.28deg, #07C07E 0%, #D9D9E3 15%, #D9D9E3 85%, #07C07E 100%);
}

/* =============================================================================
   Odczyt reguł, których nie da się odwzorować inaczej niż selektorem.
   Te dwa bloki są PRZEPISANE z arkuszy produktu, bo mechanizm stanu nawigacji
   jest zapisany klasą, nie propsem. Katalog nie może udawać, że jest inaczej:
   props, którego w kodzie nie ma, byłby kontraktem wziętym z powietrza.
   Źródła: app/assets/css/elements/navbar.scss, app/assets/css/tokens/mode/light.scss.
   ============================================================================= */

/* mode/light.scss, linia 2–3: TA SAMA lista selektorów co w kodzie.
   Element, który ma jednocześnie kontekst ciemny, klasę .nav i klasę .is-fixed,
   wraca do ról JASNYCH. Zasięg reguły jest tu dokładnie taki jak w arkuszu —
   i właśnie dlatego pasek .top-bar, który klasy .nav nie ma, nie jest nią objęty. */
[data-context="on-light"],
[data-context="on-dark"].nav.is-fixed {
  --pui-text-heading: var(--static-gray-950);
  --pui-text-body: var(--static-gray-800);
  --pui-text-lighter: var(--static-gray-600);
  --pui-text-faded: var(--static-gray-500);
  --pui-text-icon: var(--static-gray-700);
  /* Dopisane 09.08.2026 przy kadrach menu zwiniętego (NV-09, NV-10): rola belek
     burgera w stanie otwartym, mode/light.scss linia 540. */
  --pui-text-icon-primary: var(--static-primary-600);
  --pui-text-primary: var(--static-primary-600);
  --pui-text-orange: var(--static-orange-600);
  --pui-text-purple: var(--static-purple-600);
  --pui-text-red: var(--static-red-600);
  --pui-text-blue: var(--static-blue-500);
  --pui-text-discord: var(--static-discord-500);
  --pui-surface-solid-main: var(--static-gray-0);
  --pui-navigation-separator: var(--static-gray-100);
  --pui-navigation-bg-scroll: var(--static-gray-0);
  --pui-button-primary-solid-bg: var(--static-primary-600);
  --pui-button-primary-solid-bg-hover: var(--static-primary-650);
  --pui-button-primary-solid-fg: var(--static-gray-0);
  --pui-button-primary-outline-fg: var(--static-primary-650);
  --pui-button-primary-outline-border: var(--static-primary-600);
  --pui-button-primary-faded-bg: var(--static-primary-50);
  --pui-button-primary-faded-fg: var(--static-primary-650);
  --pui-button-default-outline-fg: var(--static-gray-800);
  --pui-button-default-faded-bg: var(--static-gray-100);
  --pui-button-default-faded-fg: var(--static-gray-800);
  --pui-accordion-bg: var(--static-gray-0);
  --pui-accordion-border: var(--static-gray-200);
  --pui-form-bg: var(--static-gray-0);
  --pui-form-border: var(--static-gray-300);
  --pui-form-border-active: var(--static-orange-500);
  --pui-form-border-hover: var(--static-orange-500);
  --pui-form-icon: var(--static-orange-500);

  /* PRZYWRÓCENIE ROL JASNYCH W ZAGNIEŻDŻONYM KONTEKŚCIE — dopisane 19.08.2026
     ze zgłoszenia zamawiającego o tle plakietki w rozwijanym menu.

     W kodzie mode/light.scss deklaruje WSZYSTKIE swoje role pod jedną listą
     selektorów: [data-context="on-light"], [data-context="on-dark"].nav.is-fixed
     oraz :root. Arkusz katalogu miał je rozbite: większość na samym :root,
     a blok kontekstu jasnego niósł WYCINEK. Skutek: element z on-light stojący
     WEWNĄTRZ on-dark (dokładnie tak stoi rozwinięcie menu w nawigacji, która ma
     on-dark na stałe) nie odzyskiwał tych ról i widział wartości ciemne.

     Zmierzone: blok on-dark nadpisuje 122 role, kontekst jasny przywracał 32,
     czyli 90 nie wracało. Wszystkie 90 miały wartość jasną na :root, więc
     wpisane niżej wartości są przepisane z tego pliku, nie wybrane. Objaw był
     widoczny tylko w zagnieżdżeniu: ta sama plakietka na stronie komponentu
     wychodziła poprawnie, bo tam on-dark nad nią nie stoi.

     Rodziny: hero-label 30, hero 22, label 21, testimonial 9, button 4,
     form 2 oraz dwie role własne katalogu (--cat-control-fg,
     --cat-control-placeholder), które blok ciemny też nadpisuje. */
  --pui-label-default-faded-bg: var(--static-gray-100);
  --pui-label-default-faded-bg-active: var(--static-gray-300);
  --pui-label-default-faded-bg-hover: var(--static-gray-200);
  --pui-label-default-faded-fg: var(--static-gray-800);
  --pui-label-default-faded-fg-active: var(--static-gray-950);

  /* DOMKNIĘCIE RODZINY ETYKIETY — 05.09.2026, plan domknięcia atomów, poz. 2.
     Klasy .badge--{kolor} i --{kolor}-outline generowały się dla sześciu kolorów,
     a role istniały wyłącznie dla wariantu faded w czterech — 14 z 18 pól nic nie
     malowało. Wartości przepisane z WZORU siostrzanych rodzin: solid i outline
     z rodziny przycisku, faded z wariantu, który etykieta już miała. W produkcie
     tych ról jeszcze nie ma: deweloper dopisuje je z dziennika, my ich nie
     zgadujemy — każda pochodzi z pasma tego samego koloru.
     Czego NIE dopisano, bo nie ma z czego: stopień xl (skala label kończy się na
     lg) oraz faded i outline dla koloru info (pasmo blue ma tylko stopnie ciemne,
     600-700, bez 50/100/200). Obie rzeczy WYCIĘTE z arkusza klas. */

  /* DOMKNIĘCIE RODZINY ANIMACJI — 05.09.2026, plan domknięcia atomów.
     Rodzina nie wołała ani jednej roli barwy ani czasu: trzy barwy stały HEXEM
     wprost w regułach, a czasy trwania liczbami. Role poniżej to NAZWY dla
     wartości, które kod już ma — wartość przepisana co do znaku, więc wygląd
     się nie zmienia, ale da się ją zmienić w jednym miejscu.
     Dwie barwy pierścienia NIE ISTNIEJĄ W PALECIE (#E5E5F0 i #F2F2F7 leżą między
     gray-150 i gray-200) — nie podmieniam ich na najbliższy stopień, bo to byłaby
     cicha zmiana wyglądu produktu; rozjazd zgłoszony w docs/Rozbieznosci. */
  --pui-animation-pulse-ring-outer: #E5E5F0;
  --pui-animation-pulse-ring-inner: #F2F2F7;
  --pui-animation-pulse-dot-bg: var(--static-primary-500);
  --pui-animation-pulse-dot-halo: #07C07E1A;
  --pui-animation-pulse-duration: 2s;
  --pui-animation-pulse-star-duration: 3s;
  --pui-animation-slide-fade-duration: 0.4s;
  --pui-animation-slide-fade-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --pui-label-primary-solid-bg: var(--static-primary-600);
  --pui-label-primary-solid-bg-hover: var(--static-primary-650);
  --pui-label-primary-solid-bg-active: var(--static-primary-700);
  --pui-label-primary-solid-fg: var(--static-gray-0);
  --pui-label-primary-solid-fg-hover: var(--static-gray-0);
  --pui-label-primary-solid-fg-active: var(--static-gray-0);
  --pui-label-primary-outline-bg: var(--static-overlay-light-0);
  --pui-label-primary-outline-bg-hover: var(--static-primary-50);
  --pui-label-primary-outline-bg-active: var(--static-primary-100);
  --pui-label-primary-outline-border: var(--static-primary-600);
  --pui-label-primary-outline-fg: var(--static-primary-650);
  --pui-label-primary-outline-fg-hover: var(--static-primary-650);
  --pui-label-primary-outline-fg-active: var(--static-primary-600);
  --pui-label-orange-solid-bg: var(--static-orange-600);
  --pui-label-orange-solid-bg-hover: var(--static-orange-650);
  --pui-label-orange-solid-bg-active: var(--static-orange-700);
  --pui-label-orange-solid-fg: var(--static-gray-0);
  --pui-label-orange-solid-fg-hover: var(--static-gray-0);
  --pui-label-orange-solid-fg-active: var(--static-gray-0);
  --pui-label-orange-outline-bg: var(--static-overlay-light-0);
  --pui-label-orange-outline-bg-hover: var(--static-orange-50);
  --pui-label-orange-outline-bg-active: var(--static-orange-100);
  --pui-label-orange-outline-border: var(--static-orange-600);
  --pui-label-orange-outline-fg: var(--static-orange-650);
  --pui-label-orange-outline-fg-hover: var(--static-orange-650);
  --pui-label-orange-outline-fg-active: var(--static-orange-600);
  --pui-label-purple-solid-bg: var(--static-purple-600);
  --pui-label-purple-solid-bg-hover: var(--static-purple-650);
  --pui-label-purple-solid-bg-active: var(--static-purple-700);
  --pui-label-purple-solid-fg: var(--static-gray-0);
  --pui-label-purple-solid-fg-hover: var(--static-gray-0);
  --pui-label-purple-solid-fg-active: var(--static-gray-0);
  --pui-label-purple-outline-bg: var(--static-overlay-light-0);
  --pui-label-purple-outline-bg-hover: var(--static-purple-50);
  --pui-label-purple-outline-bg-active: var(--static-purple-100);
  --pui-label-purple-outline-border: var(--static-purple-600);
  --pui-label-purple-outline-fg: var(--static-purple-650);
  --pui-label-purple-outline-fg-hover: var(--static-purple-650);
  --pui-label-purple-outline-fg-active: var(--static-purple-600);
  --pui-label-default-solid-bg: var(--static-gray-800);
  --pui-label-default-solid-bg-hover: var(--static-gray-850);
  --pui-label-default-solid-bg-active: var(--static-gray-900);
  --pui-label-default-solid-fg: var(--static-gray-0);
  --pui-label-default-solid-fg-hover: var(--static-gray-0);
  --pui-label-default-solid-fg-active: var(--static-gray-0);
  --pui-label-default-outline-bg: var(--static-overlay-light-0);
  --pui-label-default-outline-bg-hover: var(--static-gray-50);
  --pui-label-default-outline-bg-active: var(--static-gray-100);
  --pui-label-default-outline-border: var(--static-gray-300);
  --pui-label-default-outline-fg: var(--static-gray-800);
  --pui-label-default-outline-fg-hover: var(--static-gray-900);
  --pui-label-default-outline-fg-active: var(--static-gray-950);
  --pui-label-red-faded-bg: var(--static-red-50);
  --pui-label-red-faded-bg-hover: var(--static-red-100);
  --pui-label-red-faded-bg-active: var(--static-red-200);
  --pui-label-red-faded-fg: var(--static-red-600);
  --pui-label-red-faded-fg-hover: var(--static-red-650);
  --pui-label-red-faded-fg-active: var(--static-red-700);
  --pui-label-red-solid-bg: var(--static-red-600);
  --pui-label-red-solid-bg-hover: var(--static-red-650);
  --pui-label-red-solid-bg-active: var(--static-red-700);
  --pui-label-red-solid-fg: var(--static-gray-0);
  --pui-label-red-solid-fg-hover: var(--static-gray-0);
  --pui-label-red-solid-fg-active: var(--static-gray-0);
  --pui-label-red-outline-bg: var(--static-overlay-light-0);
  --pui-label-red-outline-bg-hover: var(--static-red-50);
  --pui-label-red-outline-bg-active: var(--static-red-100);
  --pui-label-red-outline-border: var(--static-red-600);
  --pui-label-red-outline-fg: var(--static-red-650);
  --pui-label-red-outline-fg-hover: var(--static-red-650);
  --pui-label-red-outline-fg-active: var(--static-red-600);
  --pui-label-info-solid-bg: var(--static-blue-600);
  --pui-label-info-solid-bg-hover: var(--static-blue-650);
  --pui-label-info-solid-bg-active: var(--static-blue-700);
  --pui-label-info-solid-fg: var(--static-gray-0);
  --pui-label-info-solid-fg-hover: var(--static-gray-0);
  --pui-label-info-solid-fg-active: var(--static-gray-0);
  --pui-label-default-faded-fg-hover: var(--static-gray-900);
  --pui-label-orange-faded-bg: var(--static-orange-50);
  --pui-label-orange-faded-bg-active: var(--static-orange-200);
  --pui-label-orange-faded-bg-hover: var(--static-orange-100);
  --pui-label-orange-faded-fg: var(--static-orange-600);
  --pui-label-orange-faded-fg-active: var(--static-orange-700);
  --pui-label-orange-faded-fg-hover: var(--static-orange-650);
  --pui-label-primary-faded-bg: var(--static-primary-50);
  --pui-label-primary-faded-bg-active: var(--static-primary-200);
  --pui-label-primary-faded-bg-hover: var(--static-primary-100);
  --pui-label-purple-faded-bg: var(--static-purple-50);
  --pui-label-purple-faded-bg-active: var(--static-purple-200);
  --pui-label-purple-faded-bg-hover: var(--static-purple-100);
  --pui-label-purple-faded-fg: var(--static-purple-550);
  --pui-label-purple-faded-fg-active: var(--static-purple-650);
  --pui-label-purple-faded-fg-hover: var(--static-purple-600);
  --pui-hero-label-default-bg-active-end: var(--static-overlay-dark-100);
  --pui-hero-label-default-bg-active-start: var(--static-overlay-dark-100);
  --pui-hero-label-default-bg-end: var(--static-overlay-dark-100);
  --pui-hero-label-default-bg-hover-end: var(--static-overlay-dark-100);
  --pui-hero-label-default-bg-hover-start: var(--static-overlay-dark-100);
  --pui-hero-label-default-bg-start: var(--static-overlay-dark-50);
  --pui-hero-label-default-border-active-end: var(--static-overlay-dark-100);
  --pui-hero-label-default-border-active-start: var(--static-overlay-dark-50);
  --pui-hero-label-default-border-end: var(--static-overlay-dark-100);
  --pui-hero-label-default-border-hover-end: var(--static-overlay-dark-100);
  --pui-hero-label-default-border-hover-start: var(--static-overlay-dark-50);
  --pui-hero-label-default-border-start: var(--static-overlay-dark-50);
  --pui-hero-label-default-fg: var(--static-gray-900);
  --pui-hero-label-default-fg-active: var(--static-gray-900);
  --pui-hero-label-default-fg-hover: var(--static-gray-900);
  --pui-hero-label-primary-bg-active-end: var(--static-primary-alpha-150);
  --pui-hero-label-primary-bg-active-start: var(--static-primary-alpha-150);
  --pui-hero-label-primary-bg-end: var(--static-primary-alpha-150);
  --pui-hero-label-primary-bg-hover-end: var(--static-primary-alpha-150);
  --pui-hero-label-primary-bg-hover-start: var(--static-primary-alpha-150);
  --pui-hero-label-primary-bg-start: var(--static-primary-alpha-50);
  --pui-hero-label-primary-border-active-end: var(--static-primary-500);
  --pui-hero-label-primary-border-active-start: var(--static-primary-500);
  --pui-hero-label-primary-border-end: var(--static-primary-500);
  --pui-hero-label-primary-border-hover-end: var(--static-primary-500);
  --pui-hero-label-primary-border-hover-start: var(--static-primary-500);
  --pui-hero-label-primary-border-start: var(--static-primary-600);
  --pui-hero-label-primary-fg: var(--static-primary-600);
  --pui-hero-label-primary-fg-active: var(--static-primary-500);
  --pui-hero-label-primary-fg-hover: var(--static-primary-500);
  --pui-hero-button-outline-bg: #FFFFFF03;
  --pui-hero-button-outline-bg-active: var(--static-overlay-light-50);
  --pui-hero-button-outline-bg-hover: var(--static-overlay-light-50);
  --pui-hero-button-outline-border-active-end: var(--static-overlay-light-500);
  --pui-hero-button-outline-border-active-start: var(--static-overlay-light-200);
  --pui-hero-button-outline-border-end: var(--static-overlay-light-500);
  --pui-hero-button-outline-border-hover-end: var(--static-overlay-light-500);
  --pui-hero-button-outline-border-hover-start: var(--static-overlay-light-200);
  --pui-hero-button-outline-border-start: var(--static-overlay-light-200);
  --pui-hero-button-outline-fg: var(--static-gray-0);
  --pui-hero-button-solid-bg-active: #FE6B16FF;
  --pui-hero-button-solid-bg-end: #FE6B16FF;
  --pui-hero-button-solid-bg-hover-end: #FE6B16FF;
  --pui-hero-button-solid-bg-hover-start: #F0A44CFF;
  --pui-hero-button-solid-bg-start: #EE9632FF;
  --pui-hero-button-solid-border-active-end: var(--static-gray-0);
  --pui-hero-button-solid-border-active-start: var(--static-overlay-light-300);
  --pui-hero-button-solid-border-end: var(--static-gray-0);
  --pui-hero-button-solid-border-hover-end: var(--static-gray-0);
  --pui-hero-button-solid-border-hover-start: var(--static-overlay-light-300);
  --pui-hero-button-solid-border-start: var(--static-overlay-light-300);
  --pui-hero-button-solid-fg: var(--static-gray-0);

  --pui-testimonial-body-bg: var(--static-gray-0);
  --pui-testimonial-body-border-start: var(--static-gray-300);
  --pui-testimonial-border: var(--static-gray-200);
  --pui-testimonial-border-active: var(--static-orange-500);
  --pui-testimonial-border-hover: var(--static-orange-500);
  --pui-testimonial-icon: var(--static-orange-500);
  --pui-testimonial-main-logo-fg: var(--static-gray-1000);
  --pui-testimonial-main-symbol-bg-end: var(--static-primary-200);
  --pui-testimonial-main-symbol-bg-start: var(--static-primary-600);
  --pui-button-primary-faded-bg-hover: var(--static-primary-100);
  --pui-button-primary-outline-bg: var(--static-overlay-light-0);
  --pui-button-primary-outline-bg-hover: var(--static-primary-50);
  --pui-button-primary-solid-bg-active: var(--static-primary-700);
  --pui-form-fg: var(--pui-text-lighter);
  --pui-form-fg-filled: var(--pui-text-heading);
  --cat-control-fg: var(--pui-text-heading);
  --cat-control-placeholder: var(--pui-text-faded);
}

/* navbar.scss: pasek pomocniczy. Dwie wartości stoją w kodzie WPROST,
   obie z dopiskiem autora „TODO: replace”. Przepisane bez zmiany. */
.top-bar {
  min-height: 40px; /* w kodzie wprost, TODO: replace */
  border-bottom: 1px solid var(--pui-navigation-separator); /* grubość w kodzie wprost, TODO: replace */
}

/* navbar.scss: stan przyklejony. Cień ma w kodzie dwie wartości wprost. */
.nav.is-fixed {
  padding-bottom: var(--pui-navigation-main-padding-bottom);
  background: var(--pui-navigation-bg-scroll);
  backdrop-filter: blur(calc(var(--pui-ui-blur-md) / 2));
  box-shadow: 0 20px 40px 0 var(--static-overlay-dark-100); /* 20px i 40px w kodzie wprost */
}

:root {
  /* stopnie palety dociągnięte dla powyższych rodzin, wartości z palette/main.scss */
  --static-blue-700: #0048B2FF;
  --static-other-facebook-500: #0866FFFF;
  --static-other-linkedin-500: #0077B5FF;
  --static-other-x-500: #000000FF;
  --static-other-youtube-500: #FF0000FF;
}

/* =============================================================================
   Odczyt 06.08.2026, commit 1bcf0cc: cztery rodziny, które nie weszły do
   pierwszej szóstki tematów. Wymiary z scales/desktop.scss, kolory z
   mode/light.scss. Nic tu nie jest przeliczone ani uzupełnione.
   ============================================================================= */
:root {
  /* rozmycie — dziesięć stopni, jedna rodzina */
  --pui-ui-blur-2xs: 2px;
  --pui-ui-blur-xs: 4px;
  --pui-ui-blur-sm: 8px;
  --pui-ui-blur-lg: 16px;
  --pui-ui-blur-xl: 24px;
  --pui-ui-blur-2xl: 48px;
  --pui-ui-blur-3xl: 96px;
  --pui-ui-blur-4xl: 128px;
  --pui-ui-blur-5xl: 256px;
  /* obwiednie — osiem ról szerokości; kolory obwiedni żyją w warstwie mode */
  --pui-ui-border-action-border-width: 0px;
  --pui-ui-border-action-border-width-active: 0px;
  --pui-ui-border-field-border-width: 1px;
  --pui-ui-border-field-border-width-active: 1px;
  /* cień — trzy prymitywy w skali plus dwa kolory w warstwie mode */
  --pui-ui-shadow-shadow-blur: var(--pui-ui-blur-2xl);
  --pui-ui-shadow-shadow-offset-x: var(--static-space-1x);
  --pui-ui-shadow-shadow-offset-y: var(--static-space-0x);
  --pui-sub-navigation-shadow-black: #0000001A;
  --pui-sub-navigation-shadow-green: #056D4814;
  /* ikony — 57 nazw w warstwie jasnej, cztery podrodziny */
  --pui-icons-gradient-accent-blue: var(--static-blue-600);
  --pui-icons-gradient-accent-gray: var(--static-gray-500);
  --pui-icons-gradient-accent-orange: var(--static-orange-400);
  --pui-icons-gradient-accent-primary: var(--static-primary-500);
  --pui-icons-gradient-accent-purple: var(--static-purple-350);
  --pui-icons-gradient-accent-red: var(--static-red-600);
  --pui-icons-gradient-bg-gray: var(--static-gray-50);
  --pui-icons-gradient-bg-green: #07C07E1A;
  --pui-icons-gradient-bg-purple: #6637F114;
  --pui-icons-gradient-blue-bg-active-end: var(--static-blue-550);
  --pui-icons-gradient-blue-bg-active-start: var(--static-blue-700);
  --pui-icons-gradient-blue-bg-end: var(--static-blue-400);
  --pui-icons-gradient-blue-bg-hover-end: var(--static-blue-500);
  --pui-icons-gradient-blue-bg-hover-start: var(--static-blue-650);
  --pui-icons-gradient-blue-bg-start: var(--static-blue-600);
  --pui-icons-gradient-border-red: var(--static-red-600);
  --pui-icons-gradient-fg-white: var(--static-gray-0);
  --pui-icons-gradient-orange-bg-active-end: var(--static-orange-450);
  --pui-icons-gradient-orange-bg-active-start: var(--static-orange-650);
  --pui-icons-gradient-orange-bg-end: var(--static-orange-350);
  --pui-icons-gradient-orange-bg-hover-end: var(--static-orange-400);
  --pui-icons-gradient-orange-bg-hover-start: var(--static-orange-600);
  --pui-icons-gradient-orange-bg-start: var(--static-orange-500);
  --pui-icons-gradient-primary-bg-active-end: var(--static-primary-550);
  --pui-icons-gradient-primary-bg-active-start: var(--static-primary-700);
  --pui-icons-gradient-primary-bg-end: var(--static-primary-400);
  --pui-icons-gradient-primary-bg-hover-end: var(--static-primary-500);
  --pui-icons-gradient-primary-bg-hover-start: var(--static-primary-650);
  --pui-icons-gradient-primary-bg-start: var(--static-primary-600);
  --pui-icons-gradient-purple-bg-active-end: var(--static-purple-400);
  --pui-icons-gradient-purple-bg-active-start: var(--static-purple-700);
  --pui-icons-gradient-purple-bg-end: var(--static-purple-300);
  --pui-icons-gradient-purple-bg-hover-end: var(--static-purple-350);
  --pui-icons-gradient-purple-bg-hover-start: var(--static-purple-650);
  --pui-icons-gradient-purple-bg-start: var(--static-purple-550);
  --pui-icons-gradient-red-bg-end: var(--static-red-500);
  --pui-icons-gradient-red-bg-start: var(--static-red-650);
  --pui-icons-other-discord-bg: var(--static-discord-500);
  --pui-icons-other-facebook-bg: var(--static-other-facebook-500);
  --pui-icons-other-fg: var(--static-gray-0);
  --pui-icons-other-linkedin-bg: var(--static-other-linkedin-500);
  --pui-icons-other-newsletter-bg: var(--static-orange-500);
  --pui-icons-other-primary-bg: var(--static-primary-500);
  --pui-icons-other-x-bg: var(--static-other-x-500);
  --pui-icons-other-youtube-bg: var(--static-other-youtube-500);
  --pui-icons-outline-accent-gray: var(--static-gray-400);
  --pui-icons-outline-bg-gray: var(--static-gray-50);
  --pui-icons-outline-bg-green: #E7F9F3FF;
  --pui-icons-outline-bg-purple: #6A32E00F;
  --pui-icons-outline-bg-red: #E71D1D26;
  --pui-icons-outline-border-gray: var(--static-gray-500);
  --pui-icons-outline-border-primary: var(--static-primary-500);
  --pui-icons-outline-border-purple: var(--static-purple-350);
  --pui-icons-outline-border-red: var(--static-red-600);
  --pui-icons-outline-fg-white: var(--static-gray-0);
  --pui-icons-social-icons-fg: var(--static-gray-350);
  --pui-icons-social-icons-fg-hover: var(--static-primary-500);
}

/* =============================================================================
   Rodzina --pui-section-* i --pui-container-* — odczyt scales/desktop.scss,
   commit 1bcf0cc. Potrzebna galerii ui/Section.vue.
   ============================================================================= */
:root {
  --pui-container-content-gap-h: var(--static-space-6x);
  --pui-container-content-gap-v: var(--static-space-8x);
  --pui-container-gap: var(--static-space-9x);
  --pui-container-padding-h: var(--static-space-6x);
  --pui-container-test: 1178px;
  --pui-container-width-max: 1480px;
  --pui-section-combined-padding-v: var(--static-space-8x);
  --pui-section-cta-body-graphic-width: 376px;
  --pui-section-desc-default-sm-body-gap: var(--static-space-3x);
  --pui-section-desc-default-sm-body-padding-h: var(--static-space-2x);
  --pui-section-desc-default-sm-body-padding-v: var(--static-space-2x);
  --pui-section-desc-default-sm-main-gap: var(--static-space-1-5x);
  --pui-section-desc-padded-base-body-gap: var(--static-space-5x);
  --pui-section-desc-padded-base-body-on: null;
  --pui-section-desc-padded-base-body-padding-v: var(--static-space-5x);
  --pui-section-desc-padded-base-main-gap: var(--static-space-3x);
  --pui-section-desc-padded-base-main-rows-gap: var(--static-space-1-5x);
  --pui-section-heading-horizontal-content-gap: var(--static-space-3x);
  --pui-section-heading-horizontal-desc-min-width: 100px;
  --pui-section-heading-horizontal-heading-min-width: 100px;
  --pui-section-heading-horizontal-title-width: 300px;
  --pui-section-heading-horizontal-width: 980px;
  --pui-section-heading-vertical-actions-gap: var(--static-space-3x);
  --pui-section-heading-vertical-content-gap: var(--static-space-3x);
  --pui-section-heading-vertical-gap: var(--static-space-4x);
  --pui-section-heading-vertical-title-width: 980px;
  --pui-section-heading-vertical-width: 980px;
  --pui-section-padding-v: var(--static-space-16x);
}

/* =============================================================================
   Rodzina --pui-video-block-* — odczyt commit 1bcf0cc. Potrzebna galerii
   ui/Video.vue oraz przyciskowi odtwarzania.
   ============================================================================= */
:root {
  --static-overlay-dark-400: #00000066;
}

:root {
  --pui-video-block-default-body-border-width: var(--pui-ui-border-outline-border-width);
  --pui-video-block-default-body-padding-h: var(--static-space-3x);
  --pui-video-block-default-body-padding-v: var(--static-space-3x);
  --pui-video-block-default-body-radius: var(--pui-ui-radius-6xl);
  --pui-video-block-default-body-width-min: 442px;
  --pui-video-block-default-text-container-horizontal-padding-h: var(--static-space-3x);
  --pui-video-block-default-text-container-horizontal-padding-v: var(--static-space-3x);
  --pui-video-block-default-text-container-vertical-padding-bottom: var(--static-space-1x);
  --pui-video-block-default-text-container-vertical-padding-h: var(--static-space-0x);
  --pui-video-block-default-text-container-vertical-padding-top: var(--static-space-3x);
  --pui-video-block-default-video-container-cta-button-icon-size: 40px;
  --pui-video-block-default-video-container-cta-button-max-height: 124px;
  --pui-video-block-default-video-container-cta-button-max-height-hover: 132px;
  --pui-video-block-default-video-container-cta-button-max-width: 124px;
  --pui-video-block-default-video-container-cta-button-max-width-hover: 132px;
  --pui-video-block-default-video-container-cta-button-radius: var(--pui-ui-radius-rounded);
  --pui-video-block-default-video-container-cta-gap: var(--static-space-3x);
  --pui-video-block-default-video-container-cta-label-border-width: var(--pui-ui-border-outline-border-width);
  --pui-video-block-default-video-container-cta-label-padding-h: var(--static-space-4x);
  --pui-video-block-default-video-container-cta-label-padding-v: var(--static-space-2x);
  --pui-video-block-default-video-container-cta-label-radius: var(--pui-ui-radius-3xl);
  --pui-video-block-default-video-container-radius: var(--pui-ui-radius-4xl);
  /* mode/light.scss */
  --pui-video-block-body-primary-bg: var(--static-gray-0);
  --pui-video-block-body-primary-border-end: var(--static-gray-300);
  --pui-video-block-body-primary-border-start: var(--static-primary-500);
  --pui-video-block-body-purple-bg: var(--static-gray-0);
  --pui-video-block-body-purple-border-end: var(--static-gray-300);
  --pui-video-block-body-purple-border-start: var(--static-purple-500);
  --pui-video-block-border: var(--static-gray-300);
  --pui-video-block-border-active: var(--static-orange-500);
  --pui-video-block-border-hover: var(--static-orange-500);
  --pui-video-block-fg: var(--pui-text-lighter);
  --pui-video-block-fg-filled: var(--pui-text-heading);
  --pui-video-block-icon: var(--static-orange-500);
  --pui-video-block-video-container-button-bg-end: var(--static-red-600);
  --pui-video-block-video-container-button-bg-hover-end: var(--static-red-700);
  --pui-video-block-video-container-button-bg-hover-start: var(--static-red-600);
  --pui-video-block-video-container-button-bg-start: var(--static-red-400);
  --pui-video-block-video-container-button-icon: var(--static-gray-0);
  --pui-video-block-video-container-label-bg-end: var(--static-overlay-light-300);
  --pui-video-block-video-container-label-bg-hover-end: var(--static-overlay-light-200);
  --pui-video-block-video-container-label-bg-hover-start: var(--static-overlay-light-200);
  --pui-video-block-video-container-label-bg-start: var(--static-overlay-light-200);
  --pui-video-block-video-container-label-border-end: var(--static-overlay-light-100);
  --pui-video-block-video-container-label-border-hover-end: var(--static-overlay-light-100);
  --pui-video-block-video-container-label-border-hover-start: var(--static-overlay-light-400);
  --pui-video-block-video-container-label-border-start: var(--static-overlay-light-400);
  --pui-video-block-video-container-label-fg: var(--pui-text-heading);
  --pui-video-block-video-container-label-fg-active: var(--pui-text-heading);
  --pui-video-block-video-container-overlay-bg-end: var(--static-overlay-dark-300);
  --pui-video-block-video-container-overlay-bg-hover-end: var(--static-overlay-dark-400);
  --pui-video-block-video-container-overlay-bg-hover-start: var(--static-overlay-dark-100);
  --pui-video-block-video-container-overlay-bg-start: var(--static-overlay-dark-50);
}

:root {
  /* ODCZYT LITERAŁÓW z ui/WatchButton.vue (rozmiar sm) i z etykiety:
     wymiary sm, rozmycie tła etykiety, jej obwiednia i odstęp w środku.
     Rodziny ruchu nie ma, więc czasy przejść zostają w arkuszu produktu. */
  --src-watch-sm-button-size: 68px;
  --src-watch-sm-icon-size: 22px;
  --src-watch-sm-gap: 8px;
  --src-watch-label-blur: 10px;
  --src-watch-label-border: rgba(255, 255, 255, 0.40);
  --src-watch-label-gap: 10px;
}

/* =============================================================================
   Rodziny --pui-table-* i --pui-tooltip-* — odczyt commit 1bcf0cc.
   Potrzebne galerii ui/PlanComparisonTable.vue.
   ============================================================================= */
:root {
  --static-purple-alpha-150: #D5BFF826;
}

:root {
  --pui-table-caption-gap: var(--static-space-1x);
  --pui-table-caption-padding-h: var(--static-space-2x);
  --pui-table-caption-padding-v: var(--static-space-1-5x);
  --pui-table-cell-gap: var(--static-space-2x);
  --pui-table-cell-icon-size: var(--static-space-2-5x);
  --pui-table-cell-padding-h: var(--static-space-2-5x);
  --pui-table-cell-padding-v: var(--static-space-2x);
  --pui-table-header-footer-gap: var(--static-space-2x);
  --pui-table-header-gap: var(--static-space-3-5x);
  --pui-table-header-main-gap: var(--static-space-1-5x);
  --pui-table-header-padding-h: var(--static-space-3-5x);
  --pui-table-header-padding-v: var(--static-space-3-5x);
  --pui-table-header-price-gap: var(--static-space-0-5x);
  --pui-table-header-price-group-gap: var(--static-space-1x);
  --pui-table-radius: var(--pui-ui-radius-3xl);
  --pui-table-section-header-padding-v-bottom: var(--static-space-3x);
  --pui-table-section-header-padding-v-top: var(--static-space-5x);
  --pui-tooltip-padding-h: var(--static-space-1-5x);
  --pui-tooltip-padding-v: var(--static-space-1-25x);
  --pui-tooltip-radius: var(--pui-ui-radius-lg);
  --pui-tooltip-width-max: 300px;
  /* mode/light.scss */
  --pui-table-bg-muted-purple: var(--static-purple-alpha-150);
  --pui-table-bg-purple: var(--static-purple-550);
  --pui-table-hover: var(--static-overlay-dark-50);
  --pui-tooltip-bg: var(--static-gray-0);
  --pui-button-purple-solid-bg: var(--static-purple-550);
  --pui-button-purple-solid-bg-hover: var(--static-purple-600);
  /* DOSYPANA 17.08.2026 na decyzję zamawiającego: rodzina była przepisana CZĘŚCIOWO —
     pięć ról z sześciu, a szóstą wołał hover przycisku w tabeli porównania
     planów i rozwiązywał się na nic. Wartość z mode/light.scss, tego samego
     motywu, z którego przyszło pięć sióstr (lightondark daje tu to samo
     purple-600, ale przy bg-hover i bg-active motywy się różnią, więc motyw
     wybrany, nie zgadnięty). */
  --pui-button-purple-solid-border-hover: var(--static-purple-600);
  --pui-button-purple-solid-border: var(--static-purple-550);
  --pui-button-purple-solid-fg: var(--static-gray-0);
  /* BRAK W KODZIE: --pui-button-hero-solid-bg */
  /* BRAK W KODZIE: --pui-button-hero-solid-fg */
}

/* =============================================================================
   Rodzina --pui-hero-button-* — odczyt commit 1bcf0cc, poprawka po pomiarze.
   NAZWA BYŁA ZGADNIĘTA: pisałem --pui-button-hero-solid-*, a rodzina nazywa się
   --pui-hero-button-* i stoi PRZED słowem button, nie po. Reguła wariantu żyje
   w ui/controls/Button.vue, nie w elements/buttons.scss, a tło jest gradientem
   pod kątem 94 stopni. Wypisane na liście rozbieżności jako mój błąd odczytu.
   ============================================================================= */
:root {
  /* RODZINA HERO W WERSJI FIOLETOWEJ — DOSYPANA 25.08.2026 na polecenie zamawiającego
     („czy mozemy zrobic wariant fioletowy, ktory bedzie podobny do tego stylem? jezeli tak
     to zrob do atomu"). TEGO NIE MA W PRODUKCJI: `elements/buttons.scss` i scoped
     `Button.vue` znają wyłącznie hero pomarańczowe. To jest ROZSZERZENIE DS, nie odczyt —
     przy porcie trzeba je dowieźć razem z klasą `.btn--hero-purple` z `pa-klasy.css`.
     WARTOŚCI NIE SĄ Z PIPETY: hero pomarańczowe idzie od jaśniejszego do nasyconego
     (#EE9632 → #FE6B16), więc fioletowe idzie tak samo w naszej skali — purple-400 →
     purple-600, hover o stopień jaśniej na starcie, active o stopień ciemniej.
     STOI W TYM BLOKU, NIE W SĄSIEDNIM: pierwsze podejście wpisało te role do bloku
     `[data-context="on-light"]` i przycisk stał na `background: none`, bo hero żyje na
     powierzchni `on-dark`. Objaw do zapamiętania: `var()` nierozwiązany w gradiencie nie
     gasi jednej deklaracji, tylko całe tło. */
  --pui-hero-button-purple-bg-start: var(--static-purple-400);
  --pui-hero-button-purple-bg-end: var(--static-purple-600);
  --pui-hero-button-purple-bg-hover-start: var(--static-purple-300);
  --pui-hero-button-purple-bg-hover-end: var(--static-purple-500);
  --pui-hero-button-purple-bg-active: var(--static-purple-650);
  --pui-hero-button-purple-fg: var(--static-gray-0);

  --pui-hero-button-base-border-width: var(--pui-ui-border-outline-border-width);
  --pui-hero-button-base-gap-h: var(--static-space-1-25x);
  --pui-hero-button-base-gap-v: var(--static-space-0x);
  --pui-hero-button-base-height-min: 85px;
  --pui-hero-button-base-icon-size: var(--static-space-2-5x);
  --pui-hero-button-base-padding-h: var(--static-space-4x);
  --pui-hero-button-base-padding-v: var(--static-space-2x);
  --pui-hero-button-base-radius: var(--pui-ui-radius-2xl);
  --pui-hero-button-base-width-min: 240px;
  --pui-hero-button-sm-border-width: var(--pui-ui-border-outline-border-width);
  --pui-hero-button-sm-gap-h: var(--static-space-1-25x);
  --pui-hero-button-sm-gap-v: var(--static-space-0x);
  --pui-hero-button-sm-height-min: 44px;
  --pui-hero-button-sm-icon-size: var(--static-space-2x);
  --pui-hero-button-sm-padding-h: var(--static-space-2x);
  --pui-hero-button-sm-padding-v: var(--static-space-1x);
  --pui-hero-button-sm-radius: var(--pui-ui-radius-md);
  --pui-hero-button-sm-width-min: 80px;
  /* mode/light.scss — wariant hero jest GRADIENTEM start/end, nie jednym tłem */
  --pui-hero-button-outline-bg: #FFFFFF03;
  --pui-hero-button-outline-bg-active: var(--static-overlay-light-50);
  --pui-hero-button-outline-bg-hover: var(--static-overlay-light-50);
  --pui-hero-button-outline-border-active-end: var(--static-overlay-light-500);
  --pui-hero-button-outline-border-active-start: var(--static-overlay-light-200);
  --pui-hero-button-outline-border-end: var(--static-overlay-light-500);
  --pui-hero-button-outline-border-hover-end: var(--static-overlay-light-500);
  --pui-hero-button-outline-border-hover-start: var(--static-overlay-light-200);
  --pui-hero-button-outline-border-start: var(--static-overlay-light-200);
  --pui-hero-button-outline-fg: var(--static-gray-0);
  --pui-hero-button-solid-bg-active: #FE6B16FF;
  --pui-hero-button-solid-bg-end: #FE6B16FF;
  --pui-hero-button-solid-bg-hover-end: #FE6B16FF;
  --pui-hero-button-solid-bg-hover-start: #F0A44CFF;
  --pui-hero-button-solid-bg-start: #EE9632FF;
  --pui-hero-button-solid-border-active-end: var(--static-gray-0);
  --pui-hero-button-solid-border-active-start: var(--static-overlay-light-300);
  --pui-hero-button-solid-border-end: var(--static-gray-0);
  --pui-hero-button-solid-border-hover-end: var(--static-gray-0);
  --pui-hero-button-solid-border-hover-start: var(--static-overlay-light-300);
  --pui-hero-button-solid-border-start: var(--static-overlay-light-300);
  --pui-hero-button-solid-fg: var(--static-gray-0);
}

/* Rodzina --pui-pricing-box-* — odczyt commit 1bcf0cc. */
:root {
  --pui-pricing-box-features-gap: var(--static-space-1-5x);
  --pui-pricing-box-gap: var(--static-space-4x);
  --pui-pricing-box-header-gap: var(--static-space-1x);
  --pui-pricing-box-main-gap: var(--static-space-3x);
  --pui-pricing-box-padding-h: var(--static-space-4x);
  --pui-pricing-box-padding-v: var(--static-space-4x);
  --pui-pricing-box-price-gap: var(--static-space-1x);
  --pui-pricing-box-radius: var(--pui-ui-radius-5xl);
  --pui-pricing-box-width-min: 420px;
  /* mode/light.scss */
  --pui-pricing-box-bg: var(--static-gray-0);
  --pui-pricing-box-divider: var(--static-gray-200);
}

:root {
  /* ODCZYT LITERAŁÓW z ui/pricing/PricingBox.vue */
  --src-pricing-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.12), 0px 8px 25px 0px rgba(14, 13, 16, 0.04), 0px 8px 24px 6px rgba(0, 0, 0, 0.05);
  --src-pricing-help-fg: #4D4D5C;
  --src-pricing-star-size: 18px;
  --src-pricing-help-opacity: 0.7;
  --src-pricing-divider-height: 1px;
  --src-pricing-light-weight: 300;
  --src-pricing-price-weight: 700;
}

/* Uzupełnienie rodziny --pui-text-* CAŁOŚCIĄ, 07.08.2026. Poprzednio
   skopiowana po części: stopnie i wysokości wiersza były, światła nie.
   Skutek: strona atomu twierdziła „rodzina kompletna", a 13 z 15 próbek
   stało na nierozwiązanym var(). Ta sama klasa błędu co przy rodzinie hero. */
:root {
  --pui-text-h3-letter-spacing: 0px;
  --pui-text-h4-letter-spacing: 0px;
  --pui-text-h5-letter-spacing: 0px;
  --pui-text-h6-letter-spacing: 0px;
  --pui-text-h7-letter-spacing: 0px;
  --pui-text-h8-letter-spacing: 0px;
  --pui-text-p-base-letter-spacing: 0px;
  --pui-text-p-lg-letter-spacing: 0px;
  --pui-text-p-sm-letter-spacing: 0px;
  --pui-text-p-xlg-letter-spacing: 0px;
  --pui-text-p-xs-letter-spacing: 0px;
  --pui-text-p-xxlg-letter-spacing: 0px;
  --pui-text-p-xxs-letter-spacing: 0px;
}

/* Rodzina --pui-pricing-slider-* — odczyt 07.08.2026.
   UWAGA: arkusz komponentu czyta te nazwy Z FALLBACKIEM (np.
   var(--pui-pricing-slider-fg-end, #8253e5)), więc brak roli jest w produkcie
   niewidoczny. Fallbacki przenoszę jako osobne role --src-slider-*, żeby było
   widać, ile z tego stoi na wartości wpisanej wprost. */
:root {
  --pui-pricing-slider-bg: var(--static-overlay-light-100);
  --pui-pricing-slider-fg-end: var(--static-purple-400);
  --pui-pricing-slider-fg-start: var(--static-purple-250);
  --pui-pricing-slider-gap: var(--static-space-1-25x);
  --pui-pricing-slider-tooltip-padding-h: var(--static-space-1x);
  --pui-pricing-slider-tooltip-padding-v: var(--static-space-0-75x);
  --pui-pricing-slider-width-max: 720px;

  /* ODCZYT FALLBACKÓW I LITERAŁÓW z ui/pricing/PricingSlider.vue */
  --src-slider-height: 121px;
  --src-slider-max-width: 720px;
  --src-slider-padding: 10px;
  --src-slider-track-height: 12px;
  --src-slider-track-radius: 20px;
  --src-slider-track-bg: rgba(255, 255, 255, 0.15);
  --src-slider-fg-start: #b48fef;
  --src-slider-fg-end: #8253e5;
  --src-slider-thumb-size: 31px;
  --src-slider-thumb-inner-size: 15px;
  --src-slider-thumb-inner-offset: 8px;
  --src-slider-thumb-bg: #fff;
  --src-slider-glow-size: 91px;
  --src-slider-glow-top: -22px;
  --src-slider-glow-left: -30px;
  --src-slider-glow: radial-gradient(circle at center, rgba(106, 50, 224, 0.4) 0%, rgba(106, 50, 224, 0.2) 28%, rgba(106, 50, 224, 0) 68%);
  --src-slider-tooltip-top: -66px;
  --src-slider-tooltip-padding-v: 6px;
  --src-slider-tooltip-padding-h: 8px;
  --src-slider-tooltip-radius: 8px;
  --src-slider-price-top: 34px;
  --src-slider-inner-top: 11.5px;
  /* Uchwyt stoi pol piksela WYZEJ niz srodek toru: top: calc(50% - 0.5px)
     w arkuszu. Przeniesione 10.08.2026 przy przejezdzie PricingSlider —
     do tego dnia odrys niosl czyste 50%. */
  --src-slider-thumb-top: -0.5px;
  --src-slider-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.12), 0px 8px 24px 0px rgba(0, 0, 0, 0.02), 0px 8px 32px 0px rgba(0, 0, 0, 0.08);
  --src-slider-thumb-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.12), 0px 8px 25px 0px rgba(14, 13, 16, 0.04), 0px 8px 24px 6px rgba(0, 0, 0, 0.05);
}

/* ODCZYT LITERAŁÓW z ui/SectionBackground.vue, 07.08.2026.
   Cała warstwa tła stoi na wartościach wpisanych wprost: jedyny token, jaki
   ten plik czyta, to --pui-section-cta-body-graphic-width. */
:root {
  --src-sectionbg-min-width: 1920px;
  --src-sectionbg-min-height: 930px;
  --src-sectionbg-cta-min-height: 572px;
  --src-sectionbg-cta-overlay: linear-gradient(0deg, #021710 0%, rgba(2, 23, 16, 0.00) 100%);
  --src-sectionbg-side-height: 454px;
  --src-sectionbg-card-max-width: 266px;
  --src-sectionbg-card-radius: 16px;
  --src-sectionbg-card-img-radius: 10px;
  --src-sectionbg-card-shadow: 0px 47px 52px 6px rgba(5, 109, 72, 0.0705882353), 0px 14px 30px 0px rgba(0, 0, 0, 0.0901960784);
  --src-sectionbg-frame-bg: #FFFFFF0D;
  --src-sectionbg-frame-blur: 20px;
  --src-sectionbg-frame-width: 278px;
  --src-sectionbg-frame-height: 305px;
  --src-sectionbg-frame-offset: -6px;
  --src-sectionbg-frame-border: linear-gradient(113.79deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 5.75%), linear-gradient(243.3deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 4.79%), linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 90%);
  --src-sectionbg-small-max-width: 92px;
  --src-sectionbg-corner-max-width: 220px;
}

/* Rodzina --pui-sub-navigation-item-* — odczyt 07.08.2026. */
:root {
  /* Rodzina --pui-sub-navigation-* (PANEL, nie pozycja) — odczyt 08.08.2026,
     scales/desktop.scss oraz mode/light.scss. Dopisana przy budowie odczytu
     rozwijanego menu: dotąd katalog miał wyłącznie podrodzinę -item-* i dwa
     kolory cienia, czyli pozycję bez panelu, w którym stoi. */
  --pui-sub-navigation-padding-v: var(--static-space-3-5x);
  --pui-sub-navigation-padding-h: var(--static-space-3-5x);
  --pui-sub-navigation-radius: var(--pui-ui-radius-4xl);
  --pui-sub-navigation-sections-gap: var(--static-space-2-5x);
  --pui-sub-navigation-gap-v: var(--static-space-1-25x);
  --pui-sub-navigation-gap-h: var(--static-space-2x);
  --pui-sub-navigation-section-heading-gap: var(--static-space-2x);
  --pui-sub-navigation-list-heading-padding-left: var(--static-space-1-5x);
  --pui-sub-navigation-divider: var(--static-gray-200);
  --pui-sub-navigation-bg: var(--static-gray-0);
  /* Sześć ról dopisanych 09.08.2026 przy kadrach menu zwiniętego (NV-09, NV-10).
     Wszystkie sześć już były w kodzie i były czytane przez navbar.scss w bloku
     poniżej progu tabletu — katalog ich nie miał, bo miał wyłącznie panel
     rozwinięcia biurkowego. Przepisane z tokens/scales/desktop.scss
     i tokens/mode/light.scss, bez zmiany wartości. */
  --pui-sub-navigation-border: var(--static-gray-300);
  --pui-sub-navigation-border-width: var(--pui-ui-border-outline-border-width);
  --pui-sub-navigation-divider-width: var(--pui-ui-border-outline-border-width);
  --pui-sub-navigation-link-gap: var(--static-space-1-5x);
  --pui-sub-navigation-link-padding: var(--static-space-1-5x);
  --pui-sub-navigation-list-heading-gap: var(--static-space-2x);
  --pui-footer-separator: var(--static-gray-100);

  --pui-sub-navigation-item-border-blue-start: var(--static-blue-alpha-500);
  --pui-sub-navigation-item-border-end: var(--static-overlay-dark-50);
  --pui-sub-navigation-item-border-orange-start: var(--static-orange-alpha-500);
  --pui-sub-navigation-item-border-primary-start: var(--static-primary-alpha-500);
  --pui-sub-navigation-item-border-purple-start: var(--static-purple-alpha-500);
  --pui-sub-navigation-item-border-red-start: var(--static-red-alpha-500);
  --pui-sub-navigation-item-content-gap: var(--static-space-0-5x);
  --pui-sub-navigation-item-gap: var(--static-space-2x);
  --pui-sub-navigation-item-heading-gap-h: var(--static-space-1x);
  /* ODSTEP TYTUL - OPIS ZBITY DO 4 px (praca nad submenu 22.08.2026: menu ma byc gestsze).
     Rola byla i jest jedna, wiec zmienia sie tez wariant poziomy pozycji. */
  --pui-sub-navigation-item-heading-gap-v: var(--static-space-0-25x);
  --pui-sub-navigation-item-horizontal-heading-width: 260px;
  /* IKONA POZYCJI 36 px, nie 60 (decyzja z pracy nad submenu 21-23.08.2026: "uzywaj naszych
     ikon z menu, ale pomniejszonych"). Rola istniala i NIE BYLA UZYWANA - arkusz mial 60 px
     wpisane wprost; od 23.08 czyta role. */
  --pui-sub-navigation-item-icon-size: 36px;
  /* NOWA ROLA: odstep ikony od tekstu pozycji. Wczesniej 16 px wpisane w arkusz, bez nazwy -
     rodzina nie miala jak go zmienic w jednym miejscu. Wartosc to ta sama, ktora stoi
     w przyjetym szkicu submenu. */
  --pui-sub-navigation-item-icon-gap: var(--static-space-1-5x);
  --pui-sub-navigation-item-padding: var(--static-space-1-5x);
  --pui-sub-navigation-item-radius: var(--pui-ui-radius-3xl);

  /* ODCZYT LITERAŁÓW z elements/navbar.scss, blok .nav__dropdown i .dropdown__icon
     (08.08.2026). Obie wartości mają w kodzie komentarz „TODO: replace”, czyli
     autor sam je oznaczył jako tymczasowe — przenoszę je pod przedrostkiem
     --src-, żeby było widać, że nie są tokenem. */
  --src-navdropdown-offset-top: 8px;
  --src-navdropdown-icon-width: 316px;

  /* ODCZYT LITERAŁÓW z elements/navbar.scss, blok .nav-item.
     Cztery z nich autor sam oznaczył dopiskiem TODO: replace. */
  --src-navitem-icon-size: 60px;
  --src-navitem-icon-gap: 16px;
  --src-navitem-icon-radius: 10px;
  --src-navitem-border-width: 1px;
}

:root {
  --static-blue-alpha-500: #1A76FF80;
  --static-orange-alpha-500: #FF691480;
  --static-primary-alpha-500: #07C07E80;
  --static-purple-alpha-500: #7540E280;
  --static-red-alpha-500: #EA3D3D80;
}

/* ODCZYT LITERAŁÓW z ui/content/FeatureIllustrationSm.vue oraz z reguły
   bazowej .instance-box, która stoi w elements/old-feature.scss — pliku
   z przedrostkiem „old" wciąż wczytywanym przez arkusz główny.
   Rama wszystkich 83 ilustracji przy funkcjach zależy więc od pliku
   oznaczonego nazwą jako nieaktualny. Zgłoszone, nie ruszane. */
:root {
  --src-instance-max-size: 542px;
  --src-instance-max-size-tablet: 370px;
  --src-instance-bg: #fff;
  --src-instance-radius: 10px;
  --src-instance-radius-lg: 20px;
  --src-instance-line-height: 0.5;
  --src-instance-shadow: 0px 14px 30px rgba(0, 0, 0, 0.09), 0px 47px 52px 6px rgba(5, 109, 72, 0.07);
  --src-instance-shadow-light: 0px -5px 43px 0px rgba(0, 0, 0, 0.03), 0px 6px 15px 0px rgba(1, 69, 45, 0.06);
  --src-instance-shadow-light-sides: 0px 8px 25px 0px rgba(14, 13, 16, 0.04), 0px 8px 24px 6px rgba(0, 0, 0, 0.05), 0px 0px 1px 0px rgba(0, 0, 0, 0.12);
  --src-instance-blur: 3.5px;
  --src-instance-border-width: 1px;
  --src-instance-border-width-lg: 2px;
  /* Pięć kolorów obwiedni. CZTERY Z NICH NIE ISTNIEJĄ W PALECIE i nie należą
     do żadnej rodziny ról — to wartości spoza systemu, wpisane w arkusz. */
  --src-instance-border: #07C07E;
  --src-instance-border-red: #ef4444;
  --src-instance-border-purple: #a855f7;
  --src-instance-border-orange: #f97316;
  --src-instance-border-gray: #d1d5db;
  --src-instance-avatar-border: #fff;
}

/* Rodziny --pui-feature-icon-* i --pui-feature-slider-* — odczyt 07.08.2026. */
:root {
  --pui-feature-icon-border-width: var(--pui-ui-border-outline-border-width);
  --pui-feature-icon-gap: var(--static-space-4x);
  --pui-feature-icon-height: 88px;
  --pui-feature-icon-icon-size: 56px;
  --pui-feature-icon-on-primary-bg-end: var(--static-overlay-light-100);
  --pui-feature-icon-on-primary-bg-solid: var(--static-gray-0);
  --pui-feature-icon-on-primary-bg-start: var(--static-overlay-dark-50);
  --pui-feature-icon-on-primary-border-end: var(--static-overlay-light-500);
  --pui-feature-icon-on-primary-border-start: var(--static-overlay-light-300);
  --pui-feature-icon-padding-h: var(--static-space-6x);
  --pui-feature-icon-padding-v: var(--static-space-6x);
  --pui-feature-icon-radius: var(--pui-ui-radius-3xl);
  --pui-feature-icon-text-gap: var(--static-space-1-5x);
  --pui-feature-icon-width: 300px;
  --pui-feature-slider-gap: var(--static-space-3x);

  /* ODCZYT LITERAŁÓW z ui/Slider/Features.vue */
  --src-fslider-shadow: 0px 8px 40px 0px #00000029;
  --src-fslider-mask: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.5) 49.52%, rgba(255, 255, 255, 0.1) 100%);
  --src-fslider-duration: 75s;
  --src-fslider-shift: -33.3333%;

  /* ODCZYT LITERAŁÓW z sections/FeaturesShowcase.vue. Dwie wartości i jedna
     zależność między nimi: opakowanie ma overflow: hidden, które ucięłoby cień
     kart, więc autor dodał pas 36 px paddingu i zdjął go z powrotem marginesem
     −36 px. Cień sięga 8 + 40 = 48 px w dół, czyli pas jest o 12 px za wąski
     i cień DALEJ jest ucięty od spodu. Zgłoszone. */
  /* Rozmiar rysunku w plakietce banera. W kodzie ikona przychodzi jako
     KOMPONENT wektorowy z własnym viewBox 16x16 i bez rozmiaru w arkuszu —
     rysunek zajmuje tyle, ile daje mu plakietka. Odczyt 10.08.2026. */
  --src-banner-label-icon-size: 16px;
  /* Ikona przycisku hero. POPRAWIONE 10.08.2026 na uwagę zamawiającego: pole NIE ma
     wymiarów z wywołania hosta, bierze je z ról Button.vue — w rozmiarze lg
     `width: --pui-hero-button-lg-icon-size` (24 px) i `height:
     --pui-button-base-icon-size' (24 px), czyli 24x24, a nie 24x22.
     Wnętrze rysunku (icons/AnimatedDownload.vue) to DWIE strzałki w kolumnie
     z odstępem 8 px, przycięte `overflow: hidden`, w spoczynku przesunięte
     `top: -17px` w rozmiarze lg — na ekranie widać z nich JEDNĄ, na wysokości
     4 px od góry pola, i podstawkę szeroką na całe pole przy dolnej krawędzi.
     Katalog rysuje tę jedną klatkę spoczynkową; przesuw na hover żyje
     w pliku ikony. Literały stąd, bo w kodzie nie mają ról. */
  --src-banner-btn-arrow-top-lg: 4px;
  --src-banner-btn-tray-height: 8px;

  --src-fshowcase-pad: 36px;
  --src-fshowcase-pull: -36px;

  /* ODCZYT LITERAŁÓW z ui/SocialIcons.vue: rozmiar rysunku wpisany w arkusz.
     Barwa rysunku (#C6C6D3) NIE dostaje tu roli --src-*, bo arkusz ją
     nadpisuje rolą systemu — na ekranie nie widać jej ani razu. */
  --src-social-icon-size: 32px;

  /* ODCZYT LITERAŁÓW z elements/animations.scss: trzy wartości stanu
     spoczynkowego i dwa rozmycia. */
  --src-anim-rest-shift: 48px;
  --src-anim-transition: all 0.3s ease-out;
  --src-anim-blur-end: 15px;
  --src-anim-blur-rest: 0px;
  /* Przejście ROZMYCIA jest inne od przejścia wejścia elementu i to jest odczyt,
     nie wybór: `animations.scss` 213-221 daje rozmyciu `all 0.8s ease-in-out`,
     a `--src-anim-transition` (all 0.3s ease-out) należy do wejścia elementu.
     Podstawienie tamtej roli tutaj zmieniłoby czas, a nie uzupełniło brak. */
  --src-anim-blur-transition: all 0.8s ease-in-out;

  /* ============================================================================
     RODZINA BANERA GŁÓWNEGO — odczyt 07.08.2026, skala desktop + tryb jasny.
     Baner pionowy strony głównej. Cztery role tej rodziny są ZDEFINIOWANE
     I NIEUŻYWANE w kodzie (container-width, slot-height, large/medium-max-width);
     stoją tu, bo katalog pokazuje rodzinę, a nie tylko to, co czytane —
     nieużycie jest zapisane w podpisach kadrów i na liście jako RZ-35.
     ============================================================================ */
  --pui-banner-gradient-max-width: 1580px;
  --pui-banner-graphic-image-base-inside-radius: var(--pui-ui-radius-3xl);
  --pui-banner-graphic-image-base-outside-radius: var(--pui-ui-radius-5xl);
  --pui-banner-graphic-image-base-padding-h: var(--static-space-1x);
  --pui-banner-graphic-image-base-padding-v: var(--static-space-1x);
  --pui-banner-graphic-image-border-width: var(--pui-ui-border-outline-border-width);
  --pui-banner-graphic-image-height: 400px;
  --pui-banner-graphic-image-large-max-width: 980px;
  --pui-banner-graphic-image-medium-max-width: 798px;
  --pui-banner-graphic-image-sm-inside-radius: var(--pui-ui-radius-xl);
  --pui-banner-graphic-image-sm-outside-radius: var(--pui-ui-radius-3xl);
  --pui-banner-graphic-image-sm-padding-h: var(--static-space-0-75x);
  --pui-banner-graphic-image-sm-padding-v: var(--static-space-0-75x);
  --pui-banner-vertical-actions-gap: var(--static-space-2x);
  --pui-banner-vertical-actions-gap-pricing: var(--static-space-6x);
  --pui-banner-vertical-container-padding-bottom: var(--static-space-8x);
  --pui-banner-vertical-container-padding-h: var(--static-space-4x);
  --pui-banner-vertical-container-padding-top: var(--static-space-7x);
  --pui-banner-vertical-heading-gap: var(--static-space-6x);
  --pui-banner-vertical-heading-main-gap: var(--static-space-3x);
  --pui-banner-vertical-heading-width: 980px;
  --pui-banner-vertical-slot-gap: var(--static-space-1-25x);
  --pui-banner-vertical-slot-height: 400px;
  /* RODZINA BANERA POZIOMEGO — odczyt tokens/scales/desktop.scss, 10.08.2026,
     commit 1bcf0cc, przy odczycie MainBannerHorizontal.vue. Dziewięć ról,
     wszystkie w rodzinie --pui-banner-horizontal-*. DWIE Z NICH SĄ MARTWE:
     container-gap (64 px) i slot-height (646 px) mają w arkuszu komponentu
     LITERAŁ O TEJ SAMEJ WARTOŚCI dwie linie dalej (gap: 64px, max-height: 646px),
     więc rola istnieje, zgadza się co do piksela i nikt jej nie woła. Zapisane
     na liście rozjazdów; katalog pokazuje rolę, bo rodzina ją ma. */
  --pui-banner-horizontal-actions-gap: var(--static-space-2x);
  --pui-banner-horizontal-container-gap: var(--static-space-8x);
  --pui-banner-horizontal-container-padding-bottom: var(--static-space-12x);
  --pui-banner-horizontal-container-padding-h: var(--static-space-4x);
  --pui-banner-horizontal-container-padding-top: var(--static-space-12x);
  --pui-banner-horizontal-container-width: 1420px;
  --pui-banner-horizontal-heading-gap: var(--static-space-6x);
  --pui-banner-horizontal-heading-main-gap: var(--static-space-3x);
  --pui-banner-horizontal-heading-width: 980px;
  --pui-banner-horizontal-slot-height: 646px;
  --pui-banner-horizontal-slot-width: 646px;
  /* LITERAŁY BANERA POZIOMEGO — wartości stojące w arkuszu komponentu wprost,
     bez roli. Poświata pod ilustracją to koło o barwie zależnej od koloru
     banera; obie barwy są w arkuszu zapisami rgba(), nie rolami. */
  --src-banner-h-container-gap: 64px;
  --src-banner-h-slot-max-height: 646px;
  --src-banner-h-glow-max: 480px;
  --src-banner-h-glow-blur: 80px;
  --src-banner-h-glow-primary: rgba(54, 210, 165, 0.42);
  --src-banner-h-glow-purple: rgba(130, 83, 229, 0.42);
  --src-banner-h-btn-text-gap: 8px;
  --pui-overlay-main-bg-outside-radius: var(--pui-ui-radius-5xl);
  --pui-banner-graphic-bg: var(--static-gray-0);
  --pui-banner-graphic-bg-overlay: var(--static-overlay-light-50);
  --pui-banner-graphic-gradient-bg-end: #02171099;
  --pui-banner-graphic-gradient-bg-start: var(--static-overlay-light-0);
  --pui-banner-graphic-gradient-e-end: var(--static-overlay-light-0);
  --pui-banner-graphic-gradient-e-start: var(--static-primary-alpha-400);
  --pui-banner-graphic-gradient-o-end: var(--static-overlay-light-0);
  --pui-banner-graphic-gradient-o-start: var(--static-gray-0);
  --pui-banner-orange-bg-gradient-h-end: #AF470D00;
  --pui-banner-orange-bg-gradient-h-start: var(--static-orange-850);
  --pui-banner-orange-bg-gradient-r-start: var(--static-orange-500);
  --pui-banner-orange-bg-gradient-radial-end: #63320C00;
  --pui-banner-primary-bg-gradient-h-end: #073C2900;
  --pui-banner-primary-bg-gradient-h-start: #073C29FF;
  --pui-banner-primary-bg-gradient-r-end: #02171000;
  --pui-banner-primary-bg-gradient-r-start: var(--static-primary-600);
  --pui-banner-purple-bg-gradient-h-end: #02171000;
  --pui-banner-purple-bg-gradient-h-start: var(--static-purple-900);
  --pui-banner-purple-bg-gradient-r-start: var(--static-purple-500);
  --pui-banner-purple-bg-gradient-radial-end: #02171000;
  --pui-banner-red-bg-gradient-h-end: #45070700;
  --pui-banner-red-bg-gradient-h-start: var(--static-red-950);
  --pui-banner-red-bg-gradient-r-start: var(--static-red-600);
  --pui-banner-red-bg-gradient-radial-end: #45070700;
  --pui-surface-solid-main: var(--static-gray-0);
  --pui-surface-solid-primary: var(--static-primary-950);
  --pui-surface-solid-purple: var(--static-purple-950);
  /* Rola z rodziny banera, użyta przez .section__frame w helpers/custom.scss.
     Ta sama wartość, o którą woła nieistniejąca rola --sys-* w banerze. */

  /* ODCZYT LITERAŁÓW z layout/MainBanner*.vue */
  --src-banner-pad-top: 109px;
  --src-banner-glow-height: 608px;
  --src-banner-illustration-fade-height: 200px;
  --src-banner-illustration-fade-opacity: 0.5;
  --src-banner-illustration-min-width: 1480px;
  --src-banner-main-homepage-img-max: 964px;
  --src-banner-main-img-max: 782px;
  --src-banner-frame-blur: 20px;
  --src-banner-frame-shadow: 0px 47px 52px 6px rgba(5, 109, 72, 0.07), 0px 14px 30px 0px rgba(0, 0, 0, 0.09);
  --src-banner-frame-mask: linear-gradient(113.79deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 5.75%), linear-gradient(243.3deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 4.79%), linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 90%);
  --src-banner-frame-bg-fallback: rgba(255, 255, 255, 0.05);
  --src-banner-shape-ratio: 1580 / 913;
  --src-banner-parallax-rest-y: 20px;

  /* RODZINY HERO — plakietka hero i przycisk hero, skala desktop + tryb jasny.
     Odczyt 07.08.2026. Nieużywane w kodzie i widoczne tutaj jako brak:
     --pui-hero-label-*-height (4 rozmiary) i --pui-hero-label-*-*-enlarged
     (8 ról) — arkusz liczy wysokość plakietki z paddingu, a wariantu
     „enlarged" nie ma żadna klasa. RZ-35. */
  --pui-hero-button-base-border-width: var(--pui-ui-border-outline-border-width);
  --pui-hero-button-base-gap-h: var(--static-space-1-25x);
  --pui-hero-button-base-gap-v: var(--static-space-0x);
  --pui-hero-button-base-height-min: 85px;
  --pui-hero-button-base-icon-size: var(--static-space-2-5x);
  --pui-hero-button-base-padding-h: var(--static-space-4x);
  --pui-hero-button-base-padding-v: var(--static-space-2x);
  --pui-hero-button-base-radius: var(--pui-ui-radius-2xl);
  --pui-hero-button-base-width-min: 240px;
  --pui-hero-button-lg-border-width: var(--pui-ui-border-outline-border-width);
  --pui-hero-button-lg-gap-h: var(--static-space-2x);
  --pui-hero-button-lg-gap-v: var(--static-space-0x);
  --pui-hero-button-lg-height-min: 92px;
  --pui-hero-button-lg-icon-size: var(--static-space-3x);
  --pui-hero-button-lg-padding-h: var(--static-space-4x);
  --pui-hero-button-lg-padding-v: var(--static-space-2x);
  --pui-hero-button-lg-radius: var(--pui-ui-radius-2xl);
  --pui-hero-button-lg-width-min: 300px;
  --pui-hero-button-sm-border-width: var(--pui-ui-border-outline-border-width);
  --pui-hero-button-sm-gap-h: var(--static-space-1-25x);
  --pui-hero-button-sm-gap-v: var(--static-space-0x);
  --pui-hero-button-sm-height-min: 44px;
  --pui-hero-button-sm-icon-size: var(--static-space-2x);
  --pui-hero-button-sm-padding-h: var(--static-space-2x);
  --pui-hero-button-sm-padding-v: var(--static-space-1x);
  --pui-hero-button-sm-radius: var(--pui-ui-radius-md);
  --pui-hero-button-sm-width-min: 80px;
  --pui-hero-label-base-gap: var(--static-space-0-75x);
  --pui-hero-label-base-height: 32px;
  --pui-hero-label-base-icon-size: 12px;
  --pui-hero-label-base-outline-border-width: var(--pui-ui-border-outline-border-width);
  --pui-hero-label-base-padding-h: var(--static-space-1-5x);
  --pui-hero-label-base-padding-h-enlarged: var(--static-space-2x);
  --pui-hero-label-base-padding-v: var(--static-space-0-5x);
  --pui-hero-label-base-padding-v-enlarged: 5px;
  --pui-hero-label-base-radius: var(--pui-ui-radius-rounded);
  --pui-hero-label-lg-gap: var(--static-space-1x);
  --pui-hero-label-lg-height: 36px;
  --pui-hero-label-lg-icon-size: 16px;
  --pui-hero-label-lg-outline-border-width: var(--pui-ui-border-outline-border-width);
  --pui-hero-label-lg-padding-h: var(--static-space-2x);
  --pui-hero-label-lg-padding-h-enlarged: var(--static-space-2-5x);
  --pui-hero-label-lg-padding-v: var(--static-space-0-75x);
  --pui-hero-label-lg-padding-v-enlarged: 7px;
  --pui-hero-label-lg-radius: var(--pui-ui-radius-rounded);
  --pui-hero-label-sm-gap: var(--static-space-0-75x);
  --pui-hero-label-sm-height: 30px;
  --pui-hero-label-sm-icon-size: 12px;
  --pui-hero-label-sm-outline-border-width: var(--pui-ui-border-outline-border-width);
  --pui-hero-label-sm-padding-h: var(--static-space-1-5x);
  --pui-hero-label-sm-padding-h-enlarged: var(--static-space-2x);
  --pui-hero-label-sm-padding-v: var(--static-space-0-25x);
  --pui-hero-label-sm-padding-v-enlarged: var(--static-space-0-5x);
  --pui-hero-label-sm-radius: var(--pui-ui-radius-rounded);
  --pui-hero-label-xs-gap: var(--static-space-0-5x);
  --pui-hero-label-xs-height: 26px;
  --pui-hero-label-xs-icon-size: 12px;
  --pui-hero-label-xs-outline-border-width: var(--pui-ui-border-outline-border-width);
  --pui-hero-label-xs-padding-h: var(--static-space-1x);
  --pui-hero-label-xs-padding-h-enlarged: var(--static-space-1-25x);
  --pui-hero-label-xs-padding-v: var(--static-space-0-5x);
  --pui-hero-label-xs-padding-v-enlarged: 5px;
  --pui-hero-label-xs-radius: var(--pui-ui-radius-rounded);
  --pui-hero-button-outline-bg: #FFFFFF03;
  --pui-hero-button-outline-bg-active: var(--static-overlay-light-50);
  --pui-hero-button-outline-bg-hover: var(--static-overlay-light-50);
  --pui-hero-button-outline-border-active-end: var(--static-overlay-light-500);
  --pui-hero-button-outline-border-active-start: var(--static-overlay-light-200);
  --pui-hero-button-outline-border-end: var(--static-overlay-light-500);
  --pui-hero-button-outline-border-hover-end: var(--static-overlay-light-500);
  --pui-hero-button-outline-border-hover-start: var(--static-overlay-light-200);
  --pui-hero-button-outline-border-start: var(--static-overlay-light-200);
  --pui-hero-button-outline-fg: var(--static-gray-0);
  --pui-hero-button-solid-bg-active: #FE6B16FF;
  --pui-hero-button-solid-bg-end: #FE6B16FF;
  --pui-hero-button-solid-bg-hover-end: #FE6B16FF;
  --pui-hero-button-solid-bg-hover-start: #F0A44CFF;
  --pui-hero-button-solid-bg-start: #EE9632FF;
  --pui-hero-button-solid-border-active-end: var(--static-gray-0);
  --pui-hero-button-solid-border-active-start: var(--static-overlay-light-300);
  --pui-hero-button-solid-border-end: var(--static-gray-0);
  --pui-hero-button-solid-border-hover-end: var(--static-gray-0);
  --pui-hero-button-solid-border-hover-start: var(--static-overlay-light-300);
  --pui-hero-button-solid-border-start: var(--static-overlay-light-300);
  --pui-hero-button-solid-fg: var(--static-gray-0);
  --pui-hero-label-default-bg-active-end: var(--static-overlay-dark-100);
  --pui-hero-label-default-bg-active-start: var(--static-overlay-dark-100);
  --pui-hero-label-default-bg-end: var(--static-overlay-dark-100);
  --pui-hero-label-default-bg-hover-end: var(--static-overlay-dark-100);
  --pui-hero-label-default-bg-hover-start: var(--static-overlay-dark-100);
  --pui-hero-label-default-bg-start: var(--static-overlay-dark-50);
  --pui-hero-label-default-border-active-end: var(--static-overlay-dark-100);
  --pui-hero-label-default-border-active-start: var(--static-overlay-dark-50);
  --pui-hero-label-default-border-end: var(--static-overlay-dark-100);
  --pui-hero-label-default-border-hover-end: var(--static-overlay-dark-100);
  --pui-hero-label-default-border-hover-start: var(--static-overlay-dark-50);
  --pui-hero-label-default-border-start: var(--static-overlay-dark-50);
  --pui-hero-label-default-fg: var(--static-gray-900);
  --pui-hero-label-default-fg-active: var(--static-gray-900);
  --pui-hero-label-default-fg-hover: var(--static-gray-900);
  --pui-hero-label-primary-bg-active-end: var(--static-primary-alpha-150);
  --pui-hero-label-primary-bg-active-start: var(--static-primary-alpha-150);
  --pui-hero-label-primary-bg-end: var(--static-primary-alpha-150);
  --pui-hero-label-primary-bg-hover-end: var(--static-primary-alpha-150);
  --pui-hero-label-primary-bg-hover-start: var(--static-primary-alpha-150);
  --pui-hero-label-primary-bg-start: var(--static-primary-alpha-50);
  --pui-hero-label-primary-border-active-end: var(--static-primary-500);
  --pui-hero-label-primary-border-active-start: var(--static-primary-500);
  --pui-hero-label-primary-border-end: var(--static-primary-500);
  --pui-hero-label-primary-border-hover-end: var(--static-primary-500);
  --pui-hero-label-primary-border-hover-start: var(--static-primary-500);
  --pui-hero-label-primary-border-start: var(--static-primary-600);
  --pui-hero-label-primary-fg: var(--static-primary-600);
  --pui-hero-label-primary-fg-active: var(--static-primary-500);
  --pui-hero-label-primary-fg-hover: var(--static-primary-500);
}

[data-context="on-dark"] {
  --pui-hero-button-outline-bg: #FFFFFF03;
  --pui-hero-button-outline-bg-active: var(--static-overlay-light-50);
  --pui-hero-button-outline-bg-hover: var(--static-overlay-light-50);
  --pui-hero-button-outline-border-active-end: var(--static-overlay-light-500);
  --pui-hero-button-outline-border-active-start: var(--static-overlay-light-200);
  --pui-hero-button-outline-border-end: var(--static-overlay-light-500);
  --pui-hero-button-outline-border-hover-end: var(--static-overlay-light-500);
  --pui-hero-button-outline-border-hover-start: var(--static-overlay-light-200);
  --pui-hero-button-outline-border-start: var(--static-overlay-light-200);
  --pui-hero-button-outline-fg: var(--static-gray-0);
  --pui-hero-button-solid-bg-active: #FE6B16FF;
  --pui-hero-button-solid-bg-end: #FE6B16FF;
  --pui-hero-button-solid-bg-hover-end: #FE6B16FF;
  --pui-hero-button-solid-bg-hover-start: #F0A44CFF;
  --pui-hero-button-solid-bg-start: #EE9632FF;
  --pui-hero-button-solid-border-active-end: var(--static-gray-0);
  --pui-hero-button-solid-border-active-start: var(--static-overlay-light-300);
  --pui-hero-button-solid-border-end: var(--static-gray-0);
  --pui-hero-button-solid-border-hover-end: var(--static-gray-0);
  --pui-hero-button-solid-border-hover-start: var(--static-overlay-light-300);
  --pui-hero-button-solid-border-start: var(--static-overlay-light-300);
  --pui-hero-button-solid-fg: var(--static-gray-0);
  --pui-hero-label-default-bg-active-end: var(--static-overlay-light-150);
  --pui-hero-label-default-bg-active-start: var(--static-overlay-light-150);
  --pui-hero-label-default-bg-end: var(--static-overlay-light-150);
  --pui-hero-label-default-bg-hover-end: var(--static-overlay-light-150);
  --pui-hero-label-default-bg-hover-start: var(--static-overlay-light-150);
  --pui-hero-label-default-bg-start: var(--static-overlay-light-50);
  --pui-hero-label-default-border-active-end: var(--static-overlay-light-150);
  --pui-hero-label-default-border-active-start: var(--static-overlay-light-50);
  --pui-hero-label-default-border-end: var(--static-overlay-light-150);
  --pui-hero-label-default-border-hover-end: var(--static-overlay-light-150);
  --pui-hero-label-default-border-hover-start: var(--static-overlay-light-50);
  --pui-hero-label-default-border-start: var(--static-overlay-light-50);
  --pui-hero-label-default-fg: var(--static-gray-50);
  --pui-hero-label-default-fg-active: var(--static-gray-50);
  --pui-hero-label-default-fg-hover: var(--static-gray-50);
  --pui-hero-label-primary-bg-active-end: var(--static-primary-alpha-150);
  --pui-hero-label-primary-bg-active-start: var(--static-primary-alpha-150);
  --pui-hero-label-primary-bg-end: var(--static-primary-alpha-150);
  --pui-hero-label-primary-bg-hover-end: var(--static-primary-alpha-150);
  --pui-hero-label-primary-bg-hover-start: var(--static-primary-alpha-150);
  --pui-hero-label-primary-bg-start: var(--static-primary-alpha-50);
  --pui-hero-label-primary-border-active-end: var(--static-primary-400);
  --pui-hero-label-primary-border-active-start: var(--static-primary-400);
  --pui-hero-label-primary-border-end: var(--static-primary-400);
  --pui-hero-label-primary-border-hover-end: var(--static-primary-400);
  --pui-hero-label-primary-border-hover-start: var(--static-primary-400);
  --pui-hero-label-primary-border-start: var(--static-primary-700);
  --pui-hero-label-primary-fg: var(--static-primary-400);
  --pui-hero-label-primary-fg-active: var(--static-primary-300);
  --pui-hero-label-primary-fg-hover: var(--static-primary-300);
}

/* LUKA PRZEPISANIA PALETY, domknięta 07.08.2026. Sześć literałów, których
   arkusz katalogu UŻYWAŁ, nie mając ich zdefiniowanych. Wszystkie istnieją
   w kodzie — palette/main.scss, linie 106, 201, 203, 224 (oraz 200 i 205 dla
   dwóch dopisanych wcześniej) — więc to nie rozjazd kodu i nie ma wpisu na
   liście rozbieżności: to luka po naszej stronie, w przepisaniu palety.

   Skutek był NIEMY i widoczny wyłącznie w kontekście ciemnym: role obwiedni
   hoveru i stanu aktywnego opinii oraz formularza (`--pui-testimonial-border-*`,
   `--pui-form-border-*`), początek gradientu suwaka cenowego i tła plakietki
   hero rozwiązywały się na pustą wartość, bo `:root` daje im orange-500,
   a on-dark sięgał po orange-300, którego nie było. Pusta wartość nie krzyczy
   — obwiednia po prostu nie miała czym się namalować.

   Wniosek dla kontroli: rodzina skopiowana po części to piąte trafienie tej
   samej przyczyny. Pomiar nazw --pui-* w komplecie nie łapie tego przypadku,
   bo tu brakuje ogniwa NIŻEJ, w palecie. */
:root {
  --static-orange-300: #FFA06BFF;
  --static-primary-alpha-50: #E7F9F30D;
  --static-primary-alpha-150: #BAEEDC26;
  --static-primary-alpha-200: #9FE6D033;
  --static-primary-alpha-300: #7EDDBD4D;
  --static-purple-250: #B48FEFFF;
}

/* Domknięcie rodzin, 07.08.2026. Pomiar objął WSZYSTKIE nazwy --pui-*
   odczytywane przez strony katalogu i porównał je z arkuszami skali i mode.
   Czwarty raz ta sama przyczyna (rodzina skopiowana po części), więc tym
   razem kontrola idzie po komplecie, nie po jednej nazwie. */
:root {
  --pui-banner-vertical-container-width: 1420px;
  --pui-changelog-bullet-point-bug: var(--static-red-600);
  --pui-changelog-bullet-point-cases-reported: var(--static-blue-600);
  --pui-changelog-bullet-point-improvements: var(--static-orange-600);
  --pui-changelog-bullet-point-new-features: var(--static-primary-600);
  --pui-footer-max-width: 1420px;

  /* DOMKNIĘCIE RODZINY FORMULARZA — 05.09.2026, plan domknięcia atomów poz. 4.
     Trzy braki, wszystkie tego samego rodzaju: reguła miała wartość, a nie miała
     nazwy. (1) Stany błędu i powodzenia czytały pasma wprost (--static-red-500,
     --static-primary-500), więc zmiana pasma ominęłaby formularz albo zmieniła go
     po cichu. (2) Stopień lg stał na trzech wartościach wpisanych wprost (64px,
     28px, 18px) — jedyny stopień rodziny bez ról. (3) Stan wyłączenia czytał gray
     wprost. Wartości przeniesione co do znaku z reguł klas, więc render jest ten
     sam — zmienia się to, że da się je zmienić w jednym miejscu. */
  --pui-form-border-error: var(--static-red-500);
  --pui-form-border-error-active: var(--static-red-600);
  --pui-form-icon-error: var(--static-red-500);
  --pui-form-border-success: var(--static-primary-500);
  --pui-form-border-success-active: var(--static-primary-600);
  --pui-form-icon-success: var(--static-primary-500);
  --pui-form-bg-disabled: var(--static-gray-100);
  --pui-form-border-disabled: var(--static-gray-300);
  --pui-form-lg-height: 64px;
  --pui-form-lg-padding-h: 28px;
  --pui-form-lg-radius: var(--pui-form-base-radius);
  --pui-form-lg-gap: var(--pui-form-base-gap);
  --pui-form-lg-icon-size: var(--pui-form-base-icon-size);
  --pui-form-lg-border-width: var(--pui-form-base-border-width);
  --pui-form-lg-font-size: 18px;
  --pui-form-sm-font-size: 14px;
  --pui-form-base-font-size: var(--pui-text-p-base-font-size);
  --pui-form-gap: var(--static-space-1x);
  --pui-form-helper-font-size: var(--pui-text-p-sm-font-size);
  --pui-form-helper-line-height: var(--pui-text-p-sm-line-height);
  --pui-form-helper-fg: var(--pui-text-body);
  --pui-form-helper-fg-error: var(--pui-form-border-error-active);
  --pui-form-helper-fg-success: var(--pui-form-border-success-active);
  --pui-form-sm-icon-size: var(--static-space-2-5x);
}

:root {
  --static-overlay-light-150: #FFFFFF26;
}

/* ROLE RODZINY CHANGELOG DOSYPANE 19.08.2026 — odczyt tokens/mode/light.scss
   (linie 214-226) i tokens/palette/main.scss przy złożeniu strony changelog.
   OSIEM ról z 32, które arkusz elements/changelog.scss czyta, a pa-tokens.css
   nie miał: cztery barwy TŁA kropki (warianty -light) plus tło samej kropki,
   linia prowadnicy, obwiednia daty i separator wpisu. Piąty raz ta sama
   przyczyna, o której mówi kontrola wyżej: rodzina skopiowana po części
   przechodzi kontrolę pisaną na poziomie rodziny, bo cztery role tej rodziny
   już stały (barwy kropek bez -light).

   MOTYW WYBRANY POMIAREM, nie pierwszy znaleziony: light i lightondark różnią
   się w TRZECH z ośmiu (guides-border, separator oraz — w lightondark — barwa
   cases-reported). Katalog stoi na light, tak jak przy dosypaniu roli obwiedni
   przycisku purpurowego 17.08, bo rama planu i rama changelogu są jasne.
   Dopłata z palety: --static-blue-alpha-250, jedyna z czterech ról alfa 250
   której kopia nie miała. */
/* ROLE PRZEŁĄCZNIKA EDYCJI DOSYPANE 19.08.2026 — odczyt tokens/mode/light.scss
   i tokens/palette/main.scss przy złożeniu strony prices. SZEŚĆ ról rodziny
   --pui-banner-switch-* (tło, obwiednia, dwa gradienty pigułki) plus jedna
   z palety, --static-purple-450, której kopia nie miała. Trzynaście ról tej
   rodziny już stało (odstępy, wyściółki, szerokość), więc znowu rodzina
   skopiowana po części — SZÓSTY raz ta sama przyczyna, drugi dzień z rzędu.
   Motyw nie ma tu znaczenia: light i lightondark podają dla wszystkich sześciu
   te same wartości, pierwszy taki przypadek przy dosypywaniu. */
:root {
  --static-purple-450: #7B49E4FF;
  --pui-banner-switch-bg: var(--static-overlay-light-50);
  --pui-banner-switch-border-start: var(--static-overlay-light-200);
  --pui-banner-switch-primary-bg-start: var(--static-primary-600);
  --pui-banner-switch-primary-bg-end: var(--static-primary-500);
  --pui-banner-switch-purple-bg-start: var(--static-purple-550);
  --pui-banner-switch-purple-bg-end: var(--static-purple-450);
}

:root {
  --static-blue-alpha-250: #8FBCFF40;
  --pui-changelog-bullet-point-bg: var(--static-gray-0);
  --pui-changelog-bullet-point-new-features-light: var(--static-primary-alpha-250);
  --pui-changelog-bullet-point-improvements-light: var(--static-orange-alpha-250);
  --pui-changelog-bullet-point-bug-light: var(--static-red-alpha-250);
  --pui-changelog-bullet-point-cases-reported-light: var(--static-blue-alpha-250);
  --pui-changelog-divider: var(--static-gray-200);
  --pui-changelog-guides-border: var(--static-gray-300);
  --pui-changelog-separator: var(--static-gray-100);
}

/* ODCZYT LITERAŁÓW z ui/pricing/PricingSingle.vue — 07.08.2026, commit 1bcf0cc.
   Komponent czyta z systemu JEDEN token (--pui-text-primary, na aktywnej
   kropce, i to Z FALLBACKIEM #06a06a). Szerokość slajdu w trybie 'auto' nie
   stoi w nim wcale — bierze się z min-width pudełka planu. */
:root {
  --src-single-gap: 32px;
  --src-single-spacing-wide: 32px;
  --src-single-spacing-compact: 16px;
  --src-single-dot-size: 10px;
  --src-single-dot-gap: 8px;
  --src-single-dot-bg: #e8e8ef;
  --src-single-dot-active-fallback: #06a06a; /* fallback var(--pui-text-primary, #06a06a) — nie jest równy roli, którą podpiera */
  --src-single-dot-duration: 0.3s;
  --src-single-shift-duration: 0.35s; /* ruch karuzeli należy do keen-slidera; tu tylko po to, żeby kadr nie skakał */
  --src-single-footer-gap: 8px;
  --src-single-star-size: 20px;
  --src-single-breakpoint: 1023.98px; /* mierzony na OKNIE, nie na kontenerze */
}

/* ODCZYT LITERAŁÓW z ui/UseCasesArrow.vue — 07.08.2026, commit 1bcf0cc.
   ZERO TOKENÓW: wszystkie wartości tego pliku, łącznie z oboma kolorami
   gradientu i kolorem grotu, stoją w nim wprost. Role --src-arrow-host-*
   przenoszą to, co komponent ustawia sam w cudzym układzie. */
:root {
  --src-arrow-width: 376px;
  --src-arrow-height: 109px;
  --src-arrow-host-top: 16px;
  --src-arrow-host-left-offset: 24px;
  --src-arrow-dot: #07C07E;
  --src-arrow-dot-size: 16px;
  --src-arrow-stroke-start: rgba(54, 210, 165, 0.4);
  --src-arrow-stroke-end: #07C07E;
  --src-arrow-head-width: 18px;
  --src-arrow-head-height: 12px;
  --src-arrow-length-guess: 472.5; /* wartość początkowa w kodzie, zastępowana pomiarem */
  --src-arrow-start-y: 200px;
  --src-arrow-span: 400px;
  --src-arrow-min-length: 130;
}

/* =============================================================================
   Rodzina --pui-blog-card-latest-update-* (wymiary) i --pui-blog-latest-update-card-*
   (kolory) — odczyt 07.08.2026, commit 1bcf0cc. Potrzebna galerii
   sections/LatestUpdates.vue.

   Wymiary z scales/desktop.scss. Dwie role tej rodziny SĄ responsywne:
   promień obrazu (3xl na desktopie i laptopie, 2xl na tablecie, 5xl na
   mobile) oraz oba paddingi ciała (3x wszędzie poza mobile, gdzie 2x).
   Kolory z mode/light.scss.

   NAZWA Z BŁĘDEM LITEROWYM JEST W KODZIE I ZOSTAJE PRZEPISANA BEZ POPRAWKI:
   --pui-blog-latest-update-card-gradeint-start. Arkusz komponentu sięga
   dokładnie po tę nazwę, więc poprawiona w katalogu przestałaby opisywać kod.
   Zgłoszona na liście.
   ============================================================================= */
:root {
  --pui-blog-card-latest-update-body-border-width: var(--pui-ui-border-outline-border-width);
  --pui-blog-card-latest-update-body-gap: var(--static-space-3x);
  --pui-blog-card-latest-update-body-padding-h: var(--static-space-3x);
  --pui-blog-card-latest-update-body-padding-v: var(--static-space-3x);
  --pui-blog-card-latest-update-body-radius: var(--pui-ui-radius-5xl);
  --pui-blog-card-latest-update-image-radius: var(--pui-ui-radius-3xl);
  --pui-blog-card-latest-update-main-content-gap: var(--static-space-1-5x);
  --pui-blog-card-latest-update-main-gap: var(--static-space-1-5x);

  /* mode/light.scss. Pierwsze dwie role są ZDEFINIOWANE I NIEUŻYWANE:
     obwiednia gradientowa karty stoi w arkuszu komponentu jako trzy hexy
     wprost. Zgłoszone na liście. */
  --pui-blog-latest-update-card-border-end: var(--static-gray-300);
  --pui-blog-latest-update-card-border-start: var(--static-primary-500);
  --pui-blog-latest-update-card-gradeint-start: var(--static-gray-0);
  --pui-blog-latest-update-card-gradient-end: var(--static-overlay-light-0);
}

/* ODCZYT LITERAŁÓW z sections/LatestUpdates.vue — 07.08.2026, commit 1bcf0cc.
   Dwadzieścia jedna wartość stoi w tym arkuszu wprost. Przy każdym kolorze
   dopisany odpowiednik z palety, bo cztery z pięciu mają dokładny odpowiednik
   i mimo to są wpisane hexem. */
:root {
  --src-latest-slider-margin-v: -36px; /* ujemny margines robi miejsce na wypiętrzenie karty */
  --src-latest-slider-margin-h: 72px;  /* na progu laptopa zmienia się na -24px */
  --src-latest-slider-margin-h-laptop: -24px;
  --src-latest-slider-padding-v: 36px;
  --src-latest-slider-padding-h: 24px;
  --src-latest-slide-spacing: 32px;    /* opcja keen-slidera, nie arkusza */
  --src-latest-slide-width: 376px;     /* min i max, tylko przy oknie ≥ 1480px */
  --src-latest-slide-width-tablet: 300px;
  --src-latest-slide-lift: -16px;
  --src-latest-shadow-rest: rgba(0, 0, 0, 0) 0px 0px 1px 0px, rgba(0, 0, 0, 0) 0px 8px 24px 6px;
  --src-latest-shadow-hover: rgba(0, 0, 0, 0.12) 0px 0px 1px 0px, rgba(0, 0, 0, 0.05) 0px 8px 24px 6px;
  --src-latest-card-border: #D9D9E3;   /* = --static-gray-300 */
  --src-latest-card-mask: linear-gradient(177.85deg, #D9D9E3 3.51%, #07C07E 42.51%, #D9D9E3 100.07%); /* #D9D9E3 = gray-300, #07C07E = primary-500 */
  --src-latest-overlay-height: 220px;
  --src-latest-overlay-opacity: 0.3;
  --src-latest-overlay-gradient-height: 265px;
  --src-latest-dot-size: 10px;
  --src-latest-dot-gap: 16px;
  --src-latest-dot-bg: #E8E8EF;        /* = --static-gray-200 */
  --src-latest-dot-active: #06A06A;    /* = --static-primary-600 */
  --src-latest-pagination-margin-top: 32px;
  --src-latest-nav-icon-fill: #3A3A47; /* = --static-gray-800 = --pui-button-default-faded-fg */
  --src-latest-transition: 0.3s;
  --src-latest-title-weight: 600;
  --src-latest-clamp-lines: 5;
  --src-latest-breakpoint-wide: 1480px;  /* mierzony na OKNIE */
  --src-latest-breakpoint-auto: 1024px;  /* mierzony na OKNIE */
}

/* =============================================================================
   Rodzina --pui-use-case-* — odczyt 07.08.2026, commit 1bcf0cc. Wymiary
   z scales/desktop.scss, kolory z mode/light.scss. Potrzebna galerii
   sections/UseCases.vue i karcie ui/UseCaseCard.vue.

   Cztery role tej rodziny są ZDEFINIOWANE I NIEUŻYWANE, wszystkie cztery
   od obwiedni: -border-hover-start i -border-hover-end w obu wariantach.
   Arkusz karty rysuje tę obwiednię czterema wartościami rgba wprost, a każda
   z nich jest DOKŁADNIE równa jednej z tych ról. Zgłoszone na liście.
   Piąta, --pui-use-case-{primary,purple}-border, też nie ma ani jednego użycia.
   ============================================================================= */
:root {
  --static-primary-alpha-400: #36D2A566;
  --static-purple-alpha-200: #C5A9F333;
  --static-purple-alpha-300: #A780EC4D;
  --static-purple-alpha-400: #8253E566;

  --pui-use-case-body-default-border-width: var(--pui-ui-border-outline-border-width);
  --pui-use-case-body-default-graphic-width: 170px;
  --pui-use-case-body-default-max-width: 470px;
  --pui-use-case-body-default-min-height: 200px;
  --pui-use-case-body-default-min-width: 470px;
  /* 332px na desktopie i laptopie, 0px na tablecie i mobile. Rola opisuje
     dokładnie ten odstęp, który sekcja liczy pomiarem — i nie jest czytana. */
  --pui-use-case-body-default-padding-top: 332px;
  --pui-use-case-body-default-radius: var(--pui-ui-radius-3xl);
  --pui-use-case-body-default-slot-height: 200px;
  --pui-use-case-body-default-vertical-max-height: 999px;
  --pui-use-case-body-default-vertical-min-width: 270px;
  --pui-use-case-container-gap: var(--static-space-4x);
  --pui-use-case-main-gap: var(--static-space-2x);
  --pui-use-case-main-padding-left: var(--static-space-4x);
  --pui-use-case-main-padding-right: var(--static-space-3x);
  --pui-use-case-main-padding-v: var(--static-space-4x);
  --pui-use-case-main-title-gap: var(--static-space-1-25x);

  --pui-use-case-primary-bg-end: var(--static-primary-alpha-200);
  --pui-use-case-primary-bg-hover: var(--static-primary-50);
  --pui-use-case-primary-bg-start: var(--static-primary-alpha-300);
  --pui-use-case-primary-border: #FFFFFF00;
  --pui-use-case-primary-border-hover-end: var(--static-primary-alpha-400);
  --pui-use-case-primary-border-hover-start: var(--static-primary-alpha-200);
  --pui-use-case-purple-bg-end: var(--static-purple-alpha-200);
  --pui-use-case-purple-bg-hover: var(--static-purple-50);
  --pui-use-case-purple-bg-start: var(--static-purple-alpha-300);
  --pui-use-case-purple-border: #FFFFFF00;
  --pui-use-case-purple-border-hover-end: var(--static-purple-alpha-400);
  --pui-use-case-purple-border-hover-start: var(--static-purple-alpha-200);
}

/* ODCZYT LITERAŁÓW z ui/UseCaseCard.vue i sections/UseCases.vue — 07.08.2026.
   Przy każdym kolorze dopisany odpowiednik z palety, bo cztery wartości rgba
   obwiedni są równe czterem istniejącym rolom co do bajtu. */
:root {
  --src-usecase-radius: 24px; /* token tej rodziny mówi 16px (radius-3xl) — arkusz go nie czyta */
  --src-usecase-transition: 0.5s;
  --src-usecase-title-weight: 600;
  --src-usecase-arrow-size: 24px;
  --src-usecase-arrow-gap: 8px;
  --src-usecase-arrow-shift: -10px;
  --src-usecase-illustration-width: 215px;  /* slot ma w rolach 170px szerokości minimalnej */
  --src-usecase-illustration-height: 224px; /* wyższa niż slot (200px) — obraz wychodzi za kadr slotu */
  --src-usecase-illustration-hover-shift: -12px;
  /* = linear-gradient(180deg, primary-alpha-200 0%, primary-alpha-400 50%, primary-alpha-200 100%) */
  --src-usecase-ring-primary: linear-gradient(180deg, rgba(159, 230, 208, 0.2) 0%, rgba(54, 210, 165, 0.4) 50%, rgba(159, 230, 208, 0.2) 100%);
  /* = linear-gradient(180deg, purple-alpha-200 0%, purple-alpha-400 50%, purple-alpha-200 100%) */
  --src-usecase-ring-purple: linear-gradient(180deg, rgba(197, 169, 243, 0.2) 0%, rgba(130, 83, 229, 0.4) 50%, rgba(197, 169, 243, 0.2) 100%);
  --src-usecase-sticky-top: 100px;
  --src-usecase-tablet-illustration: 170px;
  --src-usecase-tablet-illustration-bottom: -16px;
  --src-usecase-tablet-content-padding-bottom: 16px;
  --src-usecase-tablet-grid-min: 312px;
}

/* ODCZYT LITERAŁÓW z sections/Feature.vue — 07.08.2026, commit 1bcf0cc. */
:root {
  --src-feature-actions-gap: 16px;
  --src-feature-mobile-button-width: 100%; /* dokłada HOST przycisku, nie przycisk */
  --src-feature-list-icon-size: 24px;      /* ikona pozycji listy przychodzi z wywołania */
  /* Martwy kod zostawiony w arkuszu nad działającą regułą obwiedni: trzy hexy
     wprost i inny kąt niż reguła, która działa (214.25deg wobec −234.25deg). */
  --src-feature-dead-border: linear-gradient(214.25deg, #DFDFDF 9.2%, #07C07E 37.69%, #DFDFDF 79.75%);
}

/* =============================================================================
   SKALE RESPONSYWNE — odczyt czterech plików scales/*.scss, 07.08.2026,
   commit 1bcf0cc. Cztery pliki niosą po 697 ról każdy pod TYMI SAMYMI nazwami.
   Katalog nie może ich trzymać w :root obok siebie, bo nazwa jest jedna.
   Dlatego każdy wymiar dostaje własny selektor atrybutu, a sekcja skal
   osadza cztery razy tę samą próbkę pod czterema wymiarami. Wartości
   przepisane co do jednej, bez przeliczania.

   Zakres: rodziny, które SĄ skalami (typografia, promień, kontener).
   Pozostałe role responsywne to skale elementów i należą do stron atomów.
   Odstępy nie mają wymiaru responsywnego wcale — spacing/eight.scss jest
   jednym plikiem poza katalogiem scales.
   ============================================================================= */

[data-scale="mobile"] {
  --pui-container-content-gap-h: var(--static-space-4x);
  --pui-container-content-gap-v: var(--static-space-4x);
  --pui-container-gap: var(--static-space-6x);
  --pui-container-grid-gap: var(--static-space-2x);
  --pui-container-padding-h: var(--static-space-3x);
  --pui-container-width-max: 1420px;
  --pui-text-h1-font-size: 40px;
  --pui-text-h1-letter-spacing: -2px;
  --pui-text-h1-line-height: 48px; --pui-text-h1-line-height-tight: 42px;
  --pui-text-h2-font-size: 32px;
  --pui-text-h2-letter-spacing: -0.5px;
  --pui-text-h2-line-height: 40px; --pui-text-h2-line-height-tight: 35px;
  --pui-text-h3-font-size: 28px;
  --pui-text-h3-letter-spacing: 0px;
  --pui-text-h3-line-height: 36px; --pui-text-h3-line-height-tight: 31px;
  --pui-text-h4-font-size: 24px;
  --pui-text-h4-letter-spacing: 0px;
  --pui-text-h4-line-height: 32px; --pui-text-h4-line-height-tight: 28px;
  --pui-text-h5-font-size: 20px;
  --pui-text-h5-letter-spacing: 0px;
  --pui-text-h5-line-height: 28px; --pui-text-h5-line-height-tight: 24px;
  --pui-text-h6-font-size: 18px;
  --pui-text-h6-letter-spacing: 0px;
  --pui-text-h6-line-height: 24px; --pui-text-h6-line-height-tight: 21px;
  --pui-text-h7-font-size: 16px;
  --pui-text-h7-letter-spacing: 0px;
  --pui-text-h7-line-height: 22px; --pui-text-h7-line-height-tight: 19px;
  --pui-text-h8-font-size: 16px;
  --pui-text-h8-letter-spacing: 0px;
  --pui-text-h8-line-height: 20px; --pui-text-h8-line-height-tight: 17px;
  --pui-text-p-base-font-size: 14px;
  --pui-text-p-base-letter-spacing: 0px;
  --pui-text-p-base-line-height: 23px; --pui-text-p-base-line-height-tight: 20px;
  --pui-text-p-lg-font-size: 15px;
  --pui-text-p-lg-letter-spacing: 0px;
  --pui-text-p-lg-line-height: 28px; --pui-text-p-lg-line-height-tight: 24px;
  --pui-text-p-sm-font-size: 13px;
  --pui-text-p-sm-letter-spacing: 0px;
  --pui-text-p-sm-line-height: 22px; --pui-text-p-sm-line-height-tight: 19px;
  --pui-text-p-xlg-font-size: 17px;
  --pui-text-p-xlg-letter-spacing: 0px;
  --pui-text-p-xlg-line-height: 27px; --pui-text-p-xlg-line-height-tight: 23px;
  --pui-text-p-xs-font-size: 12px;
  --pui-text-p-xs-letter-spacing: 0px;
  --pui-text-p-xs-line-height: 20px; --pui-text-p-xs-line-height-tight: 17px;
  --pui-text-p-xxlg-font-size: 18px;
  --pui-text-p-xxlg-letter-spacing: 0px;
  --pui-text-p-xxlg-line-height: 30px; --pui-text-p-xxlg-line-height-tight: 26px;
  --pui-text-p-xxs-font-size: 11px;
  --pui-text-p-xxs-letter-spacing: 0px;
  --pui-text-p-xxs-line-height: 18px; --pui-text-p-xxs-line-height-tight: 16px;
  --pui-ui-radius-2xl: 10px;
  --pui-ui-radius-3xl: 14px;
  --pui-ui-radius-4xl: 22px;
  --pui-ui-radius-5xl: 16px;
  --pui-ui-radius-6xl: 24px;
  --pui-ui-radius-7xl: 32px;
  --pui-ui-radius-8xl: 48px;
  --pui-ui-radius-lg: 8px;
  --pui-ui-radius-md: 6px;
  --pui-ui-radius-none: 0px;
  --pui-ui-radius-rounded: 999px;
  --pui-ui-radius-sm: 4px;
  --pui-ui-radius-xl: 10px;
  --pui-ui-radius-xs: 3px;
}

[data-scale="tablet"] {
  --pui-container-content-gap-h: var(--static-space-4x);
  --pui-container-content-gap-v: var(--static-space-4x);
  --pui-container-gap: var(--static-space-7x);
  --pui-container-grid-gap: var(--static-space-3x);
  --pui-container-padding-h: var(--static-space-4x);
  --pui-container-width-max: 1420px;
  --pui-text-h1-font-size: 52px;
  --pui-text-h1-letter-spacing: -2px;
  --pui-text-h1-line-height: 64px; --pui-text-h1-line-height-tight: 56px;
  --pui-text-h2-font-size: 40px;
  --pui-text-h2-letter-spacing: -0.5px;
  --pui-text-h2-line-height: 52px; --pui-text-h2-line-height-tight: 45px;
  --pui-text-h3-font-size: 36px;
  --pui-text-h3-letter-spacing: 0px;
  --pui-text-h3-line-height: 46px; --pui-text-h3-line-height-tight: 40px;
  --pui-text-h4-font-size: 28px;
  --pui-text-h4-letter-spacing: 0px;
  --pui-text-h4-line-height: 36px; --pui-text-h4-line-height-tight: 31px;
  --pui-text-h5-font-size: 24px;
  --pui-text-h5-letter-spacing: 0px;
  --pui-text-h5-line-height: 32px; --pui-text-h5-line-height-tight: 28px;
  --pui-text-h6-font-size: 20px;
  --pui-text-h6-letter-spacing: 0px;
  --pui-text-h6-line-height: 28px; --pui-text-h6-line-height-tight: 24px;
  --pui-text-h7-font-size: 18px;
  --pui-text-h7-letter-spacing: 0px;
  --pui-text-h7-line-height: 24px; --pui-text-h7-line-height-tight: 21px;
  --pui-text-h8-font-size: 16px;
  --pui-text-h8-letter-spacing: 0px;
  --pui-text-h8-line-height: 20px; --pui-text-h8-line-height-tight: 17px;
  --pui-text-p-base-font-size: 15px;
  --pui-text-p-base-letter-spacing: 0px;
  --pui-text-p-base-line-height: 24px; --pui-text-p-base-line-height-tight: 21px;
  --pui-text-p-lg-font-size: 15px;
  --pui-text-p-lg-letter-spacing: 0px;
  --pui-text-p-lg-line-height: 28px; --pui-text-p-lg-line-height-tight: 24px;
  --pui-text-p-sm-font-size: 14px;
  --pui-text-p-sm-letter-spacing: 0px;
  --pui-text-p-sm-line-height: 24px; --pui-text-p-sm-line-height-tight: 21px;
  --pui-text-p-xlg-font-size: 18px;
  --pui-text-p-xlg-letter-spacing: 0px;
  --pui-text-p-xlg-line-height: 28px; --pui-text-p-xlg-line-height-tight: 24px;
  --pui-text-p-xs-font-size: 13px;
  --pui-text-p-xs-letter-spacing: 0px;
  --pui-text-p-xs-line-height: 21px; --pui-text-p-xs-line-height-tight: 18px;
  --pui-text-p-xxlg-font-size: 20px;
  --pui-text-p-xxlg-letter-spacing: 0px;
  --pui-text-p-xxlg-line-height: 34px; --pui-text-p-xxlg-line-height-tight: 30px;
  --pui-text-p-xxs-font-size: 11px;
  --pui-text-p-xxs-letter-spacing: 0px;
  --pui-text-p-xxs-line-height: 18px; --pui-text-p-xxs-line-height-tight: 16px;
  --pui-ui-radius-2xl: 10px;
  --pui-ui-radius-3xl: 14px;
  --pui-ui-radius-4xl: 22px;
  --pui-ui-radius-5xl: 16px;
  --pui-ui-radius-6xl: 24px;
  --pui-ui-radius-7xl: 32px;
  --pui-ui-radius-8xl: 48px;
  --pui-ui-radius-lg: 8px;
  --pui-ui-radius-md: 6px;
  --pui-ui-radius-none: 0px;
  --pui-ui-radius-rounded: 999px;
  --pui-ui-radius-sm: 4px;
  --pui-ui-radius-xl: 10px;
  --pui-ui-radius-xs: 3px;
}

[data-scale="laptop"] {
  --pui-container-content-gap-h: var(--static-space-6x);
  --pui-container-content-gap-v: var(--static-space-6x);
  --pui-container-gap: var(--static-space-8x);
  --pui-container-grid-gap: var(--static-space-4x);
  --pui-container-padding-h: var(--static-space-4x);
  --pui-container-width-max: 1280px;
  --pui-text-h1-font-size: 56px;
  --pui-text-h1-letter-spacing: -2px;
  --pui-text-h1-line-height: 68px; --pui-text-h1-line-height-tight: 59px;
  --pui-text-h2-font-size: 44px;
  --pui-text-h2-letter-spacing: -0.5px;
  --pui-text-h2-line-height: 58px; --pui-text-h2-line-height-tight: 50px;
  --pui-text-h3-font-size: 38px;
  --pui-text-h3-letter-spacing: 0px;
  --pui-text-h3-line-height: 52px; --pui-text-h3-line-height-tight: 45px;
  --pui-text-h4-font-size: 30px;
  --pui-text-h4-letter-spacing: 0px;
  --pui-text-h4-line-height: 40px; --pui-text-h4-line-height-tight: 35px;
  --pui-text-h5-font-size: 26px;
  --pui-text-h5-letter-spacing: 0px;
  --pui-text-h5-line-height: 34px; --pui-text-h5-line-height-tight: 30px;
  --pui-text-h6-font-size: 22px;
  --pui-text-h6-letter-spacing: 0px;
  --pui-text-h6-line-height: 28px; --pui-text-h6-line-height-tight: 24px;
  --pui-text-h7-font-size: 18px;
  --pui-text-h7-letter-spacing: 0px;
  --pui-text-h7-line-height: 24px; --pui-text-h7-line-height-tight: 21px;
  --pui-text-h8-font-size: 17px;
  --pui-text-h8-letter-spacing: 0px;
  --pui-text-h8-line-height: 22px; --pui-text-h8-line-height-tight: 19px;
  --pui-text-p-base-font-size: 15px;
  --pui-text-p-base-letter-spacing: 0px;
  --pui-text-p-base-line-height: 26px; --pui-text-p-base-line-height-tight: 23px;
  --pui-text-p-lg-font-size: 16px;
  --pui-text-p-lg-letter-spacing: 0px;
  --pui-text-p-lg-line-height: 29px; --pui-text-p-lg-line-height-tight: 25px;
  --pui-text-p-sm-font-size: 14px;
  --pui-text-p-sm-letter-spacing: 0px;
  --pui-text-p-sm-line-height: 24px; --pui-text-p-sm-line-height-tight: 21px;
  --pui-text-p-xlg-font-size: 18px;
  --pui-text-p-xlg-letter-spacing: 0px;
  --pui-text-p-xlg-line-height: 30px; --pui-text-p-xlg-line-height-tight: 26px;
  --pui-text-p-xs-font-size: 13px;
  --pui-text-p-xs-letter-spacing: 0px;
  --pui-text-p-xs-line-height: 21px; --pui-text-p-xs-line-height-tight: 18px;
  --pui-text-p-xxlg-font-size: 22px;
  --pui-text-p-xxlg-letter-spacing: 0px;
  --pui-text-p-xxlg-line-height: 36px; --pui-text-p-xxlg-line-height-tight: 31px;
  --pui-text-p-xxs-font-size: 11px;
  --pui-text-p-xxs-letter-spacing: 0px;
  --pui-text-p-xxs-line-height: 18px; --pui-text-p-xxs-line-height-tight: 16px;
  --pui-ui-radius-2xl: 10px;
  --pui-ui-radius-3xl: 14px;
  --pui-ui-radius-4xl: 22px;
  --pui-ui-radius-5xl: 20px;
  --pui-ui-radius-6xl: 28px;
  --pui-ui-radius-7xl: 36px;
  --pui-ui-radius-8xl: 48px;
  --pui-ui-radius-lg: 8px;
  --pui-ui-radius-md: 6px;
  --pui-ui-radius-none: 0px;
  --pui-ui-radius-rounded: 999px;
  --pui-ui-radius-sm: 4px;
  --pui-ui-radius-xl: 10px;
  --pui-ui-radius-xs: 3px;
}

[data-scale="desktop"] {
  --pui-container-content-gap-h: var(--static-space-6x);
  --pui-container-content-gap-v: var(--static-space-8x);
  --pui-container-gap: var(--static-space-9x);
  --pui-container-grid-gap: var(--static-space-4x);
  --pui-container-padding-h: var(--static-space-6x);
  --pui-container-width-max: 1480px;
  --pui-text-h1-font-size: 60px;
  --pui-text-h1-letter-spacing: -2px;
  --pui-text-h1-line-height: 72px; --pui-text-h1-line-height-tight: 63px;
  --pui-text-h2-font-size: 48px;
  --pui-text-h2-letter-spacing: -0.5px;
  --pui-text-h2-line-height: 62px; --pui-text-h2-line-height-tight: 54px;
  --pui-text-h3-font-size: 42px;
  --pui-text-h3-letter-spacing: 0px;
  --pui-text-h3-line-height: 56px; --pui-text-h3-line-height-tight: 49px;
  --pui-text-h4-font-size: 32px;
  --pui-text-h4-letter-spacing: 0px;
  --pui-text-h4-line-height: 42px; --pui-text-h4-line-height-tight: 37px;
  --pui-text-h5-font-size: 28px;
  --pui-text-h5-letter-spacing: 0px;
  --pui-text-h5-line-height: 36px; --pui-text-h5-line-height-tight: 31px;
  --pui-text-h6-font-size: 24px;
  --pui-text-h6-letter-spacing: 0px;
  --pui-text-h6-line-height: 30px; --pui-text-h6-line-height-tight: 26px;
  --pui-text-h7-font-size: 20px;
  --pui-text-h7-letter-spacing: 0px;
  --pui-text-h7-line-height: 26px; --pui-text-h7-line-height-tight: 23px;
  --pui-text-h8-font-size: 18px;
  --pui-text-h8-letter-spacing: 0px;
  --pui-text-h8-line-height: 23px; --pui-text-h8-line-height-tight: 20px;
  --pui-text-p-base-font-size: 15px;
  --pui-text-p-base-letter-spacing: 0px;
  --pui-text-p-base-line-height: 26px; --pui-text-p-base-line-height-tight: 23px;
  --pui-text-p-lg-font-size: 17px;
  --pui-text-p-lg-letter-spacing: 0px;
  --pui-text-p-lg-line-height: 30px; --pui-text-p-lg-line-height-tight: 26px;
  --pui-text-p-sm-font-size: 14px;
  --pui-text-p-sm-letter-spacing: 0px;
  --pui-text-p-sm-line-height: 24px; --pui-text-p-sm-line-height-tight: 21px;
  --pui-text-p-xlg-font-size: 20px;
  --pui-text-p-xlg-letter-spacing: 0px;
  --pui-text-p-xlg-line-height: 32px; --pui-text-p-xlg-line-height-tight: 28px;
  --pui-text-p-xs-font-size: 13px;
  --pui-text-p-xs-letter-spacing: 0px;
  --pui-text-p-xs-line-height: 21px; --pui-text-p-xs-line-height-tight: 18px;
  --pui-text-p-xxlg-font-size: 24px;
  --pui-text-p-xxlg-letter-spacing: 0px;
  --pui-text-p-xxlg-line-height: 38px; --pui-text-p-xxlg-line-height-tight: 33px;
  --pui-text-p-xxs-font-size: 11px;
  --pui-text-p-xxs-letter-spacing: 0px;
  --pui-text-p-xxs-line-height: 18px; --pui-text-p-xxs-line-height-tight: 16px;
  --pui-ui-radius-2xl: 12px;
  --pui-ui-radius-3xl: 16px;
  --pui-ui-radius-4xl: 20px;
  --pui-ui-radius-5xl: 24px;
  --pui-ui-radius-6xl: 32px;
  --pui-ui-radius-7xl: 40px;
  --pui-ui-radius-8xl: 48px;
  --pui-ui-radius-lg: 8px;
  --pui-ui-radius-md: 6px;
  --pui-ui-radius-none: 0px;
  --pui-ui-radius-rounded: 999px;
  --pui-ui-radius-sm: 4px;
  --pui-ui-radius-xl: 10px;
  --pui-ui-radius-xs: 3px;
}

/* =============================================================================
   Odczyt sections/Collaborate.vue + elements/animations.scss, 07.08.2026,
   commit 1bcf0cc. Wszystkie wartości poniżej stoją w kodzie WPROST albo jako
   zmienne SCSS ($ap-primary, $ap-primary-050) — dlatego przedrostek --src-.
   ============================================================================= */
:root {
  --src-collaborate-max-width: 1268px;
  --src-pulse-dot: 10px;
  --src-pulse-dot-sm: 8px;
  --src-pulse-dot-xs: 5px;
}

/* =============================================================================
   STAN ANIMACJI — ODCZYT elements/animations.scss + plugins/anim.client.ts
   z 07.08.2026, commit 1bcf0cc.

   Pierwsze reguły są przepisane z arkusza kodu co do znaku: element
   z data-anim jest w spoczynku NIEWIDOCZNY, a modyfikatory dokładają
   przesunięcie 48 px. Dlatego 52 elementy strony głównej startują niewidoczne
   i dlatego złożenie bez podstawienia atrybutów pokazywało pustkę.

   OSTATNIA REGUŁA JEST PODSTAWIENIEM i ma własny powód, opisany w RZ-38.
   W kodzie NIE MA reguły CSS przywracającej widoczność: atrybut ustawiany
   przez wtyczkę jest tam selektorem tylko dla .animation-pulse i dla
   rysowania ścieżek w Collaborate. Stan końcowy (przezroczystość 1,
   przesunięcie 0) powstaje jako STYL WPISANY W ELEMENT przez anime.js.
   Katalog nie uruchamia wtyczki, więc podstawia dokładnie ten stan i tylko
   tam, gdzie wtyczka postawiłaby swój atrybut. Zgłoszone, nie ukryte.
   ============================================================================= */
[data-anim] {
  opacity: 0;
  transition: var(--src-anim-transition);
}
[data-anim-element],
[data-anim-graphic],
[data-anim-feature] {
  transform: translateY(var(--src-anim-rest-shift));
}
[data-anim-side] {
  transform: translateX(var(--src-anim-rest-shift));
}
/* DROGA MIĘDZY STANAMI ROZMYCIA — DOPISANA 21.08.2026 ze zgłoszenia portu.
   Odczyt `elements/animations.scss` 213-231 („Illustration Blur Animation"):
   źródło ma PIĘĆ deklaracji, transpozycja wzięła DWIE. Stał więc stan początkowy
   i końcowy bez drogi między nimi — rozmycie przeskakiwało z 0 na 15 px w jednej
   klatce — a brak `z-index: -1` kładł warstwę rozmycia NAD grafiką i prał z niej
   kolor. Trzy dopisane deklaracje: przejście na `foreignObject`, przejście na
   `foreignObject div` oraz `position: relative` i `z-index: -1` na warstwie. */
foreignObject {
  transition: var(--src-anim-blur-transition);
}
foreignObject div {
  transition: var(--src-anim-blur-transition);
  backdrop-filter: blur(var(--src-anim-blur-rest)) !important;
  position: relative !important;
  z-index: -1 !important;
}
[data-anim-end] foreignObject div {
  backdrop-filter: blur(var(--src-anim-blur-end)) !important;
}
/* PODSTAWIENIE stanu końcowego wtyczki — patrz komentarz wyżej i RZ-38. */
[data-anim][data-anim-in] {
  opacity: 1;
  transform: none;
}

/* Rodzina --src-tooltip-* — ODCZYT LITERAŁÓW dymka popoverowego, 10.08.2026, PA-41.
   Rodzina ról --pui-tooltip-* (5 ról) jest w kodzie; te wartości NIE są w niej
   i stoją w arkuszach wprost, w TRZECH plikach naraz: ui/PlanComparisonTable.vue,
   ui/pricing/PricingBox.vue oraz ui/pricing/PricingMulti.vue. */
:root {
  --src-tooltip-offset-y: 12px;            /* top: calc(anchor(bottom) + 12px) */
  --src-tooltip-offset-x: -35px;           /* left: calc(anchor(center) - 35px) */
  --src-tooltip-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.12), 0px 8px 24px 0px rgba(0, 0, 0, 0.02), 0px 8px 32px 0px rgba(0, 0, 0, 0.08);
  --src-tooltip-shift: -4px;               /* transform: translateY(-4px) w stanie zamkniętym */
  --src-tooltip-duration: 0.15s;
  --src-tooltip-arrow-top: -8px;
  --src-tooltip-arrow-left: 27px;
  --src-tooltip-arrow-width: 16px;
  --src-tooltip-arrow-height: 8px;
  --src-tooltip-arrow-shadow: drop-shadow(0px -2px 2px rgba(0, 0, 0, 0.06));
}


/* =============================================================================
   UZUPEŁNIENIE 11.08.2026 — tokeny używane przez pa-klasy.css, których nie było
   w tej kopii. Odczyt z repo website-2, app/assets/css/tokens/mode/light.scss.
   Zapisy przepisane bez zmian: to uzupełnienie kopii, nie poprawka kodu.
   Reszta braków (243 nazwy) NIE MA definicji w żadnym pliku tokens/ repozytorium
   — to dług repozytorium, opisany na liście rozjazdów, i tu go nie wymyślamy.
   ============================================================================= */
:root {
  --pui-button-secondary-solid-bg-hover: var(--static-orange-600);
  --pui-button-secondary-solid-bg-active: var(--static-orange-650);
  --pui-button-secondary-solid-border-active: var(--static-orange-650);
  --pui-button-secondary-faded-bg-active: var(--static-orange-200);
  --pui-button-secondary-faded-border-active: var(--static-orange-200);
  --pui-button-secondary-outline-bg: var(--static-overlay-light-0);
  --pui-button-secondary-outline-fg: var(--static-orange-650);
  --pui-button-secondary-outline-border: var(--static-orange-600);
  --pui-button-secondary-outline-bg-hover: var(--static-orange-50);
  --pui-button-secondary-outline-border-hover: var(--static-orange-600);
  --pui-button-secondary-outline-bg-active: var(--static-orange-100);
  --pui-button-secondary-outline-border-active: var(--static-orange-600);
  --pui-button-danger-solid-bg: var(--static-red-600);
  --pui-button-danger-solid-fg: var(--static-gray-0);
  --pui-button-danger-solid-bg-hover: var(--static-red-650);
  --pui-button-danger-solid-bg-active: var(--static-red-700);
  --pui-button-danger-solid-border-active: var(--static-red-700);
  --pui-button-danger-faded-bg: var(--static-red-50);
  --pui-button-danger-faded-fg: var(--static-red-650);
  --pui-button-danger-faded-bg-hover: var(--static-red-100);
  --pui-button-danger-faded-bg-active: var(--static-red-200);
  --pui-button-danger-faded-border-active: var(--static-red-200);
  --pui-button-danger-outline-bg: var(--static-overlay-light-0);
  --pui-button-danger-outline-fg: var(--static-red-650);
  --pui-button-danger-outline-border: var(--static-red-600);
  --pui-button-danger-outline-bg-hover: var(--static-red-50);
  --pui-button-danger-outline-border-hover: var(--static-red-600);
  --pui-button-danger-outline-bg-active: var(--static-red-100);
  --pui-button-danger-outline-border-active: var(--static-red-600);

  /* ROLE DOPISANE 04.09.2026 NA POLECENIE ZAMAWIAJĄCEGO („zrób to co możesz, resztę wytnij”):
     success = komplet danger na paśmie primary (alias z badge.scss), warning = komplet danger
     na paśmie orange (alias z badge.scss; orange nie ma stopnia 800 -> 850), info = SAM solid
     na paśmie blue (paleta blue ma tylko 400-700, więc faded/outline nie mają skąd wziąć tła;
     800 -> 700). Ghost dla siedmiu kolorów = alias ról faded: spoczynek bez tła, hover na
     faded-bg, active na faded-bg-hover. W PRODUKCIE TYCH RÓL NIE MA — to specyfikacja dla
     deweloperów, patrz dziennik zmian. saving i discord faded/outline/ghost WYCIĘTE z arkusza. */
  --pui-button-success-solid-bg: var(--static-primary-600);
  --pui-button-success-solid-fg: var(--static-gray-0);
  --pui-button-success-solid-bg-hover: var(--static-primary-650);
  --pui-button-success-solid-bg-active: var(--static-primary-700);
  --pui-button-success-solid-border-active: var(--static-primary-700);
  --pui-button-success-faded-bg: var(--static-primary-50);
  --pui-button-success-faded-fg: var(--static-primary-650);
  --pui-button-success-faded-bg-hover: var(--static-primary-100);
  --pui-button-success-faded-bg-active: var(--static-primary-200);
  --pui-button-success-faded-border-active: var(--static-primary-200);
  --pui-button-success-outline-bg: var(--static-overlay-light-0);
  --pui-button-success-outline-fg: var(--static-primary-650);
  --pui-button-success-outline-border: var(--static-primary-600);
  --pui-button-success-outline-bg-hover: var(--static-primary-50);
  --pui-button-success-outline-border-hover: var(--static-primary-600);
  --pui-button-success-outline-bg-active: var(--static-primary-100);
  --pui-button-success-outline-border-active: var(--static-primary-600);
  --pui-button-warning-solid-bg: var(--static-orange-600);
  --pui-button-warning-solid-fg: var(--static-gray-0);
  --pui-button-warning-solid-bg-hover: var(--static-orange-650);
  --pui-button-warning-solid-bg-active: var(--static-orange-700);
  --pui-button-warning-solid-border-active: var(--static-orange-700);
  --pui-button-warning-faded-bg: var(--static-orange-50);
  --pui-button-warning-faded-fg: var(--static-orange-650);
  --pui-button-warning-faded-bg-hover: var(--static-orange-100);
  --pui-button-warning-faded-bg-active: var(--static-orange-200);
  --pui-button-warning-faded-border-active: var(--static-orange-200);
  --pui-button-warning-outline-bg: var(--static-overlay-light-0);
  --pui-button-warning-outline-fg: var(--static-orange-650);
  --pui-button-warning-outline-border: var(--static-orange-600);
  --pui-button-warning-outline-bg-hover: var(--static-orange-50);
  --pui-button-warning-outline-border-hover: var(--static-orange-600);
  --pui-button-warning-outline-bg-active: var(--static-orange-100);
  --pui-button-warning-outline-border-active: var(--static-orange-600);
  --pui-button-info-solid-bg: var(--static-blue-600);
  --pui-button-info-solid-fg: var(--static-gray-0);
  --pui-button-info-solid-bg-hover: var(--static-blue-650);
  --pui-button-info-solid-bg-active: var(--static-blue-700);
  --pui-button-info-solid-border-active: var(--static-blue-700);
  --pui-button-default-solid-border-active: var(--static-gray-950);
  --pui-button-default-faded-border-active: var(--static-gray-200);
  --pui-button-default-outline-border-active: var(--static-gray-600);
  --pui-button-discord-solid-border-active: var(--static-discord-700);
  --pui-button-purple-solid-bg-active: var(--static-purple-650);
  --pui-button-purple-solid-border-active: var(--static-purple-650);
  --pui-button-purple-faded-bg: var(--static-purple-50);
  --pui-button-purple-faded-fg: var(--static-purple-650);
  --pui-button-purple-faded-bg-hover: var(--static-purple-100);
  --pui-button-purple-faded-bg-active: var(--static-purple-200);
  --pui-button-purple-faded-border-active: var(--static-purple-200);
  --pui-button-purple-outline-bg: var(--static-overlay-light-0);
  --pui-button-purple-outline-fg: var(--static-purple-650);
  --pui-button-purple-outline-border: var(--static-purple-600);
  --pui-button-purple-outline-bg-hover: var(--static-purple-50);
  --pui-button-purple-outline-border-hover: var(--static-purple-600);
  --pui-button-purple-outline-bg-active: var(--static-purple-100);
  --pui-button-purple-outline-border-active: var(--static-purple-600);

  /* --- palette/main.scss · prymitywy alfa pod role stopki (odczyt 12.08.2026) -
     Dopisane przy przepinaniu stopki na klasy: role --pui-footer-community-*
     wskazują na te dwanaście nazw, a arkusz katalogu ich nie niósł, więc
     WSZYSTKIE przyciski społeczności rozwiązywały się na nic. */
  --static-primary-alpha-250: #9FE6D040;
  --static-primary-alpha-350: #55D8B059;
  --static-orange-alpha-150: #FFC19E26;
  --static-orange-alpha-250: #FFAA7A40;
  --static-orange-alpha-300: #FFA06B4D;
  --static-orange-alpha-350: #FF905259;
  --static-orange-alpha-400: #FF803866;
  --static-discord-alpha-150: #AFB5F926;
  --static-discord-alpha-200: #9CA3F733;
  --static-discord-alpha-250: #929BF740;
  --static-discord-alpha-300: #8992F64D;
  --static-discord-alpha-350: #7F89F559;

  /* --- scales/desktop.scss · rodzina --pui-footer-* (34 role) --------------
     Przepisane co do nazwy i wartości. Skala DESKTOP; mobile, tablet i laptop
     różnią się w siedmiu rolach (m.in. --pui-footer-gap: 4x/8x/10x/10x
     i --pui-footer-padding-v: 6x/8x/10x/10x). PROGI DOPISANE 12.08.2026 (P0.6):
     stoją w blokach @media na dole tego pliku. */
  --pui-footer-bottom-gap: var(--static-space-3x);
  --pui-footer-bottom-height: 50px;
  --pui-footer-bottom-min-width: 550px;
  --pui-footer-bottom-padding-h: var(--static-space-4x);
  --pui-footer-bottom-padding-v: var(--static-space-4x);
  --pui-footer-gap: var(--static-space-10x);
  --pui-footer-icons-other-radius: var(--pui-ui-radius-rounded);
  --pui-footer-left-column-community-gap: var(--static-space-1x);
  --pui-footer-left-column-community-icon-size: 48px;
  --pui-footer-left-column-community-padding-h: var(--static-space-2x);
  --pui-footer-left-column-community-padding-v: var(--static-space-2x);
  --pui-footer-left-column-community-radius: var(--static-space-1-5x);
  --pui-footer-left-column-gap: var(--static-space-4x);
  --pui-footer-left-column-gap-h: var(--static-space-3x);
  --pui-footer-left-column-gap-v: var(--static-space-3x);
  --pui-footer-left-column-guides-border-width: var(--pui-ui-border-outline-border-width);
  --pui-footer-left-column-guides-gap: var(--static-space-2x);
  --pui-footer-left-column-guides-link-gap: var(--static-space-0-75x);
  --pui-footer-left-column-guides-link-icon-container-size: var(--static-space-3x);
  --pui-footer-left-column-guides-link-icon-size: var(--static-space-1x);
  --pui-footer-left-column-guides-padding-h: var(--static-space-3x);
  --pui-footer-left-column-guides-padding-v: var(--static-space-3x);
  --pui-footer-left-column-guides-radius: var(--static-space-1-5x);
  --pui-footer-left-column-max-width: 500px;
  --pui-footer-left-column-min-width: 400px;
  --pui-footer-max-width: 1420px;
  --pui-footer-padding-h: var(--static-space-4x);
  --pui-footer-padding-v: var(--static-space-10x);
  --pui-footer-right-column-column-min-width: 100px;
  --pui-footer-right-column-gap-h: var(--static-space-5x);
  --pui-footer-right-column-gap-v: var(--static-space-4x);
  --pui-footer-right-column-links-gap: var(--static-space-1x);
  --pui-footer-right-column-min-width: 400px;
  --pui-footer-right-column-section-gap: var(--static-space-3x);

  /* --- mode/light.scss · rodzina --pui-footer-* (23 role) ------------------ */
  --pui-footer-community-button-text: var(--pui-text-body);
  --pui-footer-community-discord-bg-active-end: var(--static-discord-alpha-250);
  --pui-footer-community-discord-bg-active-start: var(--static-discord-alpha-350);
  --pui-footer-community-discord-bg-end: var(--static-discord-alpha-150);
  --pui-footer-community-discord-bg-hover-end: var(--static-discord-alpha-200);
  --pui-footer-community-discord-bg-hover-start: var(--static-discord-alpha-300);
  --pui-footer-community-discord-bg-start: var(--static-discord-alpha-200);
  --pui-footer-community-forum-bg-active-end: var(--static-primary-alpha-300);
  --pui-footer-community-forum-bg-active-start: var(--static-primary-alpha-400);
  --pui-footer-community-forum-bg-end: var(--static-primary-alpha-200);
  --pui-footer-community-forum-bg-hover-end: var(--static-primary-alpha-250);
  --pui-footer-community-forum-bg-hover-start: var(--static-primary-alpha-350);
  --pui-footer-community-forum-bg-start: var(--static-primary-alpha-300);
  --pui-footer-community-heading: var(--static-orange-500);
  --pui-footer-community-newsletter-bg-active-end: var(--static-orange-alpha-250);
  --pui-footer-community-newsletter-bg-active-start: var(--static-orange-alpha-400);
  --pui-footer-community-newsletter-bg-end: var(--static-orange-alpha-150);
  --pui-footer-community-newsletter-bg-hover-end: var(--static-orange-alpha-250);
  --pui-footer-community-newsletter-bg-hover-start: var(--static-orange-alpha-350);
  --pui-footer-community-newsletter-bg-start: var(--static-orange-alpha-300);
  --pui-footer-divider: var(--static-gray-200);
  --pui-footer-guides-border: var(--static-gray-300);
  --pui-footer-separator: var(--static-gray-100);
}

/* =============================================================================
   Rodzina --pui-sub-navigation-social_media-* — odczyt scales/desktop.scss
   i mode/light.scss, 12.08.2026. Dopisana przy transpozycji elements/navbar.scss.

   WARUNEK Z PUNKTU 3.2 WZORCA MIGRACJI ZADZIAŁAŁ DRUGI RAZ: arkusz nawigacji
   woła 97 ról, z których 25 NIE ISTNIAŁO w tym pliku — cała podrodzina kafli
   społecznościowych rozwinięcia. Istnieją w repozytorium; po prostu nikt ich
   dotąd nie przepisał. Bez nich klasy wyglądałyby na wpięte, a kafel nie miałby
   ani tła, ani promienia, ani odstępów. Wszystkie 17 prymitywów, na które
   wskazują, były już obecne.

   Nazwa rodziny niesie PODKREŚLENIE w środku (social_media) przy myślnikach
   w całej reszcie systemu. Przepisane bez zmiany — nazwa jest identyfikatorem.
   ============================================================================= */
:root {
  /* scales/desktop.scss */
  --pui-sub-navigation-social_media-button-column-gap: var(--static-space-2x);
  --pui-sub-navigation-social_media-button-row-gap: var(--static-space-2x);
  --pui-sub-navigation-social_media-button-min-width: 156px;
  --pui-sub-navigation-social_media-button-padding-v: var(--static-space-1-5x);
  --pui-sub-navigation-social_media-button-padding-h: var(--static-space-2x);
  --pui-sub-navigation-social_media-button-gap: var(--static-space-1-5x);
  --pui-sub-navigation-social_media-button-radius: var(--static-space-1-25x);
  --pui-sub-navigation-social_media-button-icon-size: var(--static-space-4x);
  --pui-sub-navigation-social_media-padding-h: var(--static-space-3x);
  --pui-sub-navigation-social_media-padding-v: var(--static-space-3x);
  --pui-sub-navigation-social_media-gap: var(--static-space-2-5x);
  --pui-sub-navigation-social_media-content-gap: var(--static-space-1-5x);
  /* DOSYPANE Z KODU 19.08.2026 przy uzupełnianiu rozwinięcia Community: rola stoi
     w czterech skalach produktu (desktop 420, laptop 420, tablet 300, mobile 240)
     i w custom-properties.json, a arkusz katalogu jej nie niosł, bo jej JEDYNY
     czytelnik jest w <style scoped> pliku CommunityNav.vue. Skala laptop równa
     desktopowej, więc próg laptopowy nie ma wiersza. */
  --pui-sub-navigation-social_media-min-width: 420px;
  --pui-sub-navigation-social_media-radius: var(--pui-ui-radius-xl);
  /* mode/light.scss — jedna wartość wpisana wprost (#FAFAFAFF), pozostałe
     jedenaście na prymitywach alfa. */
  --pui-sub-navigation-social_media-button-bg-start: var(--static-gray-100);
  --pui-sub-navigation-social_media-button-bg-end: #FAFAFAFF;
  --pui-sub-navigation-social_media-button-bg-hover-start: var(--static-gray-200);
  --pui-sub-navigation-social_media-button-bg-hover-end: var(--static-gray-50);
  --pui-sub-navigation-social_media-discord-bg-start: var(--static-discord-alpha-200);
  --pui-sub-navigation-social_media-discord-bg-end: var(--static-discord-alpha-150);
  --pui-sub-navigation-social_media-discord-bg-hover-start: var(--static-discord-alpha-300);
  --pui-sub-navigation-social_media-discord-bg-hover-end: var(--static-discord-alpha-200);
  --pui-sub-navigation-social_media-forum-bg-start: var(--static-primary-alpha-300);
  --pui-sub-navigation-social_media-forum-bg-end: var(--static-primary-alpha-200);
  --pui-sub-navigation-social_media-forum-bg-hover-start: var(--static-primary-alpha-350);
  --pui-sub-navigation-social_media-forum-bg-hover-end: var(--static-primary-alpha-250);
}

/* Rola --pui-overlay-main-gap-negative — odczyt scales/desktop.scss, 12.08.2026.
   Dopisana razem z trzema regułami sąsiedztwa z main.scss. Wartość jest
   UJEMNA i różna na każdej skali (-392 desktop, -352 laptop, -252 tablet,
   -152 mobile), a reguła banera przelicza ją z powrotem na dodatnią przez
   `calc(… * -1)` — jedyna rola w zakresie, która jest używana w obie strony. */
:root { --pui-overlay-main-gap-negative: -392px; }


/* =============================================================================
   SKALE RESPONSYWNE — odczyt 12.08.2026 z tokens/scales/{desktop,laptop,tablet,mobile}.scss
   oraz base/breakpoints.scss (P0.6).

   Do dziś ten arkusz niósł WYŁĄCZNIE skalę desktop i nie zgłaszał tego niczym.
   Pomiar na jednej skali orzekał wtedy o całej rodzinie — i raz orzekł źle
   (rodzina --pui-form-sm-*, changelog formularza z 11.08).

   PROGI SĄ Z KODU, NIE Z OPISU. Mixin `media()` liczy je jako max-width minus
   epsilon 0.02px, żeby zapytania max i min nie nachodziły na siebie. Kolejność
   z main.scss: desktop (bez zapytania, warstwa bazowa) → laptop → tablet →
   mobile. Węższa skala stoi później, więc przy 900px działają naraz bloki
   laptop i tablet, a wygrywa tablet.

   CO TU STOI, A CZEGO NIE MA. Repozytorium powtarza w każdym pliku skali
   komplet 697 ról. Tutaj stoją wyłącznie te, które RÓŻNIĄ SIĘ od skali
   szerszej, policzone po tej samej kolejności kaskady — wynik rozwiązania
   jest identyczny, a widać z niego, co skala faktycznie zmienia:
   laptop 116, tablet 154, mobile 181 ról. Reszta jest w każdej skali ta sama.

   To jest KOMPRESJA ZAPISU, nie poprawka. Rola nieobecna w bloku niżej znaczy
   „ta sama co na szerszej skali", nigdy „nie zmierzono".
   ============================================================================= */

/* Skala desktop — 127 ról, których ten arkusz dotąd nie niósł.
   Znalezione przy przepisywaniu progów: rodziny wpisywano tu dotąd tylko
   wtedy, gdy sięgał po nie któryś komponent, więc arkusz był kompletny
   wyłącznie w tym, co ktoś już przepisał. Bez nich blok skali węższej
   definiowałby rolę, której na desktopie nie ma — czyli tworzyłby rozjazd
   zamiast go pokazywać. Zero konfliktów wartości z tym, co już stało. */
:root {
  --border-width: var(--pui-ui-border-outline-border-width);
  --gap: var(--static-space-0-5x);
  --padding-h: var(--static-space-3x);
  --padding-v: var(--static-space-1x);
  --pui-accordion-border-width: var(--pui-ui-border-outline-border-width);
  --pui-accordion-gap-h: var(--static-space-2x);
  --pui-accordion-icon-container-size: var(--static-space-2-5x);
  --pui-banner-switch-gap: var(--static-space-1x);
  --pui-banner-switch-padding: var(--static-space-1x);
  --pui-banner-switch-thumb-gap: var(--static-space-0-5x);
  --pui-banner-switch-thumb-padding-h: var(--static-space-3-5x);
  --pui-banner-switch-thumb-padding-v: var(--static-space-2x);
  --pui-banner-switch-thumb-width-min: 296px;
  --pui-banner-switch-width-max: 720px;
  --pui-changelog-container-padding-h: var(--static-space-5x);
  --pui-changelog-content-content-gap-h: var(--static-space-4x);
  --pui-changelog-content-content-gap-v: var(--static-space-7x);
  --pui-changelog-content-padding-h: var(--static-space-6x);
  --pui-changelog-content-padding-v: var(--static-space-8x);
  --pui-changelog-content-radius: var(--pui-ui-radius-3xl);
  --pui-changelog-description-gap: var(--static-space-4x);
  --pui-changelog-description-list-gap: var(--static-space-2-5x);
  --pui-changelog-description-list-items-gap: var(--static-space-1-5x);
  --pui-changelog-description-list-padding-left: var(--static-space-2-5x);
  --pui-changelog-description-padding-h: var(--static-space-4x);
  --pui-changelog-description-padding-v: var(--static-space-4x);
  --pui-changelog-description-rows-gap: var(--static-space-1-25x);
  --pui-changelog-description-section-gap: var(--static-space-5x);
  --pui-changelog-description-sublist-padding-left: var(--static-space-2-5x);
  --pui-changelog-faq-gap: var(--static-space-3x);
  --pui-changelog-faq-padding-h: var(--static-space-6x);
  --pui-changelog-faq-padding-v: var(--static-space-6x);
  --pui-changelog-graphic-container-padding-h: var(--static-space-4x);
  --pui-changelog-sub-nav-gap: var(--static-space-1-25x);
  --pui-changelog-sub-nav-item-padding-h: var(--static-space-1x);
  --pui-changelog-sub-nav-item-padding-v: var(--static-space-0-5x);
  --pui-changelog-title-gap: var(--static-space-2x);
  --pui-changelog-title-version-date-gap: var(--static-space-3x);
  --pui-companies-border-width: var(--pui-ui-border-outline-border-width);
  --pui-companies-gap: var(--static-space-4x);
  --pui-companies-min-width: 312px;
  --pui-companies-padding-h: var(--static-space-4x);
  --pui-companies-padding-v: var(--static-space-4x);
  --pui-companies-radius: var(--pui-ui-radius-5xl);
  --pui-faq-gap: var(--static-space-11x);
  --pui-faq-left-column-avatar-border-width: var(--pui-ui-border-outline-border-width-active);
  --pui-faq-left-column-avatar-radius: var(--pui-ui-radius-rounded);
  --pui-faq-left-column-avatar-size: var(--static-space-10x);
  --pui-faq-left-column-cta-gap: var(--static-space-3x);
  --pui-faq-left-column-cta-padding-h: var(--static-space-4x);
  --pui-faq-left-column-cta-padding-v: var(--static-space-5x);
  --pui-faq-left-column-gap: var(--static-space-4x);
  --pui-faq-left-column-radius: var(--pui-ui-radius-4xl);
  --pui-faq-left-column-width-max: 389px;
  --pui-faq-left-column-width-min: 390px;
  --pui-faq-max-width: 1420px;
  --pui-faq-min-width: 480px;
  --pui-faq-padding-h: var(--static-space-4x);
  --pui-feature-image-border-width: var(--pui-ui-border-outline-border-width);
  --pui-feature-image-height: 320px;
  --pui-feature-image-icon-size: 72px;
  --pui-feature-image-padding-h: var(--static-space-4x);
  --pui-feature-image-padding-v: var(--static-space-4x);
  --pui-feature-image-radius: var(--pui-ui-radius-5xl);
  --pui-feature-image-text-gap: var(--static-space-1-5x);
  --pui-focus-ring-border-width: var(--pui-ui-border-focus-ring-width);
  --pui-focus-ring-radius: var(--pui-ui-radius-xl);
  --pui-image-slider-gap-h: var(--pui-ui-radius-8xl);
  --pui-image-slider-gap-v: var(--pui-ui-radius-8xl);
  --pui-image-slider-height: 552px;
  --pui-image-slider-radius: var(--pui-ui-radius-3xl);
  --pui-image-slider-width: 720px;
  --pui-location-padding-v: var(--static-space-10x);
  --pui-navigation-main-condensed-logo-height: 260px;
  --pui-navigation-menu-toggle-icon-size: var(--static-space-3x);
  --pui-navigation-menu-toggle-size: 24px;
  --pui-overlay-main-banner-height: 400px;
  --pui-overlay-main-bg-padding: var(--static-space-1x);
  --pui-overlay-main-gap-negative: -392px;
  --pui-overlay-pricing-banner-height: 1045px;
  --pui-overlay-pricing-gap-negative-multi: -228px;
  --pui-overlay-pricing-gap-negative-multi-custom: -392px;
  --pui-overlay-pricing-gap-negative-single: -392px;
  --pui-overlay-pricing-gap-negative-single-custom: -392px;
  --pui-sub-navigation-list-social-gap: var(--static-space-2x);
  --pui-sub-navigation-newsletter-content-gap: var(--static-space-1-25x);
  --pui-sub-navigation-newsletter-form-gap-h: var(--static-space-1-25x);
  --pui-sub-navigation-newsletter-gap: var(--static-space-3x);
  --pui-sub-navigation-newsletter-min-width: 280px;
  --pui-sub-navigation-newsletter-padding-h: var(--static-space-3x);
  --pui-sub-navigation-newsletter-padding-v: var(--static-space-3x);
  --pui-sub-navigation-newsletter-radius: var(--pui-ui-radius-xl);
  --pui-sub-navigation-section-info-gap: var(--static-space-1-25x);
  --pui-sub-navigation-section-info-padding-down: var(--static-space-1x);
  --pui-sub-navigation-section-info-padding-h: var(--static-space-3x);
  --pui-sub-navigation-section-info-padding-top: var(--static-space-3x);
  --pui-sub-navigation-section-info-radius: var(--static-space-1-25x);
  --pui-sub-navigation-section-info-width: 316px;
  --pui-team-container-gap: var(--static-space-3x);
  --pui-team-description-container-border-width: var(--pui-ui-border-outline-border-width);
  --pui-team-description-container-gap: var(--static-space-0-5x);
  --pui-team-description-container-padding-h: var(--static-space-3x);
  --pui-team-description-container-padding-v: var(--static-space-2x);
  --pui-team-description-container-radius: var(--pui-ui-radius-4xl);
  --pui-team-description-container-text-max-width: 600px;
  --pui-team-graphic-container-height-max: 574px;
  --pui-team-graphic-container-icon-size: 40px;
  --pui-team-graphic-container-padding-h: var(--static-space-1-5x);
  --pui-team-graphic-container-padding-v: var(--static-space-1-5x);
  --pui-team-graphic-container-radius: var(--pui-ui-radius-6xl);
  --pui-timeline-container-gap: var(--static-space-3x);
  --pui-timeline-container-padding-h: var(--static-space-15x);
  --pui-timeline-container-padding-v: var(--static-space-15x);
  --pui-timeline-container-radius: var(--pui-ui-radius-6xl);
  --pui-timeline-dates-gap: var(--static-space-1x);
  --pui-timeline-dates-max-width: 560px;
  --pui-timeline-dates-padding-h: var(--static-space-4x);
  --pui-timeline-dates-padding-v: var(--static-space-4x);
  --pui-timeline-dates-radius: var(--pui-ui-radius-4xl);
  --pui-values-border-width: var(--pui-ui-border-outline-border-width);
  --pui-values-container-padding: var(--static-space-8x);
  --pui-values-gap: var(--static-space-2x);
  --pui-values-icon-size: 28px;
  --pui-values-padding-h: var(--static-space-4x);
  --pui-values-padding-v: var(--static-space-4x);
  --pui-values-radius: var(--pui-ui-radius-4xl);
  --radius: var(--pui-ui-radius-2xl);
}

/* LAPTOP — screen and (max-width: calc(1480px - 0.02px)) (scales/laptop.scss) */
@media screen and (max-width: calc(1480px - 0.02px)) {
  :root {
    --pui-banner-gradient-max-width: 1400px;
    --pui-banner-horizontal-container-gap: var(--static-space-7x);
    --pui-banner-horizontal-container-padding-bottom: var(--static-space-10x);
    --pui-banner-horizontal-container-padding-top: var(--static-space-10x);
    --pui-banner-horizontal-slot-height: 576px;
    --pui-banner-horizontal-slot-width: 576px;
    --pui-banner-switch-thumb-padding-v: var(--static-space-1-5x);
    --pui-banner-vertical-actions-gap-pricing: var(--static-space-8x);
    --pui-banner-vertical-container-padding-top: var(--static-space-6x);
    --pui-button-base-height: 54px;
    --pui-button-lg-height: 62px;
    --pui-button-sm-height: 42px;
    --pui-button-xlg-height: 70px;
    --pui-button-xs-height: 34px;
    --pui-button-xxlg-height: 78px;
    --pui-changelog-content-content-gap-v: var(--static-space-5x);
    --pui-changelog-content-padding-h: var(--static-space-4x);
    --pui-changelog-content-padding-v: var(--static-space-7x);
    --pui-changelog-description-padding-h: var(--static-space-3x);
    --pui-changelog-description-padding-v: var(--static-space-3x);
    --pui-community-box-newsletter-body-width-min: 400px;
    --pui-container-content-gap-v: var(--static-space-6x);
    --pui-container-gap: var(--static-space-8x);
    --pui-container-padding-h: var(--static-space-4x);
    --pui-container-width-max: 1280px;
    --pui-content-block-container-padding-h: var(--static-space-2x);
    --pui-content-block-container-padding-v: var(--static-space-2x);
    --pui-content-block-illustration-container-custom-padding-custom-h: var(--static-space-7x);
    --pui-content-block-illustration-container-custom-padding-h: var(--static-space-2x);
    --pui-content-block-illustration-container-custom-padding-v: var(--static-space-2x);
    --pui-content-block-illustration-container-default-padding-h: var(--static-space-2x);
    --pui-content-block-illustration-container-default-padding-v: var(--static-space-2x);
    --pui-faq-gap: var(--static-space-9x);
    --pui-form-base-height: 54px;
    --pui-hero-button-lg-height-min: 88px;
    --pui-hero-button-lg-width-min: 280px;
    --pui-location-padding-v: var(--static-space-8x);
    --pui-navigation-main-action-padding-left: var(--static-space-1-5x);
    --pui-navigation-main-menu-item-item-padding-h: var(--static-space-0-75x);
    --pui-overlay-main-banner-height: 360px;
    --pui-overlay-main-gap-negative: -352px;
    --pui-overlay-pricing-banner-height: 1025px;
    --pui-overlay-pricing-gap-negative-multi: -212px;
    --pui-overlay-pricing-gap-negative-multi-custom: -399px;
    --pui-overlay-pricing-gap-negative-single: -399px;
    --pui-overlay-pricing-gap-negative-single-custom: -399px;
    --pui-pricing-box-features-gap: var(--static-space-1-25x);
    --pui-pricing-box-gap: var(--static-space-3x);
    --pui-pricing-box-padding-h: var(--static-space-3x);
    --pui-pricing-box-padding-v: var(--static-space-3x);
    --pui-pricing-box-width-min: 298px;
    --pui-section-desc-default-base-body-gap: var(--static-space-4x);
    --pui-section-desc-default-base-body-padding-extra-h: var(--static-space-10x);
    --pui-section-desc-default-base-body-padding-h: var(--static-space-4x);
    --pui-section-desc-default-base-body-padding-v: var(--static-space-4x);
    --pui-section-heading-vertical-actions-gap: var(--static-space-2x);
    --pui-section-padding-v: var(--static-space-13x);
    --pui-sub-navigation-gap-v: var(--static-space-0-5x);
    --pui-sub-navigation-item-padding: var(--static-space-1x);
    --pui-sub-navigation-padding-v: var(--static-space-3x);
    --pui-sub-navigation-sections-gap: var(--static-space-1-5x);
    --pui-table-header-gap: var(--static-space-3x);
    --pui-table-header-padding-h: var(--static-space-2-5x);
    --pui-table-header-padding-v: var(--static-space-2-5x);
    --pui-table-header-price-gap: var(--static-space-1x);
    --pui-table-section-header-padding-v-bottom: var(--static-space-2-5x);
    --pui-table-section-header-padding-v-top: var(--static-space-4x);
    --pui-team-container-gap: var(--static-space-2x);
    --pui-testimonial-body-active-gap: var(--static-space-1x);
    --pui-testimonial-body-active-max-width: 980px;
    --pui-testimonial-body-active-min-width: 800px;
    --pui-testimonial-graphic-container-max-width: 400px;
    --pui-testimonial-logo-max-width: 120px;
    --pui-testimonial-main-actions-gap: var(--static-space-2x);
    --pui-testimonial-main-gap: var(--static-space-3x);
    --pui-text-h1-font-size: 56px;
    --pui-text-h1-line-height: 68px; --pui-text-h1-line-height-tight: 59px;
    --pui-text-h2-font-size: 44px;
    --pui-text-h2-line-height: 58px; --pui-text-h2-line-height-tight: 50px;
    --pui-text-h3-font-size: 38px;
    --pui-text-h3-line-height: 52px; --pui-text-h3-line-height-tight: 45px;
    --pui-text-h4-font-size: 30px;
    --pui-text-h4-line-height: 40px; --pui-text-h4-line-height-tight: 35px;
    --pui-text-h5-font-size: 26px;
    --pui-text-h5-line-height: 34px; --pui-text-h5-line-height-tight: 30px;
    --pui-text-h6-font-size: 22px;
    --pui-text-h6-line-height: 28px; --pui-text-h6-line-height-tight: 24px;
    --pui-text-h7-font-size: 18px;
    --pui-text-h7-line-height: 24px; --pui-text-h7-line-height-tight: 21px;
    --pui-text-h8-font-size: 17px;
    --pui-text-h8-line-height: 22px; --pui-text-h8-line-height-tight: 19px;
    --pui-text-p-lg-font-size: 16px;
    --pui-text-p-lg-line-height: 29px; --pui-text-p-lg-line-height-tight: 25px;
    --pui-text-p-xlg-font-size: 18px;
    --pui-text-p-xlg-line-height: 30px; --pui-text-p-xlg-line-height-tight: 26px;
    --pui-text-p-xxlg-font-size: 22px;
    --pui-text-p-xxlg-line-height: 36px; --pui-text-p-xxlg-line-height-tight: 31px;
    --pui-timeline-container-padding-h: var(--static-space-14x);
    --pui-timeline-container-padding-v: var(--static-space-14x);
    --pui-ui-radius-2xl: 10px;
    --pui-ui-radius-3xl: 14px;
    --pui-ui-radius-4xl: 22px;
    --pui-ui-radius-5xl: 20px;
    --pui-ui-radius-6xl: 28px;
    --pui-ui-radius-7xl: 36px;
    --pui-use-case-body-default-radius: var(--pui-ui-radius-4xl);
    --pui-values-container-padding: var(--static-space-5x);
    --pui-values-gap: var(--static-space-1-5x);
    --pui-values-radius: var(--pui-ui-radius-3xl);
    --pui-video-block-default-video-container-cta-button-icon-size: 32px;
    --pui-video-block-default-video-container-cta-button-max-height: 100px;
    --pui-video-block-default-video-container-cta-button-max-height-hover: 106px;
    --pui-video-block-default-video-container-cta-button-max-width: 100px;
    --pui-video-block-default-video-container-cta-button-max-width-hover: 106px;
    --pui-video-block-default-video-container-cta-label-padding-h: var(--static-space-3-5x);
    --pui-video-block-default-video-container-cta-label-padding-v: var(--static-space-1-5x);
  }
}

/* TABLET — screen and (max-width: calc(1024px - 0.02px)) (scales/tablet.scss) */
@media screen and (max-width: calc(1024px - 0.02px)) {
  :root {
    --pui-banner-gradient-max-width: 1000px;
    --pui-banner-graphic-image-base-outside-radius: var(--pui-ui-radius-4xl);
    --pui-banner-horizontal-container-gap: var(--static-space-6x);
    --pui-banner-horizontal-container-padding-bottom: var(--static-space-6x);
    --pui-banner-horizontal-container-padding-top: var(--static-space-3-5x);
    --pui-banner-horizontal-slot-height: 496px;
    --pui-banner-horizontal-slot-width: 496px;
    --pui-banner-switch-thumb-padding-h: var(--static-space-3x);
    --pui-banner-vertical-actions-gap-pricing: var(--static-space-5x);
    --pui-banner-vertical-container-padding-bottom: var(--static-space-6x);
    --pui-banner-vertical-container-padding-top: var(--static-space-3-5x);
    --pui-banner-vertical-heading-gap: var(--static-space-5x);
    --pui-banner-vertical-heading-main-gap: var(--static-space-2x);
    --pui-banner-vertical-slot-height: 360px;
    --pui-blog-card-latest-update-image-radius: var(--pui-ui-radius-2xl);
    --pui-button-base-height: 52px;
    --pui-button-lg-height: 60px;
    --pui-button-sm-height: 40px;
    --pui-button-xlg-height: 68px;
    --pui-button-xs-height: 32px;
    --pui-button-xxlg-height: 76px;
    --pui-changelog-content-content-gap-h: var(--static-space-3x);
    --pui-changelog-content-padding-v: var(--static-space-5x);
    --pui-changelog-content-radius: var(--pui-ui-radius-2xl);
    --pui-changelog-description-gap: var(--static-space-2-5x);
    --pui-changelog-description-list-gap: var(--static-space-2x);
    --pui-changelog-description-list-items-gap: var(--static-space-1-25x);
    --pui-changelog-description-list-padding-left: var(--static-space-2x);
    --pui-changelog-description-padding-h: var(--static-space-2-5x);
    --pui-changelog-description-padding-v: var(--static-space-2-5x);
    --pui-changelog-description-rows-gap: var(--static-space-1x);
    --pui-changelog-description-section-gap: var(--static-space-3x);
    --pui-changelog-description-sublist-padding-left: var(--static-space-2x);
    --pui-changelog-faq-padding-h: var(--static-space-3x);
    --pui-changelog-faq-padding-v: var(--static-space-3x);
    --pui-changelog-sub-nav-gap: var(--static-space-1x);
    --pui-changelog-sub-nav-item-padding-h: var(--static-space-0-75x);
    --pui-changelog-sub-nav-item-padding-v: var(--static-space-0-25x);
    --pui-changelog-title-gap: var(--static-space-3x);
    --pui-community-box-newsletter-body-gap: var(--static-space-2x);
    --pui-community-box-newsletter-body-padding-h: var(--static-space-2x);
    --pui-community-box-newsletter-body-padding-v: var(--static-space-2x);
    --pui-community-box-newsletter-body-width-min: 360px;
    --pui-community-box-newsletter-validation-padding-v: var(--static-space-1x);
    --pui-container-content-gap-h: var(--static-space-4x);
    --pui-container-content-gap-v: var(--static-space-4x);
    --pui-container-gap: var(--static-space-7x);
    --pui-container-grid-gap: var(--static-space-3x);
    --pui-container-width-max: 1420px;
    --pui-content-block-body-radius: var(--pui-ui-radius-5xl);
    --pui-content-block-container-gap: var(--static-space-1x);
    --pui-content-block-illustration-container-custom-padding-custom-h: var(--static-space-1x);
    --pui-content-block-illustration-container-custom-padding-h: var(--static-space-1x);
    --pui-content-block-illustration-container-custom-padding-v: var(--static-space-1x);
    --pui-content-block-illustration-container-default-padding-h: var(--static-space-1x);
    --pui-content-block-illustration-container-default-padding-v: var(--static-space-1x);
    --pui-content-block-illustration-container-default-radius: var(--pui-ui-radius-3xl);
    --pui-content-block-illustration-container-default-slot-max-size: 284px;
    --pui-content-block-illustration-container-default-vertical-height: 450px;
    --pui-faq-gap: var(--static-space-5x);
    --pui-faq-left-column-cta-padding-h: var(--static-space-3x);
    --pui-feature-icon-padding-h: var(--static-space-4x);
    --pui-feature-icon-padding-v: var(--static-space-4x);
    --pui-footer-bottom-min-width: 400px;
    --pui-footer-gap: var(--static-space-8x);
    --pui-footer-left-column-max-width: 2000px;
    --pui-footer-padding-v: var(--static-space-8x);
    --pui-footer-right-column-min-width: 600px;
    --pui-form-base-height: 52px;
    --pui-hero-button-lg-width-min: 260px;
    --pui-location-padding-v: var(--static-space-3x);
    --pui-logo-height: var(--static-space-6x);
    --pui-navigation-height: 100px;
    --pui-navigation-main-action-padding-left: var(--static-space-4x);
    --pui-navigation-main-menu-item-item-padding-h: var(--static-space-1-5x);
    --pui-overlay-main-banner-height: 260px;
    --pui-overlay-main-gap-negative: -252px;
    --pui-overlay-pricing-banner-height: 937px;
    --pui-overlay-pricing-gap-negative-multi: -228px;
    --pui-pricing-box-main-gap: var(--static-space-2-5x);
    --pui-pricing-box-radius: var(--pui-ui-radius-4xl);
    --pui-pricing-box-width-min: 304px;
    --pui-section-combined-padding-v: var(--static-space-6x);
    --pui-section-desc-default-base-body-gap: var(--static-space-3x);
    --pui-section-desc-default-base-body-padding-extra-h: var(--static-space-3x);
    --pui-section-desc-default-base-body-padding-h: var(--static-space-3x);
    --pui-section-desc-default-base-body-padding-v: var(--static-space-3x);
    --pui-section-padding-v: var(--static-space-12x);
    --pui-sub-navigation-gap-h: var(--static-space-1x);
    --pui-sub-navigation-gap-v: var(--static-space-1-25x);
    --pui-sub-navigation-item-padding: var(--static-space-1-5x);
    --pui-sub-navigation-list-heading-gap: var(--static-space-1-5x);
    --pui-sub-navigation-newsletter-gap: var(--static-space-2x);
    --pui-sub-navigation-newsletter-padding-h: var(--static-space-2-5x);
    --pui-sub-navigation-newsletter-padding-v: var(--static-space-2-5x);
    --pui-sub-navigation-social_media-min-width: 300px;
    --pui-sub-navigation-padding-h: var(--static-space-2-5x);
    --pui-sub-navigation-padding-v: var(--static-space-2-5x);
    --pui-sub-navigation-sections-gap: var(--static-space-2-5x);
    --pui-table-caption-padding-h: var(--static-space-1-5x);
    --pui-table-caption-padding-v: var(--static-space-1-25x);
    --pui-table-cell-gap: var(--static-space-1-5x);
    --pui-table-cell-icon-size: var(--static-space-2x);
    --pui-table-cell-padding-h: var(--static-space-2x);
    --pui-table-cell-padding-v: var(--static-space-1-5x);
    --pui-table-header-footer-gap: var(--static-space-1-5x);
    --pui-table-header-gap: var(--static-space-2-5x);
    --pui-table-header-main-gap: var(--static-space-1x);
    --pui-table-radius: var(--pui-ui-radius-2xl);
    --pui-table-section-header-padding-v-bottom: var(--static-space-2x);
    --pui-table-section-header-padding-v-top: var(--static-space-3x);
    --pui-team-description-container-text-max-width: 520px;
    --pui-testimonial-body-active-min-width: 700px;
    --pui-testimonial-graphic-container-max-width-expanded: 320px;
    --pui-testimonial-logo-max-width: 110px;
    --pui-testimonial-logo-min-width: 110px;
    --pui-text-h1-font-size: 52px;
    --pui-text-h1-line-height: 64px; --pui-text-h1-line-height-tight: 56px;
    --pui-text-h2-font-size: 40px;
    --pui-text-h2-line-height: 52px; --pui-text-h2-line-height-tight: 45px;
    --pui-text-h3-font-size: 36px;
    --pui-text-h3-line-height: 46px; --pui-text-h3-line-height-tight: 40px;
    --pui-text-h4-font-size: 28px;
    --pui-text-h4-line-height: 36px; --pui-text-h4-line-height-tight: 31px;
    --pui-text-h5-font-size: 24px;
    --pui-text-h5-line-height: 32px; --pui-text-h5-line-height-tight: 28px;
    --pui-text-h6-font-size: 20px;
    --pui-text-h8-font-size: 16px;
    --pui-text-h8-line-height: 20px; --pui-text-h8-line-height-tight: 17px;
    --pui-text-p-base-line-height: 24px; --pui-text-p-base-line-height-tight: 21px;
    --pui-text-p-lg-font-size: 15px;
    --pui-text-p-lg-line-height: 28px; --pui-text-p-lg-line-height-tight: 24px;
    --pui-text-p-xlg-line-height: 28px; --pui-text-p-xlg-line-height-tight: 24px;
    --pui-text-p-xxlg-font-size: 20px;
    --pui-text-p-xxlg-line-height: 34px; --pui-text-p-xxlg-line-height-tight: 30px;
    --pui-timeline-container-gap: var(--static-space-2x);
    --pui-timeline-container-padding-h: var(--static-space-8x);
    --pui-timeline-container-padding-v: var(--static-space-18x);
    --pui-timeline-dates-gap: var(--static-space-0x);
    --pui-tooltip-padding-h: var(--static-space-1-25x);
    --pui-tooltip-padding-v: var(--static-space-1x);
    --pui-tooltip-radius: var(--pui-ui-radius-md);
    --pui-ui-radius-5xl: 16px;
    --pui-ui-radius-6xl: 24px;
    --pui-ui-radius-7xl: 32px;
    --pui-use-case-body-default-max-width: 1000px;
    --pui-use-case-body-default-padding-top: 0px;
    --pui-use-case-body-default-slot-height: 140px;
    --pui-use-case-body-default-vertical-max-height: 356px;
    --pui-values-container-padding: var(--static-space-3x);
    --pui-values-gap: var(--static-space-1x);
    --pui-values-icon-size: 24px;
    --pui-values-padding-h: var(--static-space-3x);
    --pui-values-padding-v: var(--static-space-2x);
    --pui-video-block-default-body-width-min: 500px;
  }
}

/* MOBILE — screen and (max-width: calc(768px - 0.02px)) (scales/mobile.scss) */
@media screen and (max-width: calc(768px - 0.02px)) {
  :root {
    --pui-banner-gradient-max-width: 800px;
    --pui-banner-graphic-image-base-inside-radius: var(--pui-ui-radius-2xl);
    --pui-banner-graphic-image-base-outside-radius: var(--pui-ui-radius-3xl);
    --pui-banner-graphic-image-sm-inside-radius: var(--pui-ui-radius-lg);
    --pui-banner-graphic-image-sm-outside-radius: var(--pui-ui-radius-2xl);
    --pui-banner-horizontal-container-padding-bottom: var(--static-space-8x);
    --pui-banner-horizontal-container-padding-top: var(--static-space-1x);
    --pui-banner-horizontal-slot-height: 400px;
    --pui-banner-horizontal-slot-width: 400px;
    --pui-banner-vertical-container-padding-h: var(--static-space-3x);
    --pui-banner-vertical-container-padding-top: var(--static-space-1x);
    --pui-banner-vertical-heading-gap: var(--static-space-4x);
    --pui-banner-vertical-slot-height: 220px;
    --pui-blog-card-latest-update-body-padding-h: var(--static-space-2x);
    --pui-blog-card-latest-update-body-padding-v: var(--static-space-2x);
    --pui-blog-card-latest-update-image-radius: var(--pui-ui-radius-5xl);
    --pui-button-base-height: 48px;
    --pui-button-lg-height: 54px;
    --pui-button-sm-height: 38px;
    --pui-button-xlg-height: 66px;
    --pui-button-xs-height: 30px;
    --pui-button-xxlg-height: 74px;
    --pui-changelog-container-padding-h: var(--static-space-3x);
    --pui-changelog-content-content-gap-h: var(--static-space-2-5x);
    --pui-changelog-content-content-gap-v: var(--static-space-4x);
    --pui-changelog-content-padding-h: var(--static-space-3x);
    --pui-changelog-content-padding-v: var(--static-space-4x);
    --pui-changelog-description-list-padding-left: var(--static-space-1x);
    --pui-changelog-description-padding-h: var(--static-space-1x);
    --pui-changelog-description-padding-v: var(--static-space-1x);
    --pui-changelog-graphic-container-padding-h: var(--static-space-2x);
    --pui-changelog-title-gap: var(--static-space-2x);
    --pui-changelog-title-version-date-gap: var(--static-space-2x);
    --pui-community-box-forum-body-min-width: 312px;
    --pui-community-box-forum-body-radius: var(--pui-ui-radius-5xl);
    --pui-community-box-forum-main-gap: var(--static-space-2-5x);
    --pui-community-box-forum-main-padding-h: var(--static-space-2-5x);
    --pui-community-box-forum-main-padding-v: var(--static-space-3x);
    --pui-community-box-newsletter-body-radius: var(--pui-ui-radius-5xl);
    --pui-community-box-newsletter-body-width-min: 312px;
    --pui-community-box-newsletter-form-padding-h: var(--static-space-3x);
    --pui-community-box-newsletter-form-padding-v: var(--static-space-3x);
    --pui-community-box-newsletter-form-radius: var(--pui-ui-radius-5xl);
    --pui-community-box-newsletter-main-content-padding-h: var(--static-space-2x);
    --pui-community-box-newsletter-main-content-padding-v: var(--static-space-2x);
    --pui-community-box-newsletter-main-gap: var(--static-space-1x);
    --pui-community-box-newsletter-validation-padding-h: var(--static-space-1x);
    --pui-container-gap: var(--static-space-6x);
    --pui-container-grid-gap: var(--static-space-2x);
    --pui-container-padding-h: var(--static-space-3x);
    --pui-content-block-body-radius: var(--pui-ui-radius-6xl);
    --pui-content-block-container-gap: var(--static-space-2x);
    --pui-content-block-illustration-container-default-radius: var(--pui-ui-radius-5xl);
    --pui-content-block-illustration-container-default-vertical-height: 300px;
    --pui-faq-gap: var(--static-space-4x);
    --pui-feature-icon-icon-size: 48px;
    --pui-feature-slider-gap: var(--static-space-2x);
    --pui-footer-gap: var(--static-space-4x);
    --pui-footer-left-column-community-icon-size: 40px;
    --pui-footer-left-column-community-padding-h: var(--static-space-1x);
    --pui-footer-left-column-gap: var(--static-space-3x);
    --pui-footer-left-column-gap-h: var(--static-space-2x);
    --pui-footer-left-column-guides-gap: var(--static-space-1-5x);
    --pui-footer-left-column-guides-padding-h: var(--static-space-1-5x);
    --pui-footer-left-column-guides-padding-v: var(--static-space-2x);
    --pui-footer-left-column-min-width: 300px;
    --pui-footer-padding-h: var(--static-space-2x);
    --pui-footer-padding-v: var(--static-space-6x);
    --pui-footer-right-column-column-min-width: 260px;
    --pui-footer-right-column-gap-h: var(--static-space-2x);
    --pui-footer-right-column-gap-v: var(--static-space-3x);
    --pui-footer-right-column-links-gap: var(--static-space-0-75x);
    --pui-footer-right-column-min-width: 500px;
    --pui-form-base-height: 50px;
    --pui-form-sm-gap: var(--static-space-1x);
    --pui-form-sm-padding-h: var(--static-space-1x);
    --pui-hero-button-base-height-min: 80px;
    --pui-hero-button-lg-height-min: 82px;
    --pui-hero-button-lg-width-min: 200px;
    --pui-hero-button-sm-height-min: 38px;
    --pui-logo-height: var(--static-space-5x);
    --pui-navigation-height: 80px;
    --pui-navigation-main-condensed-logo-height: 180px;
    --pui-overlay-main-banner-height: 160px;
    --pui-overlay-main-bg-outside-radius: var(--pui-ui-radius-3xl);
    --pui-overlay-main-gap-negative: -152px;
    --pui-overlay-pricing-banner-height: 801px;
    --pui-overlay-pricing-gap-negative-multi: -197px;
    --pui-overlay-pricing-gap-negative-multi-custom: -20px;
    --pui-overlay-pricing-gap-negative-single: -341px;
    --pui-overlay-pricing-gap-negative-single-custom: -121px;
    --pui-pricing-box-features-gap: var(--static-space-1x);
    --pui-pricing-box-gap: var(--static-space-2-5x);
    --pui-pricing-box-main-gap: var(--static-space-2x);
    --pui-pricing-box-padding-h: var(--static-space-2-5x);
    --pui-pricing-box-padding-v: var(--static-space-2-5x);
    --pui-pricing-box-radius: var(--static-space-2-5x);
    --pui-pricing-box-width-min: 314px;
    --pui-section-combined-padding-v: var(--static-space-4x);
    --pui-section-desc-default-base-body-padding-extra-h: var(--static-space-2x);
    --pui-section-desc-default-base-body-padding-h: var(--static-space-2x);
    --pui-section-desc-default-base-body-padding-v: var(--static-space-2x);
    --pui-section-desc-default-base-main-gap: var(--static-space-2x);
    --pui-section-desc-default-base-main-rows-gap: var(--static-space-1-25x);
    --pui-section-heading-horizontal-desc-min-width: 400px;
    --pui-section-heading-horizontal-heading-min-width: 180px;
    --pui-section-padding-v: var(--static-space-8x);
    --pui-sub-navigation-item-content-gap: var(--static-space-1x);
    --pui-sub-navigation-list-heading-gap: var(--static-space-1x);
    --pui-sub-navigation-list-social-gap: var(--static-space-1x);
    --pui-sub-navigation-newsletter-min-width: 240px;
    --pui-sub-navigation-newsletter-padding-h: var(--static-space-2x);
    --pui-sub-navigation-newsletter-padding-v: var(--static-space-2x);
    --pui-sub-navigation-social_media-min-width: 240px;
    --pui-sub-navigation-section-heading-gap: var(--static-space-1-5x);
    --pui-table-caption-padding-h: var(--static-space-1x);
    --pui-table-caption-padding-v: var(--static-space-1x);
    --pui-table-cell-icon-size: var(--static-space-1-5x);
    --pui-table-header-gap: var(--static-space-1-5x);
    --pui-table-header-padding-h: var(--static-space-2x);
    --pui-table-header-padding-v: var(--static-space-2x);
    --pui-team-container-gap: var(--static-space-1x);
    --pui-testimonial-body-active-min-width: 300px;
    --pui-testimonial-body-active-padding-h: var(--static-space-2x);
    --pui-testimonial-body-active-padding-v: var(--static-space-2x);
    --pui-testimonial-logo-max-width: 100px;
    --pui-testimonial-logo-min-width: 100px;
    --pui-testimonial-main-padding-h: var(--static-space-1x);
    --pui-testimonial-title-height-max: 64px;
    --pui-text-h1-font-size: 40px;
    --pui-text-h1-line-height: 48px; --pui-text-h1-line-height-tight: 42px;
    --pui-text-h2-font-size: 32px;
    --pui-text-h2-line-height: 40px; --pui-text-h2-line-height-tight: 35px;
    --pui-text-h3-font-size: 28px;
    --pui-text-h3-line-height: 36px; --pui-text-h3-line-height-tight: 31px;
    --pui-text-h4-font-size: 24px;
    --pui-text-h4-line-height: 32px; --pui-text-h4-line-height-tight: 28px;
    --pui-text-h5-font-size: 20px;
    --pui-text-h5-line-height: 28px; --pui-text-h5-line-height-tight: 24px;
    --pui-text-h6-font-size: 18px;
    --pui-text-h6-line-height: 24px; --pui-text-h6-line-height-tight: 21px;
    --pui-text-h7-font-size: 16px;
    --pui-text-h7-line-height: 22px; --pui-text-h7-line-height-tight: 19px;
    --pui-text-p-base-font-size: 14px;
    --pui-text-p-base-line-height: 23px; --pui-text-p-base-line-height-tight: 20px;
    --pui-text-p-sm-font-size: 13px;
    --pui-text-p-sm-line-height: 22px; --pui-text-p-sm-line-height-tight: 19px;
    --pui-text-p-xlg-font-size: 17px;
    --pui-text-p-xlg-line-height: 27px; --pui-text-p-xlg-line-height-tight: 23px;
    --pui-text-p-xs-font-size: 12px;
    --pui-text-p-xs-line-height: 20px; --pui-text-p-xs-line-height-tight: 17px;
    --pui-text-p-xxlg-font-size: 18px;
    --pui-text-p-xxlg-line-height: 30px; --pui-text-p-xxlg-line-height-tight: 26px;
    --pui-timeline-container-gap: var(--static-space-1x);
    --pui-timeline-container-padding-h: var(--static-space-4x);
    --pui-timeline-container-padding-v: var(--static-space-8x);
    --pui-timeline-dates-padding-h: var(--static-space-2x);
    --pui-timeline-dates-padding-v: var(--static-space-2x);
    --pui-use-case-body-default-graphic-width: 140px;
    --pui-use-case-body-default-max-width: 800px;
    --pui-use-case-body-default-min-width: 312px;
    --pui-use-case-body-default-radius: var(--pui-ui-radius-3xl);
    --pui-use-case-body-default-vertical-min-width: 312px;
    --pui-use-case-container-gap: var(--static-space-3x);
    --pui-values-container-padding: var(--static-space-1x);
    --pui-values-icon-size: 18px;
    --pui-values-padding-h: var(--static-space-1-5x);
    --pui-values-padding-v: var(--static-space-1x);
    --pui-video-block-default-body-padding-h: var(--static-space-2x);
    --pui-video-block-default-body-padding-v: var(--static-space-2x);
    --pui-video-block-default-body-width-min: 360px;
    --pui-video-block-default-text-container-horizontal-padding-h: var(--static-space-2x);
    --pui-video-block-default-text-container-vertical-padding-bottom: var(--static-space-0-5x);
    --pui-video-block-default-text-container-vertical-padding-top: var(--static-space-2x);
    --pui-video-block-default-video-container-cta-button-icon-size: 24px;
    --pui-video-block-default-video-container-cta-button-max-height: 80px;
    --pui-video-block-default-video-container-cta-button-max-height-hover: 84px;
    --pui-video-block-default-video-container-cta-button-max-width: 80px;
    --pui-video-block-default-video-container-cta-button-max-width-hover: 84px;
    --pui-video-block-default-video-container-cta-label-padding-h: var(--static-space-3x);
    --pui-video-block-default-video-container-cta-label-padding-v: var(--static-space-1x);
    --pui-video-block-default-video-container-radius: var(--pui-ui-radius-3xl);
  }
}


/* =============================================================================
   BARWY RODZIN --pui-timeline-*, --pui-team-* i --pui-values-*.
   Odczyt `mode/light.scss` (linie 494-509, 547-556, 570-573), 20.08.2026,
   kopia commit 1bcf0cc. Dosypane przy złożeniu strony O nas.

   RODZINY STAŁY W ARKUSZU NIEPEŁNE: wymiary weszły z całą skalą
   `scales/*.scss` przy pierwszym odczycie, barw nie było, bo do dziś nie
   wołała ich ani jedna strona katalogu. To ta sama dziura, którą 18.08 zamknęła
   rodzina --pui-faq-*, i ma ten sam cichy objaw: nierozwiązana nazwa nie gaśnie
   głośno, tylko wypada z deklaracji, więc karta na gradiencie dwóch nazw
   zostaje przezroczysta i wygląda jak decyzja projektowa.
   ============================================================================= */
:root {
  /* mode/light.scss — os czasu: dwa gradienty karty, dwie obwiednie, prowadnica */
  --pui-timeline-bg-default-end: var(--static-overlay-light-100);
  --pui-timeline-bg-default-start: var(--static-overlay-light-0);
  --pui-timeline-bg-hover-end: var(--static-overlay-light-100);
  --pui-timeline-bg-hover-start: var(--static-overlay-light-150);
  --pui-timeline-border-default-end: var(--static-overlay-light-500);
  --pui-timeline-border-default-start: var(--static-overlay-light-300);
  --pui-timeline-border-hover-end: var(--static-overlay-light-500);
  --pui-timeline-border-hover-start: var(--static-overlay-light-300);
  /* Prowadnica jest w kodzie rysowana SVG-em z białymi stopniami przezroczystości,
     nie tymi dwiema rolami — role istnieją i nie czyta ich ani jedna reguła. */
  --pui-timeline-line-end: var(--static-overlay-light-300);
  --pui-timeline-line-start: var(--static-overlay-light-0);

  /* mode/light.scss — zespół: karta zdjęcia, nakładka, opis, ikona */
  --pui-team-description-container-bg: var(--static-overlay-dark-100);
  --pui-team-description-container-bg-hover: var(--static-overlay-light-100);
  --pui-team-description-container-border: var(--static-overlay-light-300);
  --pui-team-description-container-border-hover: var(--static-overlay-light-400);
  --pui-team-graphic-container-bg-end: var(--static-primary-800);
  --pui-team-graphic-container-bg-hover-end: var(--static-primary-600);
  --pui-team-graphic-container-bg-hover-start: var(--static-primary-950);
  --pui-team-graphic-container-bg-start: var(--static-primary-950);
  --pui-team-graphic-container-icon: var(--static-overlay-light-500);
  --pui-team-graphic-container-icon-hover: var(--static-overlay-light-800);
  --pui-team-graphic-container-overlay-end: var(--static-primary-950);
  --pui-team-graphic-container-overlay-hover-end: var(--static-primary-900);
  /* DWIE WARTOŚCI SZESNASTKOWE WPROST w warstwie mode, obie ten sam kolor
     zerowej przezroczystości — tak stoi w kodzie, nie zamieniam na rolę. */
  --pui-team-graphic-container-overlay-hover-start: #02171000;
  --pui-team-graphic-container-overlay-start: #02171000;
  /* Dwie role bez czytelnika: ikonę rysują --pui-team-graphic-container-icon*. */
  --pui-team-icon: var(--static-overlay-light-300);
  --pui-team-icon-hover: var(--static-gray-0);


  /* mode/light.scss — wartości (ilustracja zasad na stronie O nas) */
  --pui-values-bg-default-end: var(--static-overlay-light-100);
  --pui-values-bg-default-start: var(--static-overlay-light-50);
  /* Obwiednia jedzie w kodzie maską .border-mask z gradientem wpisanym wprost;
     te dwie role nie mają czytelnika. */
  --pui-values-border-default-end: var(--static-overlay-light-500);
  --pui-values-border-default-start: var(--static-overlay-light-300);
}

/* =============================================================================
   OBWIEDNIA PANELU — NOWA ROLA, DECYZJA PAWŁA 24.08.2026 (wariant A)

   TA ROLA NIE JEST ODCZYTEM Z KODU. Repozytorium jej nie ma i to jest jej powód:
   brzmienie zamawiającego — „zmienna form border jest do formularzy, tam ma byc jakas inna
   zmienna do borderow paneli". Dotąd pudełka pisane inline (karty rodzaju, kafle
   produkcji w mockupie) i nadpisanie płaskich obwiedni na końcu `pa-klasy.css` wołały
   `--pui-form-border`, czyli rolę POLA FORMULARZA: właściwa wartość, zła warstwa.
   To ta sama klasa błędu co skala wpisana w miejsce roli.

   CZEGO DS NIE MIAŁ, zmierzone: roli OGÓLNEJ na obwiednię pudełka nie ma wcale.
   Są tylko role rodzin, każda przy swoim komponencie — `--pui-accordion-border`,
   `--pui-table-border`, `--pui-testimonial-border`, `--pui-video-block-border`,
   `--pui-footer-guides-border`, `--pui-sub-navigation-border`. Pudełko, które nie
   należy do żadnej z tych rodzin, nie miało czego zawołać.

   WARTOŚCI NIE SĄ WYMYŚLONE, są z pomiaru pudełek, które na stronie stoją:
   jasne — `--static-gray-200`, tyle co akordeon i tabela; ciemne —
   `--static-overlay-light-100` (biel 10%), tyle co kafel pasa funkcji i pole czatu.
   Przełączenie idzie tym samym mechanizmem co cała warstwa mode: `[data-context]`.

   DO PRZENIESIENIA DO REPOZYTORIUM: rola musi wejść do tokens/mode/light.scss
   i tokens/mode/lightondark.scss, inaczej migracja zgubi ciemny wariant. Wpisane
   w dzienniku zmian jako pozycja rodzaju STRUKTURA. */
:root { --pui-panel-border: var(--static-gray-200); }
[data-context="on-dark"] { --pui-panel-border: var(--static-overlay-light-100); }
/* Powrót do wartości jasnej dla wysepki jasnej WEWNĄTRZ ciemnej — ta sama para
   selektorów, którą warstwa mode używa do wszystkich pozostałych ról. */
[data-context="on-light"],
[data-context="on-dark"].nav.is-fixed { --pui-panel-border: var(--static-gray-200); }

/* =============================================================================
   DŁUG TRANSKRYPCJI DOMKNIĘTY 04.09.2026 — 91 RÓL Z PACZKI REPOZYTORIUM
   =============================================================================
   Polecenie Pawła 04.09.2026: „na podstawie paczki popraw brakujące tokeny".
   Źródło: uploads/website-2-kod-dla-CD/app/assets/css/tokens/mode/light.scss
   oraz mode/lightondark.scss. Wartości WZIĘTE CO DO ZNAKU, żadna nie jest moja.

   PRZYRZĄD I POPULACJA: 1280 ról --pui-* zadeklarowanych w repo wobec 1202
   u nas; różnica przepisana tutaj. Wiersz pomiaru w rejestrze wykonawcy.

   PODZIAŁ, KTÓRY DECYDUJE O POPRAWNOŚCI: 58 ról ma tę samą wartość na obu
   powierzchniach (blok :root), 33 role są RÓŻNE na jasnej i ciemnej — te drugie
   dostają wpis także w [data-context="on-dark"]. Rola różna między warstwami,
   wpisana tylko raz, wygląda dobrze na jednej powierzchni i CICHO kłamie na drugiej.

   CZEGO TU NIE MA: 246 ról, które nasze arkusze WOŁAJĄ, a których nie ma
   ANI u nas, ANI w repo (sprawdzone trzema przyrządami: warstwy tokenów,
   scripts/tokens/tokens.json, lista stylelinta repo). Z tego 60 woła sam produkt
   i ich nie deklaruje — to DEFEKT PRODUKTU, nie nasz dług; 186 to nazwy istniejące
   tylko u nas. Lista i podział: docs/Rozbieznosci - kod vs katalog.md.
   ========================================================================== */

:root {
  /* DWIE role palety, na które wskazują przepisane role — brakowało ich w naszej kopii.
     Odczyt tokens/palette/main.scss.
     --static-red-550 doszła 04.09.2026 po recenzji i to jest ślad błędu przyrządu:
     kontrola zależności objęła tylko wartości JASNE, a 33 role różne między warstwami
     wniosły też wartości CIEMNE — ta jedna wołała stopień, którego nie mieliśmy.
     Pułapka 24 w rejestrze pomiarów wykonawcy. */
  --static-red-800: #931010FF;
  --static-red-550: #E93030FF;

  /* 58 RÓL O TEJ SAMEJ WARTOŚCI NA OBU POWIERZCHNIACH */
  --pui-banner-switch-border-end: var(--static-overlay-light-500);
  --pui-button-danger-faded-border: var(--static-red-50);
  --pui-button-danger-faded-border-disabled: var(--static-gray-300);
  --pui-button-danger-faded-border-hover: var(--static-red-100);
  --pui-button-danger-outline-bg-disabled: var(--static-overlay-light-0);
  --pui-button-danger-outline-border-disabled: var(--static-gray-300);
  --pui-button-danger-outline-fg-disabled: var(--static-gray-400);
  --pui-button-danger-solid-bg-loading: var(--static-red-800);
  --pui-button-danger-solid-border: var(--static-red-600);
  --pui-button-danger-solid-border-disabled: var(--static-gray-300);
  --pui-button-default-faded-border: var(--static-gray-100);
  --pui-button-default-faded-border-disabled: var(--static-gray-300);
  --pui-button-default-faded-border-hover: var(--static-gray-200);
  --pui-button-default-outline-bg-disabled: var(--static-overlay-light-0);
  --pui-button-default-solid-bg-loading: var(--static-gray-600);
  --pui-button-default-solid-border: var(--static-gray-800);
  --pui-button-default-solid-border-disabled: var(--static-gray-300);
  --pui-button-default-solid-border-hover: var(--static-gray-900);
  --pui-button-discord-solid-bg-loading: var(--static-discord-700);
  --pui-button-discord-solid-border-disabled: var(--static-gray-300);
  --pui-button-discord-solid-border-hover: var(--static-discord-600);
  --pui-button-primary-faded-border-disabled: var(--static-gray-300);
  --pui-button-purple-faded-border: var(--static-purple-50);
  --pui-button-purple-faded-border-disabled: var(--static-gray-300);
  --pui-button-purple-faded-border-hover: var(--static-purple-100);
  --pui-button-purple-outline-bg-disabled: var(--static-overlay-light-0);
  --pui-button-purple-outline-border-disabled: var(--static-gray-300);
  --pui-button-purple-outline-fg-disabled: var(--static-gray-400);
  --pui-button-purple-solid-bg-loading: var(--static-purple-700);
  --pui-button-purple-solid-border-disabled: var(--static-gray-300);
  --pui-button-secondary-faded-border-disabled: var(--static-gray-300);
  --pui-button-secondary-faded-border-hover: var(--static-orange-100);
  --pui-button-secondary-outline-bg-disabled: var(--static-overlay-light-0);
  --pui-button-secondary-outline-border-disabled: var(--static-gray-300);
  --pui-button-secondary-outline-fg-disabled: var(--static-gray-400);
  --pui-button-secondary-solid-bg-loading: var(--static-orange-700);
  --pui-button-secondary-solid-border: var(--static-orange-500);
  --pui-button-secondary-solid-border-disabled: var(--static-gray-300);
  --pui-button-secondary-solid-border-hover: var(--static-orange-600);
  --pui-community-box-discord-graphic-bg: #2B2D31FF;
  --pui-community-box-forum-graphic-bg: var(--static-gray-0);
  --pui-content-block-body-purple-border-start: var(--static-purple-500);
  --pui-content-block-body-purple-purple-bg-end: var(--static-purple-900);
  --pui-content-block-body-purple-purple-bg-start: var(--static-purple-950);
  --pui-feature-image-border-orange: var(--static-orange-600);
  --pui-feature-image-border-primary: var(--static-primary-600);
  --pui-feature-image-border-red: var(--static-red-600);
  --pui-section-cta-primary-gradient-h-end: #021710FF;
  --pui-section-cta-primary-gradient-h-start: #02171000;
  --pui-section-cta-purple-gradient-h-end: var(--static-purple-950);
  --pui-section-cta-purple-gradient-h-start: #02171000;
  --pui-section-heading-primary-arrow-end: var(--static-primary-500);
  --pui-section-heading-primary-arrow-solid: var(--pui-section-heading-primary-arrow-end);
  --pui-section-heading-primary-arrow-start: var(--static-primary-alpha-400);
  --pui-section-heading-purple-arrow-end: var(--static-purple-500);
  --pui-section-heading-purple-arrow-solid: var(--pui-section-heading-purple-arrow-end);
  --pui-section-heading-purple-arrow-start: var(--static-purple-500);
  --pui-surface-new-group-color: #FFFFFFFF;

  /* 33 ROLE RÓŻNE MIĘDZY POWIERZCHNIAMI — tu wartość JASNA */
  --pui-button-danger-faded-bg-disabled: var(--static-gray-300);
  --pui-button-danger-faded-bg-loading: var(--static-red-200);
  --pui-button-danger-faded-fg-disabled: var(--static-gray-400);
  --pui-button-danger-outline-bg-loading: var(--static-red-200);
  --pui-button-danger-solid-bg-disabled: var(--static-gray-300);
  --pui-button-danger-solid-border-hover: var(--static-red-650);
  --pui-button-danger-solid-fg-disabled: var(--static-gray-400);

  /* ROLE DOPISANE 04.09.2026 NA POLECENIE ZAMAWIAJĄCEGO („zrób to co możesz, resztę wytnij”):
     success = komplet danger na paśmie primary (alias z badge.scss), warning = komplet danger
     na paśmie orange (alias z badge.scss; orange nie ma stopnia 800 -> 850), info = SAM solid
     na paśmie blue (paleta blue ma tylko 400-700, więc faded/outline nie mają skąd wziąć tła;
     800 -> 700). Ghost dla siedmiu kolorów = alias ról faded: spoczynek bez tła, hover na
     faded-bg, active na faded-bg-hover. W PRODUKCIE TYCH RÓL NIE MA — to specyfikacja dla
     deweloperów, patrz dziennik zmian. saving i discord faded/outline/ghost WYCIĘTE z arkusza. */
  --pui-button-success-faded-border: var(--static-primary-50);
  --pui-button-success-faded-border-disabled: var(--static-gray-300);
  --pui-button-success-faded-border-hover: var(--static-primary-100);
  --pui-button-success-outline-bg-disabled: var(--static-overlay-light-0);
  --pui-button-success-outline-border-disabled: var(--static-gray-300);
  --pui-button-success-outline-fg-disabled: var(--static-gray-400);
  --pui-button-success-solid-bg-loading: var(--static-primary-800);
  --pui-button-success-solid-border: var(--static-primary-600);
  --pui-button-success-solid-border-disabled: var(--static-gray-300);
  --pui-button-success-faded-bg-disabled: var(--static-gray-300);
  --pui-button-success-faded-bg-loading: var(--static-primary-200);
  --pui-button-success-faded-fg-disabled: var(--static-gray-400);
  --pui-button-success-outline-bg-loading: var(--static-primary-200);
  --pui-button-success-solid-bg-disabled: var(--static-gray-300);
  --pui-button-success-solid-border-hover: var(--static-primary-650);
  --pui-button-success-solid-fg-disabled: var(--static-gray-400);
  --pui-button-warning-faded-border: var(--static-orange-50);
  --pui-button-warning-faded-border-disabled: var(--static-gray-300);
  --pui-button-warning-faded-border-hover: var(--static-orange-100);
  --pui-button-warning-outline-bg-disabled: var(--static-overlay-light-0);
  --pui-button-warning-outline-border-disabled: var(--static-gray-300);
  --pui-button-warning-outline-fg-disabled: var(--static-gray-400);
  --pui-button-warning-solid-bg-loading: var(--static-orange-850);
  --pui-button-warning-solid-border: var(--static-orange-600);
  --pui-button-warning-solid-border-disabled: var(--static-gray-300);
  --pui-button-warning-faded-bg-disabled: var(--static-gray-300);
  --pui-button-warning-faded-bg-loading: var(--static-orange-200);
  --pui-button-warning-faded-fg-disabled: var(--static-gray-400);
  --pui-button-warning-outline-bg-loading: var(--static-orange-200);
  --pui-button-warning-solid-bg-disabled: var(--static-gray-300);
  --pui-button-warning-solid-border-hover: var(--static-orange-650);
  --pui-button-warning-solid-fg-disabled: var(--static-gray-400);
  --pui-button-info-solid-bg-loading: var(--static-blue-700);
  --pui-button-info-solid-border: var(--static-blue-600);
  --pui-button-info-solid-border-disabled: var(--static-gray-300);
  --pui-button-info-solid-bg-disabled: var(--static-gray-300);
  --pui-button-info-solid-border-hover: var(--static-blue-650);
  --pui-button-info-solid-fg-disabled: var(--static-gray-400);
  /* ghost: aliasy ról faded, w obu warstwach, bo faded zmienia się z kontekstem */
  --pui-button-primary-ghost-fg: var(--pui-button-primary-faded-fg);
  --pui-button-primary-ghost-bg-hover: var(--pui-button-primary-faded-bg);
  --pui-button-primary-ghost-bg-active: var(--pui-button-primary-faded-bg-hover);
  --pui-button-secondary-ghost-fg: var(--pui-button-secondary-faded-fg);
  --pui-button-secondary-ghost-bg-hover: var(--pui-button-secondary-faded-bg);
  --pui-button-secondary-ghost-bg-active: var(--pui-button-secondary-faded-bg-hover);
  --pui-button-success-ghost-fg: var(--pui-button-success-faded-fg);
  --pui-button-success-ghost-bg-hover: var(--pui-button-success-faded-bg);
  --pui-button-success-ghost-bg-active: var(--pui-button-success-faded-bg-hover);
  --pui-button-warning-ghost-fg: var(--pui-button-warning-faded-fg);
  --pui-button-warning-ghost-bg-hover: var(--pui-button-warning-faded-bg);
  --pui-button-warning-ghost-bg-active: var(--pui-button-warning-faded-bg-hover);
  --pui-button-danger-ghost-fg: var(--pui-button-danger-faded-fg);
  --pui-button-danger-ghost-bg-hover: var(--pui-button-danger-faded-bg);
  --pui-button-danger-ghost-bg-active: var(--pui-button-danger-faded-bg-hover);
  --pui-button-default-ghost-fg: var(--pui-button-default-faded-fg);
  --pui-button-default-ghost-bg-hover: var(--pui-button-default-faded-bg);
  --pui-button-default-ghost-bg-active: var(--pui-button-default-faded-bg-hover);
  --pui-button-purple-ghost-fg: var(--pui-button-purple-faded-fg);
  --pui-button-purple-ghost-bg-hover: var(--pui-button-purple-faded-bg);
  --pui-button-purple-ghost-bg-active: var(--pui-button-purple-faded-bg-hover);
  --pui-button-default-faded-bg-disabled: var(--static-gray-100);
  --pui-button-default-faded-bg-loading: var(--static-gray-300);
  --pui-button-default-outline-bg-loading: var(--static-gray-200);
  --pui-button-discord-solid-bg-disabled: var(--static-gray-300);
  --pui-button-discord-solid-fg-disabled: var(--static-gray-400);
  --pui-button-primary-faded-bg-loading: var(--static-primary-200);
  --pui-button-primary-outline-bg-loading: var(--static-primary-200);
  --pui-button-purple-faded-bg-disabled: var(--static-gray-300);
  --pui-button-purple-faded-bg-loading: var(--static-purple-200);
  --pui-button-purple-faded-fg-disabled: var(--static-gray-400);
  --pui-button-purple-outline-bg-loading: var(--static-purple-200);
  --pui-button-purple-solid-bg-disabled: var(--static-gray-300);
  --pui-button-purple-solid-fg-disabled: var(--static-gray-400);
  --pui-button-secondary-faded-bg-disabled: var(--static-gray-300);
  --pui-button-secondary-faded-bg-loading: var(--static-orange-200);
  --pui-button-secondary-faded-fg-disabled: var(--static-gray-400);
  --pui-button-secondary-outline-bg-loading: var(--static-orange-200);
  --pui-button-secondary-solid-bg-disabled: var(--static-gray-300);
  --pui-button-secondary-solid-fg-disabled: var(--static-gray-400);
  --pui-content-block-body-purple-bg: var(--static-gray-0);
  --pui-content-block-body-purple-border-end: var(--static-gray-300);
  --pui-faq-bg: var(--static-gray-0);
  --pui-feature-image-bg: var(--static-gray-0);
  --pui-feature-image-bg-active: var(--static-gray-0);
  --pui-feature-image-border: var(--static-gray-300);

  /* DOMKNIĘCIE RODZINY TYPOGRAFII KLASOWEJ — 05.09.2026, plan domknięcia atomów.
     Dwanaście ról wołanych przez klasy `.text-variant-*` i `.font-*` nie istniało
     w żadnej warstwie ANI u nas, ANI w repozytorium (sprawdzone we wszystkich
     plikach tokenów kopii repo), więc dwanaście klas produktu generowało się
     i nic nie malowało. Podział na trzy grupy, każda z innym źródłem:

     (1) WAGI PISMA — nazwa stopnia JEST jego wartością w standardzie CSS, a plik
     kroju katalogu niesie Figtree w zakresie 300-900, więc wszystkie pięć wag ma
     realne wykroje. Potwierdzenie z produktu: reguła `p { font-weight: 300 }`
     w main.scss stoi na tej samej wartości, którą nazywa „light”.
     (2) BARWY STANU — wzór z rodziny przycisku: powodzenie czyta pasmo primary,
     ostrzeżenie orange, błąd red, informacja blue, w stopniu 600 (tak samo jak
     tło wariantu solid tych kolorów).
     (3) DWA ALIASY — `strong` i `default` to nazwy istniejących ról tekstu
     (nagłówek i treść). Klasa zostaje, bo produkt jej używa; rola wskazuje na
     rolę, żeby nie było DRUGIEJ wartości na tę samą barwę.

     Czego NIE dopisano: `--pui-text-secondary` — nazwa mówi o drugorzędności,
     a rodzina ma już `lighter` i `faded` na dwa stopnie ściszenia; trzeciego nie
     ma z czego wziąć. Klasa `.text-variant-secondary` WYCIĘTA z arkusza. */
  --pui-font-weight-light: 300;
  --pui-font-weight-regular: 400;
  --pui-font-weight-medium: 500;
  --pui-font-weight-semi-bold: 600;
  --pui-font-weight-bold: 700;
  --pui-text-strong: var(--pui-text-heading);
  --pui-text-default: var(--pui-text-body);
  --pui-text-success: var(--static-primary-600);
  --pui-text-warning: var(--static-orange-600);
  --pui-text-danger: var(--static-red-600);
  --pui-text-info: var(--static-blue-600);

  /* DOMKNIĘCIE RODZINY ODSTĘPU UKŁADU — 05.09.2026, rozstrzygnięcie zamawiającego
     („jeżeli nie ma wartości, to znaczy że jest błąd z tokenami i trzeba to naprawić”).
     28 klas produktu (.gap-* i .p-*) wołało role, których nie ma ani u nas, ani
     w repozytorium — czyli generowały się i nic nie malowały.

     PRZYPISANIE STOPNI DO SKALI: każdy stopień nazwany wskazuje na KROK ISTNIEJĄCEJ
     skali odstępów, więc ani jedna wartość nie jest wpisana wprost ani wymyślona.
     Progresja rośnie tak jak w rodzinie promienia — gęsto przy małych, luźniej przy
     dużych: 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96 px. Środek osi (base)
     to 24 px, czyli ten sam odstęp, który niesie kontener między kolumnami.

     Do zgłoszenia deweloperom: w produkcie tych ról nie ma, a klasy je wołają.
     Rozjazd jest naszym pomiarem, nie kolejką napraw — katalog jest specyfikacją. */
  --pui-layout-gap-6xs: var(--static-space-0-25x);
  --pui-layout-gap-5xs: var(--static-space-0-5x);
  --pui-layout-gap-4xs: var(--static-space-0-75x);
  --pui-layout-gap-3xs: var(--static-space-1x);
  --pui-layout-gap-2xs: var(--static-space-1-5x);
  --pui-layout-gap-xs: var(--static-space-2x);
  --pui-layout-gap-sm: var(--static-space-2-5x);
  --pui-layout-gap-base: var(--static-space-3x);
  --pui-layout-gap-lg: var(--static-space-4x);
  --pui-layout-gap-xl: var(--static-space-5x);
  --pui-layout-gap-2xl: var(--static-space-6x);
  --pui-layout-gap-3xl: var(--static-space-8x);
  --pui-layout-gap-4xl: var(--static-space-10x);
  --pui-layout-gap-5xl: var(--static-space-12x);
  --pui-layout-padding-6xs: var(--static-space-0-25x);
  --pui-layout-padding-5xs: var(--static-space-0-5x);
  --pui-layout-padding-4xs: var(--static-space-0-75x);
  --pui-layout-padding-3xs: var(--static-space-1x);
  --pui-layout-padding-2xs: var(--static-space-1-5x);
  --pui-layout-padding-xs: var(--static-space-2x);
  --pui-layout-padding-sm: var(--static-space-2-5x);
  --pui-layout-padding-base: var(--static-space-3x);
  --pui-layout-padding-lg: var(--static-space-4x);
  --pui-layout-padding-xl: var(--static-space-5x);
  --pui-layout-padding-2xl: var(--static-space-6x);
  --pui-layout-padding-3xl: var(--static-space-8x);
  --pui-layout-padding-4xl: var(--static-space-10x);
  --pui-layout-padding-5xl: var(--static-space-12x);

  /* DOMKNIĘCIE RODZINY MARKDOWN — 05.09.2026, rozstrzygnięcie zamawiającego
     („jeżeli nie ma wartości, to znaczy że jest błąd z tokenami i trzeba to naprawić”).
     44 role z 45 nie miały wartości ani u nas, ani w repozytorium — dziesięć klas
     dokumentacji generowało się i nic nie malowało. To był największy brak w katalogu.

     ŹRÓDŁO WARTOŚCI, tak jak przy odstępach: WSKAZANIE, nie wpisanie. Stopnie pisma
     idą na istniejącą skalę nagłówka i akapitu (h1…h6, p-base), grubość na rodzinę
     wag dopisaną tego samego dnia, odstępy na skalę odstępów, promień obrazu na skalę
     promienia. Rodzina markdown nie wnosi więc ANI JEDNEJ nowej wartości — mapuje
     nazwy dokumentacji na skale, które katalog już ma.

     Jedna rola bez wskazania: --pui-font-family-mono. Krój o stałej szerokości nie
     istnieje w tym systemie w żadnej postaci (katalog używa roli --cat-mono, która
     wskazuje na krój podstawowy), więc rola czyta ogólny stos systemowy — i to jest
     jedyne miejsce tej rodziny, w którym stoi wartość, a nie wskazanie.

     Do zgłoszenia deweloperom: w produkcie tych ról nie ma, a klasy je wołają. */
  --pui-markdown-h1-font-size: var(--pui-text-h1-font-size);
  --pui-markdown-h1-line-height: var(--pui-text-h1-line-height);
  --pui-markdown-h1-letter-spacing: var(--pui-text-h1-letter-spacing);
  --pui-markdown-h1-font-weight: var(--pui-font-weight-semi-bold);
  --pui-markdown-h1-margin-bottom: var(--static-space-2x);
  --pui-markdown-h2-font-size: var(--pui-text-h2-font-size);
  --pui-markdown-h2-line-height: var(--pui-text-h2-line-height);
  --pui-markdown-h2-letter-spacing: var(--pui-text-h2-letter-spacing);
  --pui-markdown-h2-font-weight: var(--pui-font-weight-semi-bold);
  --pui-markdown-h2-margin-top: var(--static-space-4x);
  --pui-markdown-h2-margin-bottom: var(--static-space-2x);
  --pui-markdown-h3-font-size: var(--pui-text-h3-font-size);
  --pui-markdown-h3-line-height: var(--pui-text-h3-line-height);
  --pui-markdown-h3-letter-spacing: var(--pui-text-h3-letter-spacing);
  --pui-markdown-h3-font-weight: var(--pui-font-weight-semi-bold);
  --pui-markdown-h3-margin-top: var(--static-space-4x);
  --pui-markdown-h3-margin-bottom: var(--static-space-2x);
  --pui-markdown-h4-font-size: var(--pui-text-h4-font-size);
  --pui-markdown-h4-line-height: var(--pui-text-h4-line-height);
  --pui-markdown-h4-letter-spacing: var(--pui-text-h4-letter-spacing);
  --pui-markdown-h4-font-weight: var(--pui-font-weight-semi-bold);
  --pui-markdown-h4-margin-top: var(--static-space-4x);
  --pui-markdown-h4-margin-bottom: var(--static-space-2x);
  --pui-markdown-h5-font-size: var(--pui-text-h5-font-size);
  --pui-markdown-h5-line-height: var(--pui-text-h5-line-height);
  --pui-markdown-h5-letter-spacing: var(--pui-text-h5-letter-spacing);
  /* ROZDZIAŁY DOKUMENTU GRUBSZE, 06.09.2026, polecenie zamawiającego („nagłówek h2 niech będzie
     grubszy"). Rozdziały plików paczki składają się na ten stopień, więc zmiana wchodzi tutaj,
     nie na stronie. Waga z ROLI (bold, 700), nie literał: rodzina ma dwie wagi i obie mają nazwę. */
  --pui-markdown-h5-font-weight: var(--pui-font-weight-bold);
  --pui-markdown-h5-margin-top: var(--static-space-4x);
  /* ODSTĘP POD ROZDZIAŁEM WIĘKSZY, 06.09.2026, polecenie zamawiającego. Ze space-2x (16 px)
     na space-3x (24 px). Stopień ze SKALI, nie liczba: skala ma 16 i 24, a wartość pośrednia
     byłaby wpisana obok systemu. Górny odstęp rozdziału zostaje 32 px, więc nagłówek nadal
     należy wyraźniej do tego, co pod nim, niż do tego, co nad. */
  --pui-markdown-h5-margin-bottom: var(--static-space-3x);
  --pui-markdown-h6-font-size: var(--pui-text-h6-font-size);
  --pui-markdown-h6-line-height: var(--pui-text-h6-line-height);
  --pui-markdown-h6-letter-spacing: var(--pui-text-h6-letter-spacing);
  --pui-markdown-h6-font-weight: var(--pui-font-weight-semi-bold);
  --pui-markdown-h6-margin-top: var(--static-space-4x);
  --pui-markdown-h6-margin-bottom: var(--static-space-2x);
  /* AKAPIT MARKDOWNU: 17 px WPROST, 06.09.2026, polecenie zamawiającego („masz teraz 20 px,
     ustaw 17"). Wartość jest POLECONA, nie wymyślona, i to jest warunek jej wpisania.

     DLACZEGO LITERAŁ, A NIE ROLA — i to jest jedyny powód, dla którego wolno tu wpisać liczbę:
     ŻADNA rola skali tekstu nie daje 17 px na wszystkich progach. Zmierzone w arkuszu:
     p-base 15/14/15/15/15/15/14 · p-lg 17/15/15/16/17/16/15 · p-xlg 20/17/18/18/20/18/17.
     Każde wskazanie daje inną wartość na innym progu, a polecenie mówi JEDNĄ liczbę.
     Rodzina markdownu stoi w :root i w kontekście on-dark, a NIE w blokach progowych — czyli
     sama nie skaluje się wcale i literał jest tu jednakowy wszędzie, co jest zgodne z poleceniem.

     DROGA POŚREDNIA, KTÓRA NIE ZADZIAŁAŁA I DLATEGO O NIEJ PISZĘ: dwie próby wskazania na role
     (p-lg, potem p-xlg) dały najpierw ZERO zmiany (p-lg = p-base na progu pomiaru), a potem
     20 px na najszerszym progu, czyli powyżej zakresu. Trzecia próba jest wartością wprost.

     INTERLINIA 28 px, też wprost i z tego samego powodu: stopień bez interlinii daje ciasny
     wiersz, a interlinia z innej rodziny rozjechałaby się z tym stopniem przy pierwszej zmianie.

     PIERWSZA PRÓBA (p-lg) BYŁA ZMIANĄ BEZ SKUTKU i to jest najważniejsza rzecz w tej nocie:
     na progu, na którym mierzono render, p-lg ma DOKŁADNIE TYLE SAMO co p-base, czyli 15 px.
     Podmiana wskazania nie zmieniła ani piksela, a ja podałem „15 → 17 px" — liczbę odczytaną
     z ARKUSZA, z bloku :root, nie z renderu. Zasada: wartość mierzy się przy renderze.
     Pomiar arkusza po progach: p-lg 17/15/15/16/17/16/15 px, p-xlg 20/17/18/18/20/18/17 px.

     DLACZEGO ROLA, A NIE LITERAŁ 18 px: rodzina markdownu stoi w :root i w kontekście
     on-dark, a NIE w blokach progowych — czyli sama nie skaluje się wcale. Całe skalowanie
     bierze z roli, na którą wskazuje. Literał 18 px zamroziłby jeden stopień na wszystkich
     progach, w tym na telefonie.

     ZOSTAJE DO ROZSTRZYGNIĘCIA: na najszerszym progu p-xlg daje 20 px, czyli o piksel powyżej
     podanego zakresu. Zgłoszone, nie ukryte.
     WSKAZANIE NA ROLĘ, NIE LITERAŁ 18 px: p-lg skaluje się z progami (15 px na telefonie,
     16 na tablecie, 17 na laptopie i desktopie), a literał wpisany w token zostałby wartością
     desktopową na telefonie — zasada 3a, ta sama, która dotyczy skal w komponentach.
     Interlinia idzie tą samą drogą: p-base 26 px → p-lg 30 px, bo stopień bez interlinii
     daje ciasny wiersz przy większym piśmie.
     CZYTELNIK ROLI: klasa .markdown-paragraph, a przez nią strona dokumentów paczki
     i atom markdownu. Zmiana nie dotyka typografii produktu (--pui-text-*). */
  /* KOD, TABELA I POGRUBIENIE W MARKDOWNIE — role dołożone 06.09.2026, polecenie
     zamawiającego: „kod w markdown też powinien być formatowany, jeżeli nie mamy CSS to dopisz
     do markdown stylowania (…) tabelka w markdown też nie jest ostylowana".

     ZMIERZONE PRZED DOŁOŻENIEM: rodzina markdownu miała 86 ról i ANI JEDNEJ dla kodu, tabeli,
     cytatu i pogrubienia. Klasa .markdown-code ustawiała JEDNĄ własność (rodzinę pisma), więc
     blok kodu wyglądał jak akapit innym pismem: bez tła, bez wyściółki, bez obwiedni.
     Tabela nie miała nawet klasy.

     WSZYSTKIE WARTOŚCI WSKAZUJĄ NA ISTNIEJĄCE ROLE, żadna nie jest literałem: powierzchnie
     z rodziny surface, obwiednia z panelu, promień i odstępy ze skali. Dzięki temu rodzina
     markdownu zmienia się razem z resztą systemu, a nie obok niej. */
  /* POWIERZCHNIA Z ROLI, KTÓRA ISTNIEJE — poprawka w tej samej turze, po pomiarze renderu:
     pierwsza wersja wskazywała na --pui-surface-solid-secondary, a ta rola JEST PUSTA
     (zmierzone: getPropertyValue zwraca ""). Skutek był cichy dokładnie tak, jak opisuje
     to reguła o rolach wołanych i niezdefiniowanych: deklaracja wypada, element bierze
     tło przezroczyste i wygląda jak decyzja projektowa, nie jak brak.
     --static-gray-100 to najbliższa istniejąca powierzchnia jaśniejsza od tła strony. */
  --pui-markdown-code-bg: var(--static-gray-100);
  --pui-markdown-code-fg: var(--pui-text-heading);
  --pui-markdown-code-padding: var(--static-space-3x);
  --pui-markdown-code-radius: var(--pui-ui-radius-lg);
  --pui-markdown-code-border: var(--pui-panel-border);
  --pui-markdown-code-font-size: var(--pui-text-p-sm-font-size);
  --pui-markdown-code-line-height: var(--pui-text-p-base-line-height);
  --pui-markdown-code-inline-bg: var(--static-overlay-dark-50);
  --pui-markdown-code-inline-padding: var(--static-space-0-25x) var(--static-space-0-75x);
  --pui-markdown-code-inline-radius: var(--pui-ui-radius-sm);
  --pui-markdown-table-cell-padding: var(--static-space-1-5x);
  --pui-markdown-table-gap: var(--static-space-2x);
  --pui-markdown-table-border: var(--pui-panel-border);
  --pui-markdown-table-header-bg: var(--static-gray-50);
  --pui-markdown-table-header-fg: var(--pui-text-heading);
  --pui-markdown-table-header-weight: var(--pui-font-weight-semi-bold);
  --pui-markdown-strong-weight: var(--pui-font-weight-semi-bold);
  --pui-markdown-strong-fg: var(--pui-text-heading);
  --pui-markdown-paragraph-font-size: 17px;
  --pui-markdown-paragraph-line-height: 28px;
  --pui-markdown-paragraph-letter-spacing: var(--pui-text-p-base-letter-spacing);
  --pui-markdown-paragraph-font-weight: var(--pui-font-weight-light);
  --pui-markdown-paragraph-margin-bottom: var(--static-space-2x);
  --pui-markdown-list-margin-bottom: var(--static-space-2x);
  --pui-markdown-image-margin-bottom: var(--static-space-3x);
  --pui-markdown-image-radius: var(--pui-ui-radius-3xl);
  --pui-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pui-text-logo: #000000FF;
}

/* Te same 33 role w kontekście ciemnym. Wartości z mode/lightondark.scss. */
[data-context="on-dark"] {
  --pui-button-danger-faded-bg-disabled: var(--static-overlay-light-100);
  --pui-button-danger-faded-bg-loading: var(--static-overlay-light-200);
  --pui-button-danger-faded-fg-disabled: var(--static-gray-650);
  --pui-button-danger-outline-bg-loading: var(--static-overlay-light-200);
  --pui-button-danger-solid-bg-disabled: var(--static-overlay-light-100);
  --pui-button-danger-solid-border-hover: var(--static-red-550);
  --pui-button-danger-solid-fg-disabled: var(--static-gray-650);

  /* ROLE DOPISANE 04.09.2026 NA POLECENIE ZAMAWIAJĄCEGO („zrób to co możesz, resztę wytnij”):
     success = komplet danger na paśmie primary (alias z badge.scss), warning = komplet danger
     na paśmie orange (alias z badge.scss; orange nie ma stopnia 800 -> 850), info = SAM solid
     na paśmie blue (paleta blue ma tylko 400-700, więc faded/outline nie mają skąd wziąć tła;
     800 -> 700). Ghost dla siedmiu kolorów = alias ról faded: spoczynek bez tła, hover na
     faded-bg, active na faded-bg-hover. W PRODUKCIE TYCH RÓL NIE MA — to specyfikacja dla
     deweloperów, patrz dziennik zmian. saving i discord faded/outline/ghost WYCIĘTE z arkusza. */
  --pui-button-success-faded-bg-disabled: var(--static-overlay-light-100);
  --pui-button-success-faded-bg-loading: var(--static-overlay-light-200);
  --pui-button-success-faded-fg-disabled: var(--static-gray-650);
  --pui-button-success-outline-bg-loading: var(--static-overlay-light-200);
  --pui-button-success-solid-bg-disabled: var(--static-overlay-light-100);
  --pui-button-success-solid-border-hover: var(--static-primary-550);
  --pui-button-success-solid-fg-disabled: var(--static-gray-650);
  --pui-button-warning-faded-bg-disabled: var(--static-overlay-light-100);
  --pui-button-warning-faded-bg-loading: var(--static-overlay-light-200);
  --pui-button-warning-faded-fg-disabled: var(--static-gray-650);
  --pui-button-warning-outline-bg-loading: var(--static-overlay-light-200);
  --pui-button-warning-solid-bg-disabled: var(--static-overlay-light-100);
  /* Pasmo orange nie ma stopnia 550 (ma 500 i 600) — siostry on-dark idą stopniem
     550, bo primary i red go mają. Rola czytała nazwę nieistniejącą, więc obwiednia
     hoveru wariantu warning na ciemnej powierzchni nie miała wartości. Zmierzone
     05.09.2026; poprawione na najbliższy jaśniejszy stopień, który pasmo MA. */
  --pui-button-warning-solid-border-hover: var(--static-orange-500);
  --pui-button-warning-solid-fg-disabled: var(--static-gray-650);
  --pui-button-info-solid-bg-disabled: var(--static-overlay-light-100);
  --pui-button-info-solid-border-hover: var(--static-blue-550);
  --pui-button-info-solid-fg-disabled: var(--static-gray-650);
  /* ghost: aliasy ról faded, w obu warstwach, bo faded zmienia się z kontekstem */
  --pui-button-primary-ghost-fg: var(--pui-button-primary-faded-fg);
  --pui-button-primary-ghost-bg-hover: var(--pui-button-primary-faded-bg);
  --pui-button-primary-ghost-bg-active: var(--pui-button-primary-faded-bg-hover);
  --pui-button-secondary-ghost-fg: var(--pui-button-secondary-faded-fg);
  --pui-button-secondary-ghost-bg-hover: var(--pui-button-secondary-faded-bg);
  --pui-button-secondary-ghost-bg-active: var(--pui-button-secondary-faded-bg-hover);
  --pui-button-success-ghost-fg: var(--pui-button-success-faded-fg);
  --pui-button-success-ghost-bg-hover: var(--pui-button-success-faded-bg);
  --pui-button-success-ghost-bg-active: var(--pui-button-success-faded-bg-hover);
  --pui-button-warning-ghost-fg: var(--pui-button-warning-faded-fg);
  --pui-button-warning-ghost-bg-hover: var(--pui-button-warning-faded-bg);
  --pui-button-warning-ghost-bg-active: var(--pui-button-warning-faded-bg-hover);
  --pui-button-danger-ghost-fg: var(--pui-button-danger-faded-fg);
  --pui-button-danger-ghost-bg-hover: var(--pui-button-danger-faded-bg);
  --pui-button-danger-ghost-bg-active: var(--pui-button-danger-faded-bg-hover);
  --pui-button-default-ghost-fg: var(--pui-button-default-faded-fg);
  --pui-button-default-ghost-bg-hover: var(--pui-button-default-faded-bg);
  --pui-button-default-ghost-bg-active: var(--pui-button-default-faded-bg-hover);
  --pui-button-purple-ghost-fg: var(--pui-button-purple-faded-fg);
  --pui-button-purple-ghost-bg-hover: var(--pui-button-purple-faded-bg);
  --pui-button-purple-ghost-bg-active: var(--pui-button-purple-faded-bg-hover);
  --pui-button-default-faded-bg-disabled: var(--static-overlay-light-100);
  --pui-button-default-faded-bg-loading: var(--static-overlay-light-200);
  --pui-button-default-outline-bg-loading: var(--static-overlay-light-200);
  --pui-button-discord-solid-bg-disabled: var(--static-overlay-light-100);
  --pui-button-discord-solid-fg-disabled: var(--static-gray-650);
  --pui-button-primary-faded-bg-loading: var(--static-overlay-light-200);
  --pui-button-primary-outline-bg-loading: var(--static-overlay-light-200);
  --pui-button-purple-faded-bg-disabled: var(--static-overlay-light-100);
  --pui-button-purple-faded-bg-loading: var(--static-overlay-light-200);
  --pui-button-purple-faded-fg-disabled: var(--static-gray-650);
  --pui-button-purple-outline-bg-loading: var(--static-overlay-light-200);
  --pui-button-purple-solid-bg-disabled: var(--static-overlay-light-100);
  --pui-button-purple-solid-fg-disabled: var(--static-gray-650);
  --pui-button-secondary-faded-bg-disabled: var(--static-overlay-light-100);
  --pui-button-secondary-faded-bg-loading: var(--static-overlay-light-200);
  --pui-button-secondary-faded-fg-disabled: var(--static-gray-650);
  --pui-button-secondary-outline-bg-loading: var(--static-overlay-light-200);
  --pui-button-secondary-solid-bg-disabled: var(--static-overlay-light-100);
  --pui-button-secondary-solid-fg-disabled: var(--static-gray-650);
  --pui-content-block-body-purple-bg: var(--static-gray-950);
  --pui-content-block-body-purple-border-end: var(--static-gray-700);
  --pui-faq-bg: var(--static-gray-950);
  --pui-feature-image-bg: var(--static-gray-950);
  --pui-feature-image-bg-active: var(--static-gray-950);
  --pui-feature-image-border: var(--static-gray-700);

  /* DOMKNIĘCIE RODZINY ODSTĘPU UKŁADU — 05.09.2026, rozstrzygnięcie zamawiającego
     („jeżeli nie ma wartości, to znaczy że jest błąd z tokenami i trzeba to naprawić”).
     28 klas produktu (.gap-* i .p-*) wołało role, których nie ma ani u nas, ani
     w repozytorium — czyli generowały się i nic nie malowały.

     PRZYPISANIE STOPNI DO SKALI: każdy stopień nazwany wskazuje na KROK ISTNIEJĄCEJ
     skali odstępów, więc ani jedna wartość nie jest wpisana wprost ani wymyślona.
     Progresja rośnie tak jak w rodzinie promienia — gęsto przy małych, luźniej przy
     dużych: 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96 px. Środek osi (base)
     to 24 px, czyli ten sam odstęp, który niesie kontener między kolumnami.

     Do zgłoszenia deweloperom: w produkcie tych ról nie ma, a klasy je wołają.
     Rozjazd jest naszym pomiarem, nie kolejką napraw — katalog jest specyfikacją. */
  --pui-layout-gap-6xs: var(--static-space-0-25x);
  --pui-layout-gap-5xs: var(--static-space-0-5x);
  --pui-layout-gap-4xs: var(--static-space-0-75x);
  --pui-layout-gap-3xs: var(--static-space-1x);
  --pui-layout-gap-2xs: var(--static-space-1-5x);
  --pui-layout-gap-xs: var(--static-space-2x);
  --pui-layout-gap-sm: var(--static-space-2-5x);
  --pui-layout-gap-base: var(--static-space-3x);
  --pui-layout-gap-lg: var(--static-space-4x);
  --pui-layout-gap-xl: var(--static-space-5x);
  --pui-layout-gap-2xl: var(--static-space-6x);
  --pui-layout-gap-3xl: var(--static-space-8x);
  --pui-layout-gap-4xl: var(--static-space-10x);
  --pui-layout-gap-5xl: var(--static-space-12x);
  --pui-layout-padding-6xs: var(--static-space-0-25x);
  --pui-layout-padding-5xs: var(--static-space-0-5x);
  --pui-layout-padding-4xs: var(--static-space-0-75x);
  --pui-layout-padding-3xs: var(--static-space-1x);
  --pui-layout-padding-2xs: var(--static-space-1-5x);
  --pui-layout-padding-xs: var(--static-space-2x);
  --pui-layout-padding-sm: var(--static-space-2-5x);
  --pui-layout-padding-base: var(--static-space-3x);
  --pui-layout-padding-lg: var(--static-space-4x);
  --pui-layout-padding-xl: var(--static-space-5x);
  --pui-layout-padding-2xl: var(--static-space-6x);
  --pui-layout-padding-3xl: var(--static-space-8x);
  --pui-layout-padding-4xl: var(--static-space-10x);
  --pui-layout-padding-5xl: var(--static-space-12x);

  /* DOMKNIĘCIE RODZINY MARKDOWN — 05.09.2026, rozstrzygnięcie zamawiającego
     („jeżeli nie ma wartości, to znaczy że jest błąd z tokenami i trzeba to naprawić”).
     44 role z 45 nie miały wartości ani u nas, ani w repozytorium — dziesięć klas
     dokumentacji generowało się i nic nie malowało. To był największy brak w katalogu.

     ŹRÓDŁO WARTOŚCI, tak jak przy odstępach: WSKAZANIE, nie wpisanie. Stopnie pisma
     idą na istniejącą skalę nagłówka i akapitu (h1…h6, p-base), grubość na rodzinę
     wag dopisaną tego samego dnia, odstępy na skalę odstępów, promień obrazu na skalę
     promienia. Rodzina markdown nie wnosi więc ANI JEDNEJ nowej wartości — mapuje
     nazwy dokumentacji na skale, które katalog już ma.

     Jedna rola bez wskazania: --pui-font-family-mono. Krój o stałej szerokości nie
     istnieje w tym systemie w żadnej postaci (katalog używa roli --cat-mono, która
     wskazuje na krój podstawowy), więc rola czyta ogólny stos systemowy — i to jest
     jedyne miejsce tej rodziny, w którym stoi wartość, a nie wskazanie.

     Do zgłoszenia deweloperom: w produkcie tych ról nie ma, a klasy je wołają. */
  --pui-markdown-h1-font-size: var(--pui-text-h1-font-size);
  --pui-markdown-h1-line-height: var(--pui-text-h1-line-height);
  --pui-markdown-h1-letter-spacing: var(--pui-text-h1-letter-spacing);
  --pui-markdown-h1-font-weight: var(--pui-font-weight-semi-bold);
  --pui-markdown-h1-margin-bottom: var(--static-space-2x);
  --pui-markdown-h2-font-size: var(--pui-text-h2-font-size);
  --pui-markdown-h2-line-height: var(--pui-text-h2-line-height);
  --pui-markdown-h2-letter-spacing: var(--pui-text-h2-letter-spacing);
  --pui-markdown-h2-font-weight: var(--pui-font-weight-semi-bold);
  --pui-markdown-h2-margin-top: var(--static-space-4x);
  --pui-markdown-h2-margin-bottom: var(--static-space-2x);
  --pui-markdown-h3-font-size: var(--pui-text-h3-font-size);
  --pui-markdown-h3-line-height: var(--pui-text-h3-line-height);
  --pui-markdown-h3-letter-spacing: var(--pui-text-h3-letter-spacing);
  --pui-markdown-h3-font-weight: var(--pui-font-weight-semi-bold);
  --pui-markdown-h3-margin-top: var(--static-space-4x);
  --pui-markdown-h3-margin-bottom: var(--static-space-2x);
  --pui-markdown-h4-font-size: var(--pui-text-h4-font-size);
  --pui-markdown-h4-line-height: var(--pui-text-h4-line-height);
  --pui-markdown-h4-letter-spacing: var(--pui-text-h4-letter-spacing);
  --pui-markdown-h4-font-weight: var(--pui-font-weight-semi-bold);
  --pui-markdown-h4-margin-top: var(--static-space-4x);
  --pui-markdown-h4-margin-bottom: var(--static-space-2x);
  --pui-markdown-h5-font-size: var(--pui-text-h5-font-size);
  --pui-markdown-h5-line-height: var(--pui-text-h5-line-height);
  --pui-markdown-h5-letter-spacing: var(--pui-text-h5-letter-spacing);
  /* ROZDZIAŁY DOKUMENTU GRUBSZE, 06.09.2026, polecenie zamawiającego („nagłówek h2 niech będzie
     grubszy"). Rozdziały plików paczki składają się na ten stopień, więc zmiana wchodzi tutaj,
     nie na stronie. Waga z ROLI (bold, 700), nie literał: rodzina ma dwie wagi i obie mają nazwę. */
  --pui-markdown-h5-font-weight: var(--pui-font-weight-bold);
  --pui-markdown-h5-margin-top: var(--static-space-4x);
  /* ODSTĘP POD ROZDZIAŁEM WIĘKSZY, 06.09.2026, polecenie zamawiającego. Ze space-2x (16 px)
     na space-3x (24 px). Stopień ze SKALI, nie liczba: skala ma 16 i 24, a wartość pośrednia
     byłaby wpisana obok systemu. Górny odstęp rozdziału zostaje 32 px, więc nagłówek nadal
     należy wyraźniej do tego, co pod nim, niż do tego, co nad. */
  --pui-markdown-h5-margin-bottom: var(--static-space-3x);
  --pui-markdown-h6-font-size: var(--pui-text-h6-font-size);
  --pui-markdown-h6-line-height: var(--pui-text-h6-line-height);
  --pui-markdown-h6-letter-spacing: var(--pui-text-h6-letter-spacing);
  --pui-markdown-h6-font-weight: var(--pui-font-weight-semi-bold);
  --pui-markdown-h6-margin-top: var(--static-space-4x);
  --pui-markdown-h6-margin-bottom: var(--static-space-2x);
  /* AKAPIT MARKDOWNU: 17 px WPROST, 06.09.2026, polecenie zamawiającego („masz teraz 20 px,
     ustaw 17"). Wartość jest POLECONA, nie wymyślona, i to jest warunek jej wpisania.

     DLACZEGO LITERAŁ, A NIE ROLA — i to jest jedyny powód, dla którego wolno tu wpisać liczbę:
     ŻADNA rola skali tekstu nie daje 17 px na wszystkich progach. Zmierzone w arkuszu:
     p-base 15/14/15/15/15/15/14 · p-lg 17/15/15/16/17/16/15 · p-xlg 20/17/18/18/20/18/17.
     Każde wskazanie daje inną wartość na innym progu, a polecenie mówi JEDNĄ liczbę.
     Rodzina markdownu stoi w :root i w kontekście on-dark, a NIE w blokach progowych — czyli
     sama nie skaluje się wcale i literał jest tu jednakowy wszędzie, co jest zgodne z poleceniem.

     DROGA POŚREDNIA, KTÓRA NIE ZADZIAŁAŁA I DLATEGO O NIEJ PISZĘ: dwie próby wskazania na role
     (p-lg, potem p-xlg) dały najpierw ZERO zmiany (p-lg = p-base na progu pomiaru), a potem
     20 px na najszerszym progu, czyli powyżej zakresu. Trzecia próba jest wartością wprost.

     INTERLINIA 28 px, też wprost i z tego samego powodu: stopień bez interlinii daje ciasny
     wiersz, a interlinia z innej rodziny rozjechałaby się z tym stopniem przy pierwszej zmianie.

     PIERWSZA PRÓBA (p-lg) BYŁA ZMIANĄ BEZ SKUTKU i to jest najważniejsza rzecz w tej nocie:
     na progu, na którym mierzono render, p-lg ma DOKŁADNIE TYLE SAMO co p-base, czyli 15 px.
     Podmiana wskazania nie zmieniła ani piksela, a ja podałem „15 → 17 px" — liczbę odczytaną
     z ARKUSZA, z bloku :root, nie z renderu. Zasada: wartość mierzy się przy renderze.
     Pomiar arkusza po progach: p-lg 17/15/15/16/17/16/15 px, p-xlg 20/17/18/18/20/18/17 px.

     DLACZEGO ROLA, A NIE LITERAŁ 18 px: rodzina markdownu stoi w :root i w kontekście
     on-dark, a NIE w blokach progowych — czyli sama nie skaluje się wcale. Całe skalowanie
     bierze z roli, na którą wskazuje. Literał 18 px zamroziłby jeden stopień na wszystkich
     progach, w tym na telefonie.

     ZOSTAJE DO ROZSTRZYGNIĘCIA: na najszerszym progu p-xlg daje 20 px, czyli o piksel powyżej
     podanego zakresu. Zgłoszone, nie ukryte.
     WSKAZANIE NA ROLĘ, NIE LITERAŁ 18 px: p-lg skaluje się z progami (15 px na telefonie,
     16 na tablecie, 17 na laptopie i desktopie), a literał wpisany w token zostałby wartością
     desktopową na telefonie — zasada 3a, ta sama, która dotyczy skal w komponentach.
     Interlinia idzie tą samą drogą: p-base 26 px → p-lg 30 px, bo stopień bez interlinii
     daje ciasny wiersz przy większym piśmie.
     CZYTELNIK ROLI: klasa .markdown-paragraph, a przez nią strona dokumentów paczki
     i atom markdownu. Zmiana nie dotyka typografii produktu (--pui-text-*). */
  /* KOD, TABELA I POGRUBIENIE W MARKDOWNIE — role dołożone 06.09.2026, polecenie
     zamawiającego: „kod w markdown też powinien być formatowany, jeżeli nie mamy CSS to dopisz
     do markdown stylowania (…) tabelka w markdown też nie jest ostylowana".

     ZMIERZONE PRZED DOŁOŻENIEM: rodzina markdownu miała 86 ról i ANI JEDNEJ dla kodu, tabeli,
     cytatu i pogrubienia. Klasa .markdown-code ustawiała JEDNĄ własność (rodzinę pisma), więc
     blok kodu wyglądał jak akapit innym pismem: bez tła, bez wyściółki, bez obwiedni.
     Tabela nie miała nawet klasy.

     WSZYSTKIE WARTOŚCI WSKAZUJĄ NA ISTNIEJĄCE ROLE, żadna nie jest literałem: powierzchnie
     z rodziny surface, obwiednia z panelu, promień i odstępy ze skali. Dzięki temu rodzina
     markdownu zmienia się razem z resztą systemu, a nie obok niej. */
  /* POWIERZCHNIA Z ROLI, KTÓRA ISTNIEJE — poprawka w tej samej turze, po pomiarze renderu:
     pierwsza wersja wskazywała na --pui-surface-solid-secondary, a ta rola JEST PUSTA
     (zmierzone: getPropertyValue zwraca ""). Skutek był cichy dokładnie tak, jak opisuje
     to reguła o rolach wołanych i niezdefiniowanych: deklaracja wypada, element bierze
     tło przezroczyste i wygląda jak decyzja projektowa, nie jak brak.
     --static-gray-100 to najbliższa istniejąca powierzchnia jaśniejsza od tła strony. */
  --pui-markdown-code-bg: var(--static-gray-100);
  --pui-markdown-code-fg: var(--pui-text-heading);
  --pui-markdown-code-padding: var(--static-space-3x);
  --pui-markdown-code-radius: var(--pui-ui-radius-lg);
  --pui-markdown-code-border: var(--pui-panel-border);
  --pui-markdown-code-font-size: var(--pui-text-p-sm-font-size);
  --pui-markdown-code-line-height: var(--pui-text-p-base-line-height);
  --pui-markdown-code-inline-bg: var(--static-overlay-dark-50);
  --pui-markdown-code-inline-padding: var(--static-space-0-25x) var(--static-space-0-75x);
  --pui-markdown-code-inline-radius: var(--pui-ui-radius-sm);
  --pui-markdown-table-cell-padding: var(--static-space-1-5x);
  --pui-markdown-table-gap: var(--static-space-2x);
  --pui-markdown-table-border: var(--pui-panel-border);
  --pui-markdown-table-header-bg: var(--static-gray-50);
  --pui-markdown-table-header-fg: var(--pui-text-heading);
  --pui-markdown-table-header-weight: var(--pui-font-weight-semi-bold);
  --pui-markdown-strong-weight: var(--pui-font-weight-semi-bold);
  --pui-markdown-strong-fg: var(--pui-text-heading);
  --pui-markdown-paragraph-font-size: 17px;
  --pui-markdown-paragraph-line-height: 28px;
  --pui-markdown-paragraph-letter-spacing: var(--pui-text-p-base-letter-spacing);
  --pui-markdown-paragraph-font-weight: var(--pui-font-weight-light);
  --pui-markdown-paragraph-margin-bottom: var(--static-space-2x);
  --pui-markdown-list-margin-bottom: var(--static-space-2x);
  --pui-markdown-image-margin-bottom: var(--static-space-3x);
  --pui-markdown-image-radius: var(--pui-ui-radius-3xl);
  --pui-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pui-text-logo: #FFFFFFFF;
}