/* =============================================================================
   Fundacja Wstawaj Alicja - tokeny design systemu
   ============================================================================= */

/* --- 1. PRYMITYWY --------------------------------------------------------- */
:root {

   /* blue */
   --fdn-blue-50: #E5F8FF;
   --fdn-blue-100: #C2EDFF;
   --fdn-blue-200: #85DBFF;
   --fdn-blue-300: #3DC7FF;
   --fdn-blue-400: #05B6FF;
   --fdn-blue-500: #00A1E3;
   --fdn-blue-600: #007DB0;
   --fdn-blue-700: #006994;
   --fdn-blue-800: #005070;
   --fdn-blue-900: #003347;

   /* lime */
   --fdn-lime-50: #F6FCE8;
   --fdn-lime-100: #E7F7BF;
   --fdn-lime-200: #CEF080;
   --fdn-lime-300: #B9E949;
   --fdn-lime-400: #B3E739;
   --fdn-lime-500: #ADE529;
   --fdn-lime-600: #86B616;
   --fdn-lime-650: #6E9512;
   --fdn-lime-700: #5E7F0F;
   --fdn-lime-800: #4A640C;
   --fdn-lime-900: #2F4008;

   /* neutral */
   --fdn-neutral-0: #FFFFFF;
   --fdn-neutral-50: #F6F8F9;
   --fdn-neutral-100: #EBEFF1;
   --fdn-neutral-200: #D8DEE2;
   --fdn-neutral-300: #B4BDC3;
   --fdn-neutral-400: #8A959D;
   --fdn-neutral-500: #66717A;
   --fdn-neutral-600: #4C575F;
   --fdn-neutral-700: #39434B;
   --fdn-neutral-750: #2C363E;
   --fdn-neutral-800: #252D33;
   --fdn-neutral-850: #1C242B;
   --fdn-neutral-900: #14191D;

   /* status */
   --fdn-status-red-50: #FCEDEC;
   --fdn-status-red-200: #F2B8B5;
   --fdn-status-red-600: #B3261E;
   --fdn-status-red-900: #3A2A29;
   --fdn-status-green-50: #EAF5ED;
   --fdn-status-green-200: #A6D9B0;
   --fdn-status-green-600: #1E7A34;
   --fdn-status-green-900: #24332A;
   --fdn-status-amber-50: #FDF3E3;
   --fdn-status-amber-200: #F5C77E;
   --fdn-status-amber-600: #8A5300;
   --fdn-status-amber-900: #3A2E1A;

   /* alpha: osobne tokeny, bo var() nie przyjmuje kanału alfa */
   --fdn-alpha-ink-50: rgba(20, 25, 29, 0.5);
   /* 62%: biel na tym przyciemnieniu (plakietka „+N zdjęć") trzyma 8:1
      nawet nad jasnym zdjęciem */
   --fdn-alpha-ink-62: rgba(20, 25, 29, 0.62);
   --fdn-alpha-ink-70: rgba(20, 25, 29, 0.7);

   /* spacing */
   --fdn-spacing-2xs: 4px;
   --fdn-spacing-xs: 8px;
   --fdn-spacing-sm: 12px;
   --fdn-spacing-md: 16px;
   --fdn-spacing-lg: 24px;
   --fdn-spacing-xl: 32px;
   --fdn-spacing-2xl: 48px;
   --fdn-spacing-3xl: 64px;
   --fdn-spacing-4xl: 96px;

   /* radius */
   --fdn-radius-none: 0;
   --fdn-radius-sm: 6px;
   --fdn-radius-md: 8px;
   --fdn-radius-lg: 12px;
   --fdn-radius-xl: 16px;
   --fdn-radius-full: 999px;

   /* rytm sekcji: 64px góry i dołu na desktopie, 48px na mobile, margines boczny
     32/16px. Clamp załatwia oba końce jedną wartością, więc w GenerateBlocks
     wpisuje się to raz, bez breakpointów. */
   --fdn-space-section: clamp(3rem, 4.4vw, 4rem);
   /* 48px -> 64px  */
   --fdn-space-gutter: clamp(1rem, 4vw, 4rem);
   /* 16px -> 64px  */

   /* border-width */
   --fdn-border-width-hairline: 1px;
   --fdn-border-width-thick: 2px;
   /* 3px: obrys 3px + szczelina 2px */
   --fdn-border-width-focus: 3px;
   --fdn-border-width-focus-offset: 2px;

   /* icon-size */
   --fdn-icon-size-sm: 16px;
   --fdn-icon-size-md: 20px;
   --fdn-icon-size-lg: 24px;
   --fdn-icon-size-xl: 32px;
   --fdn-icon-size-2xl: 40px;

   /* container */
   --fdn-container-sm: 640px;
   --fdn-container-md: 840px;
   --fdn-container-lg: 1120px;
   /* kolumna czytania: 640 przy piśmie 18 px daje 65-78 znaków w linii; równa się
      container-sm i kolumnie głównej profilu, więc wpis, podstrona i profil czytają
      się w tej samej kolumnie */
   --fdn-container-text: 640px;
   --fdn-size-header: 72px;
   /* przyklejony pasek: bazowo tyle samo co zwykły nagłówek, więc mobile nie zmienia się z konstrukcji */
   --fdn-size-header-sticky: var(--fdn-size-header);
   --fdn-size-logo: 48px;

   /* dodatkowe powietrze między nagłówkiem a treścią podstrony. Czyta je jedna
      reguła w system.css (sekcja 4, #page.site) i dokłada do paddingu z Customizera,
      nie nadpisuje go. Na mobile zero. */
   --fdn-space-content-extra: 0px;

   /* przerwa między pozycjami menu w pasku. Osobny token, bo w paśmie 1024-1200px
      pasek nie mieści sześciu pozycji z przerwą 24px (próg okna około 1051px), a przy
      16px próg schodzi pod breakpoint nawigacji. Czyta go blok Classic Menu przez
      var(--fdn-nav-gap); wpisana tam liczba wyłączyłaby ten token. */
   --fdn-nav-gap: var(--fdn-spacing-md);

   /* wysokość kontrolek i cel dotykowy przyjęty w projekcie, stała na wszystkich
      breakpointach. To nie minimum WCAG 2.5.8 (--fdn-size-touch-min niżej), tylko
      rozmiar przyjęty ponad to minimum. */
   --fdn-size-control: 48px;

   /* stopka: 32px pionowego oddechu na mobile, 80px na desktopie (blok 1024 niżej).
     Liczba kolumn przeskakuje na 1024, tak jak nagłówek. */
   --fdn-space-footer: clamp(2rem, 3.4vw, 3rem);
   --fdn-footer-columns: 1;
   --fdn-size-touch-min: 44px;

   /* paginacja listingów: mobile = Poprzednia/Następna i „Strona X z Y",
      od 640px numerki zamiast licznika (przełączane w @media niżej) */
   --fdn-pagination-pages: none;
   --fdn-pagination-info: block;

   /* opacity */
   --fdn-opacity-disabled: 0.5;

   /* breakpoint: tylko do odczytu, CSS nie pozwala użyć var() w @media */
   --fdn-breakpoint-sm: 480px;
   --fdn-breakpoint-md: 768px;
   --fdn-breakpoint-lg: 1024px;
   --fdn-breakpoint-xl: 1280px;

   /* z-index */
   --fdn-z-index-dropdown: 100;
   --fdn-z-index-sticky: 200;
   --fdn-z-index-overlay: 300;
   --fdn-z-index-modal: 400;
   --fdn-z-index-toast: 500;

   /* duration-ms */
   --fdn-duration-ms-fast: 150ms;
   --fdn-duration-ms-base: 250ms;
   --fdn-duration-ms-slow: 400ms;

  /* czas wejścia elementu w kadr. Osobny od czasów wyżej, bo tamte mierzą odpowiedź
     na hover, focus i klik (150-400 ms to sufit czytelności); wjazd treści przy
     przewijaniu znosi czas dwa razy dłuższy. */
   --fdn-duration-ms-enter: 600ms;

   /* easing. Sprężyste wyoblenie przekracza 1 na końcu krzywej, więc ruch
     przestrzeliwuje i wraca: nadaje się do transform, nie do opacity ani koloru,
     gdzie wartość powyżej 1 jest tylko obcinana. */
   --fdn-easing-standard: cubic-bezier(0.2, 0, 0, 1);
   --fdn-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
   --fdn-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
   --fdn-easing-spring: cubic-bezier(0.5, 1.25, 0.75, 1.25);

   /* measure */
   --fdn-measure-prose: 68ch;
   --fdn-measure-narrow: 48ch;

   /* font-size: md..3xl skalują się płynnie między 480px i 1280px,
     górna granica clampa to rozmiar docelowy */
   --fdn-font-size-sm: 0.8125rem;
   --fdn-font-size-base: 1rem;
   /* pismo kolumny czytania: stałe 18 px, celowo bez clampa, także na mobile */
   --fdn-font-size-prose: 1.125rem;
   --fdn-font-size-md: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
   --fdn-font-size-lg: clamp(1.25rem, 1.0625rem + 0.625vw, 1.5625rem);
   --fdn-font-size-xl: clamp(1.4375rem, 1.1375rem + 1vw, 1.9375rem);
   --fdn-font-size-2xl: clamp(1.75rem, 1.3375rem + 1.375vw, 2.4375rem);
   --fdn-font-size-3xl: clamp(2.125rem, 1.5625rem + 1.875vw, 3.0625rem);

   /* line-height */
   --fdn-line-height-heading: 1.2;
   --fdn-line-height-body: 1.5;

   /* font-family */
   --fdn-font-family-heading: var(--gp-font--nunito, Nunito);
   --fdn-font-family-body: var(--gp-font--open-sans, "Open Sans");

   /* sekcje dwudzielne (media + tekst) i przyciski w treści. Trzeci token to
      szerokość kolumny ze zdjęciem: w układzie kolumnowym zdjęcie idzie na pełną
      szerokość pasa, a blok 1024 niżej podmienia to tam, gdzie kierunek jest wierszowy. */
   --fdn-split-direction: column;
   --fdn-split-align: stretch;
   --fdn-split-media-inline: 100%;
   --fdn-cta-grow: 1;

   /* hero strony głównej. --fdn-hero-inline-max czyta max-width bloku
      fwa-hero__inner w bazie, pozostałe tokeny kafel fwa-hero__photo. */
   --fdn-hero-inline-max: var(--fdn-container-lg);
   --fdn-hero-min-block: auto;
   --fdn-hero-photo-inline: auto;
   --fdn-hero-photo-block: 240px;
   --fdn-hero-photo-radius: 0;
   --fdn-hero-photo-margin: calc(-1 * var(--fdn-space-gutter));

   /* zdjęcie wyróżniające wpisu: 400px jak duży kafel bento, na telefonie 220px.
      Kadr robi CSS, nie WordPress: w Customizerze pola szerokości i wysokości zostają
      puste, bo wpisana tam wysokość generuje przycięty plik i bije się z tym kadrem. */
   --fdn-post-hero: 220px;

   /* galeria wpisu (bento). Układ przełącza się tokenem, bo breakpointy trzymamy
      tylko w tym pliku. */
   --fdn-gallery-gap: var(--fdn-spacing-xs);
   --fdn-gallery-cols: repeat(2, 1fr);
   --fdn-gallery-rows: 200px 120px 120px 160px;
   --fdn-gallery-areas: "a a" "b c" "d e" "f f";

   /* nakładka podglądu (GLightbox). Pasek miniatur jest ukryty domyślnie i wchodzi
      od 640px; węższy ekran oddaje wysokość zdjęciu, a „gdzie jestem" niesie licznik.
      To jedyne miejsce z progiem paska, fwa.js o żadnym progu nie wie. Zapas to
      wysokość zabierana zdjęciu: bez paska (mniej niż pięć slajdów albo wąski ekran)
      zostaje sam licznik, dlatego wariant z paskiem domyślnie równa się temu bez. */
   --fdn-lightbox-thumbs: none;
   --fdn-lightbox-mini: 56px;
   --fdn-lightbox-play: 48px;
   /* plakietka play na miniaturze w pasku: osobna wartość, bo koło 48px
      na miniaturze 84x56 zakryłoby kadr zamiast go oznaczyć. */
   --fdn-lightbox-play-mini: 20px;
   --fdn-lightbox-reserve: 56px;
   --fdn-lightbox-reserve-pasek: var(--fdn-lightbox-reserve);
}

/* numerki paginacji wchodzą tam, gdzie się mieszczą (640px, na sztywno jak wyżej).
   Tym samym progiem wchodzi pasek miniatur w nakładce: 84px razy pięć miniatur
   to 420px, więcej niż ekran 360px. */
@media (min-width: 640px) {
   :root {
      --fdn-pagination-pages: flex;
      --fdn-pagination-info: none;

      --fdn-lightbox-thumbs: flex;
      --fdn-lightbox-reserve-pasek: 148px;
   }
}

/* nagłówek rośnie z 72 na 120 tam, gdzie znika hamburger (1024px). Liczba na
   sztywno, bo @media nie przyjmuje var(); przesunięcie breakpointu hamburgera
   wymaga zmiany tutaj w tym samym ruchu. */
@media (min-width: 1024px) {
   :root {
      --fdn-size-header: 120px;
      --fdn-size-header-sticky: 88px;
      --fdn-size-logo: 56px;
      --fdn-space-content-extra: 0;
      --fdn-space-footer: clamp(3rem, 5.5vw, 5rem);
      --fdn-footer-columns: 4;
      --fdn-split-direction: row-reverse;
      --fdn-split-align: center;
      /* równe połowy pasa, nie liczba na sztywno: kolumna tekstu ma flex-grow 1 i bazę
         auto, więc dłuższy tekst zjadał kolumnę zdjęcia przy kurczeniu. 50% minus połowa
         odstępu, bo gap zabiera z pasa całe --fdn-spacing-2xl; sufit (1120 - 48) / 2
         liczony z tokenów. var() w calc() wewnątrz @media jest dozwolony, zakaz dotyczy
         tylko warunku zapytania. */
      --fdn-split-media-inline: min(
         calc((var(--fdn-container-lg) - var(--fdn-spacing-2xl)) / 2),
         calc(50% - var(--fdn-spacing-2xl) / 2)
      );
      --fdn-cta-grow: 0;

      --fdn-hero-min-block: 80vh;
      --fdn-hero-photo-inline: 448px;
      --fdn-hero-photo-block: 300px;
      --fdn-hero-photo-radius: var(--fdn-radius-md);
      --fdn-hero-photo-margin: 0;

      --fdn-post-hero: 400px;

      --fdn-gallery-gap: var(--fdn-spacing-md);
      --fdn-gallery-cols: repeat(6, 1fr);
      --fdn-gallery-rows: 192px 192px 240px;
      --fdn-gallery-areas: "a a a a b b" "a a a a c c" "d d e e f f";
   }
}

/* menu wraca do przerwy 24px tam, gdzie pasek ma zapas. 1200px na sztywno (@media
   nie przyjmuje var()) i nie odpowiada żadnemu --fdn-breakpoint-*: to próg liczony
   z zawartości paska (minimum 1051px plus zapas). Gdy w menu przybędzie pozycja,
   przeliczyć, nie przesuwać na oko. */
@media (min-width: 1200px) {
   :root {
      --fdn-nav-gap: var(--fdn-spacing-lg);
   }
}

/* hero rośnie z 1120 na 1280 razem z kaflem zdjęcia (448x300 -> 640x430). 1280px
   to --fdn-breakpoint-xl na sztywno. Blok stoi po bloku 1024 celowo: ta sama
   specyficzność, rozstrzyga kolejność. Próg wynika z tego, że nagłówek hero trzyma
   dwie linie od 480px szerokości bloku tekstu: 0,92 x okno - 640 (kafel) - 48 (gap)
   >= 480 daje okno >= 1270px. Zapas to 10px: dłuższy nagłówek wymaga przeliczenia. */
@media (min-width: 1280px) {
   :root {
      --fdn-hero-inline-max: 1280px;
      --fdn-hero-photo-inline: 640px;
      --fdn-hero-photo-block: 430px;
   }
}

/* --- 2. ROLE, tryb jasny --------------------------------------------------- */
:root {
   --fdn-color-text-primary: var(--fdn-neutral-900);
   --fdn-color-text-secondary: var(--fdn-neutral-600);
   --fdn-color-text-muted: var(--fdn-neutral-500);
   --fdn-color-text-disabled: var(--fdn-neutral-400);
   --fdn-color-text-inverse: var(--fdn-neutral-0);
   --fdn-color-text-on-donate: var(--fdn-neutral-900);
   --fdn-color-text-on-secondary: var(--fdn-blue-700);
   --fdn-color-text-accent: var(--fdn-blue-700);
   --fdn-color-link: var(--fdn-blue-700);
   --fdn-color-link-hover: var(--fdn-blue-800);
   --fdn-color-link-visited: var(--fdn-blue-900);
   --fdn-color-action-primary: var(--fdn-blue-600);
   --fdn-color-action-primary-hover: var(--fdn-blue-700);
   --fdn-color-action-primary-active: var(--fdn-blue-800);
   --fdn-color-action-secondary: var(--fdn-neutral-0);
   --fdn-color-action-secondary-hover: var(--fdn-neutral-50);
   --fdn-color-action-secondary-active: var(--fdn-neutral-100);
   --fdn-color-action-secondary-border: var(--fdn-blue-600);
   --fdn-color-action-donate: var(--fdn-lime-500);
   --fdn-color-action-donate-hover: var(--fdn-lime-400);
   --fdn-color-action-donate-active: var(--fdn-lime-650);
   --fdn-color-action-donate-border: var(--fdn-lime-700);
   --fdn-color-action-disabled: var(--fdn-neutral-200);
   --fdn-color-brand: var(--fdn-blue-500);
   --fdn-color-brand-secondary: var(--fdn-lime-500);
   --fdn-color-bg: var(--fdn-neutral-0);
   --fdn-color-bg-alt: var(--fdn-neutral-50);
   --fdn-color-bg-raised: var(--fdn-neutral-0);
   --fdn-color-bg-raised-2: var(--fdn-neutral-50);
   --fdn-color-bg-tint-blue: var(--fdn-neutral-100);
   --fdn-color-bg-tint-lime: var(--fdn-neutral-100);

   /* Powierzchnia pod cudzy logotyp. Kolorowego znaku towarowego nie wolno
      przerysować ani przefiltrować, więc kafel zostaje jasny także w motywie
      ciemnym: brak tej roli w bloku ciemnym JEST mechanizmem. */
   --fdn-color-surface-logo: var(--fdn-neutral-50);

   --fdn-color-overlay: var(--fdn-alpha-ink-50);
   --fdn-color-menu-overlay-bg: var(--fdn-blue-900);
   --fdn-color-menu-overlay-text: var(--fdn-neutral-0);
   --fdn-color-menu-overlay-border: rgba(255, 255, 255, 0.36);
   --fdn-color-menu-overlay-hover: rgba(255, 255, 255, 0.08);
   --fdn-color-menu-overlay-active: rgba(255, 255, 255, 0.14);
   --fdn-color-menu-overlay-current: var(--fdn-blue-300);
   --fdn-color-border: var(--fdn-neutral-200);
   --fdn-color-border-input: var(--fdn-neutral-500);
   --fdn-color-focus: var(--fdn-neutral-600);
   --fdn-color-focus-offset: var(--fdn-neutral-0);
   --fdn-color-feedback-error: var(--fdn-status-red-600);
   --fdn-color-feedback-error-bg: var(--fdn-status-red-50);
   --fdn-color-feedback-success: var(--fdn-status-green-600);
   --fdn-color-feedback-success-bg: var(--fdn-status-green-50);
   --fdn-color-feedback-warning: var(--fdn-status-amber-600);
   --fdn-color-feedback-warning-bg: var(--fdn-status-amber-50);
   --fdn-color-feedback-info: var(--fdn-blue-700);
   --fdn-color-feedback-info-bg: var(--fdn-blue-50);
   --fdn-color-progress: var(--fdn-blue-600);
   --fdn-color-progress-track: var(--fdn-neutral-200);

   --fdn-shadow-color-sm: rgba(20, 25, 29, 0.1);
   --fdn-shadow-color-md-1: rgba(20, 25, 29, 0.08);
   --fdn-shadow-color-md-2: rgba(20, 25, 29, 0.16);
   --fdn-shadow-color-lg: rgba(20, 25, 29, 0.22);

   --fdn-shadow-sm: 0 1px 3px 0px var(--fdn-shadow-color-sm), 0 4px 12px -2px var(--fdn-shadow-color-sm);
   --fdn-shadow-md: 0 2px 4px 0px var(--fdn-shadow-color-md-1), 0 8px 24px -4px var(--fdn-shadow-color-md-2);
   --fdn-shadow-lg: 0 16px 48px -8px var(--fdn-shadow-color-lg);
}

/* --- 3. ROLE, tryb ciemny -------------------------------------------------- */
/* selektor atrybutowy, nie :root, żeby wygrać specyficznością z inline CSS
   GeneratePressa niezależnie od kolejności ładowania arkuszy. */
html[data-theme="dark"] {
   color-scheme: dark;
   --fdn-color-text-primary: var(--fdn-neutral-100);
   --fdn-color-text-secondary: var(--fdn-neutral-300);
   --fdn-color-text-muted: var(--fdn-neutral-400);
   --fdn-color-text-disabled: var(--fdn-neutral-500);
   --fdn-color-text-inverse: var(--fdn-neutral-900);
   --fdn-color-text-on-donate: var(--fdn-neutral-900);
   --fdn-color-text-on-secondary: var(--fdn-blue-100);
   --fdn-color-text-accent: var(--fdn-blue-500);
   --fdn-color-link: var(--fdn-blue-300);
   --fdn-color-link-hover: var(--fdn-blue-200);
   --fdn-color-link-visited: var(--fdn-blue-100);
   --fdn-color-action-primary: var(--fdn-blue-500);
   --fdn-color-action-primary-hover: var(--fdn-blue-400);
   --fdn-color-action-primary-active: var(--fdn-blue-300);
   --fdn-color-action-secondary: var(--fdn-neutral-750);
   --fdn-color-action-secondary-hover: var(--fdn-neutral-700);
   --fdn-color-action-secondary-active: var(--fdn-neutral-600);
   --fdn-color-action-secondary-border: var(--fdn-blue-300);
   --fdn-color-action-donate: var(--fdn-lime-500);
   --fdn-color-action-donate-hover: var(--fdn-lime-600);
   --fdn-color-action-donate-active: var(--fdn-lime-650);
   --fdn-color-action-donate-border: var(--fdn-lime-500);
   --fdn-color-action-disabled: var(--fdn-neutral-700);
   --fdn-color-brand: var(--fdn-blue-500);
   --fdn-color-brand-secondary: var(--fdn-lime-500);
   --fdn-color-bg: var(--fdn-neutral-850);
   --fdn-color-bg-alt: var(--fdn-neutral-800);
   --fdn-color-bg-raised: var(--fdn-neutral-800);
   --fdn-color-bg-raised-2: var(--fdn-neutral-750);
   --fdn-color-bg-tint-blue: var(--fdn-neutral-700);
   --fdn-color-bg-tint-lime: var(--fdn-neutral-700);
   --fdn-color-overlay: var(--fdn-alpha-ink-70);

   /* nakładka menu w ciemnym: powierzchnia podniesiona, nie kolor strony, bo nakładka
     w kolorze tła wygląda jak brak nakładki. -border, -hover i -active zostają
     z warstwy jasnej: biel z kanałem alfa czyta się tak samo na granacie i na ciemnej
     powierzchni (3,16:1 przy wymaganych 3:1 dla elementu nietekstowego). */
   --fdn-color-menu-overlay-bg: var(--fdn-color-bg-raised);
   --fdn-color-menu-overlay-text: var(--fdn-color-text-primary);
   --fdn-color-menu-overlay-current: var(--fdn-color-link);

   --fdn-color-border: var(--fdn-neutral-700);
   --fdn-color-border-input: var(--fdn-neutral-400);
   --fdn-color-focus: var(--fdn-neutral-0);
   --fdn-color-focus-offset: var(--fdn-neutral-900);
   --fdn-color-feedback-error: var(--fdn-status-red-200);
   --fdn-color-feedback-error-bg: var(--fdn-status-red-900);
   --fdn-color-feedback-success: var(--fdn-status-green-200);
   --fdn-color-feedback-success-bg: var(--fdn-status-green-900);
   --fdn-color-feedback-warning: var(--fdn-status-amber-200);
   --fdn-color-feedback-warning-bg: var(--fdn-status-amber-900);
   --fdn-color-feedback-info: var(--fdn-blue-300);
   --fdn-color-feedback-info-bg: var(--fdn-blue-900);
   --fdn-color-progress: var(--fdn-blue-500);
   --fdn-color-progress-track: var(--fdn-neutral-700);

   --fdn-shadow-color-sm: rgba(0, 0, 0, 0.28);
   --fdn-shadow-color-md-1: rgba(0, 0, 0, 0.24);
   --fdn-shadow-color-md-2: rgba(0, 0, 0, 0.4);
   --fdn-shadow-color-lg: rgba(0, 0, 0, 0.55);
}

/* =============================================================================
   PROFIL PODOPIECZNEGO
   Dwie kolumny od 1024px (main 1fr + sidebar 416px, przerwa 64px). Na wąskim
   ekranie main i aside są display: contents, więc o kolejności decydują
   właściwości order na blokach: foto i imię, karta wpłat, 1,5%, historia, galeria.
   ============================================================================= */
:root {
   --fdn-profile-columns: 1fr;
   --fdn-profile-gap: var(--fdn-spacing-lg);
   --fdn-profile-part: contents;
}

@media (min-width: 1024px) {
   :root {
      --fdn-profile-columns: minmax(0, 1fr) 416px;
      --fdn-profile-gap: var(--fdn-spacing-3xl);
      --fdn-profile-part: grid;
   }
}


/* =============================================================================
   PRZEŁĄCZNIK MOTYWU
   Skrótkod stoi na stronie dwa razy (pasek nagłówka, nakładka menu). Widoczna ma
   być dokładnie jedna i decydują o tym te dwa tokeny, nie media query w bloku.
   Próg 1024px to ten sam co data-gb-mobile-breakpoint nawigacji, na sztywno, bo
   @media nie przyjmuje var(). Wartości to inline-flex i flex, nie block: token
   niesie i widoczność, i tryb układu, inaczej display ustawiałyby dwa miejsca.
   ============================================================================= */
:root {
   --fdn-motyw-pasek: none;
   --fdn-motyw-nakladka: flex;
}

@media (min-width: 1024px) {
   :root {
      --fdn-motyw-pasek: inline-flex;
      --fdn-motyw-nakladka: none;
   }
}


/* =============================================================================
   HERO „SŁOWA"
   Hero strony głównej bez grafiki: trzy słowa nagłówka w trzech rolach
   kolorystycznych (trzecie na bloku limonki), lead z CTA w jednym rzędzie, okrągły
   przycisk „w dół". Reguły w system.css, sekcja 13. Tokeny starego hero wyżej
   (--fdn-hero-inline-max, --fdn-hero-min-block, --fdn-hero-photo-*) zostają, bo
   obsługują markup wciąż żyjący w bazie.

   Próg 768px (--fdn-breakpoint-md) na sztywno. Poniżej: kolumna, nagłówek 56px,
   przycisk wpłaty pierwszy (kolejność DOM). Od progu: rząd lead+CTA, nagłówek
   płynny 8.9vw z podłogą 44px i sufitem 120px. Zmiana treści nagłówka albo metryki
   fontu przerzuca układ między dwie i trzy linie: przeliczyć, nie przesuwać na oko.
   ============================================================================= */
:root {
   --fdn-hero-s-title-size: 3.5rem;

   /* układ kontenera treści: mobile kolumna (stretch = pełna szerokość),
      desktop rząd z zawijaniem, lead i CTA wyrównane do dolnej krawędzi */
   --fdn-hero-s-inner-dir: column;
   --fdn-hero-s-inner-align: stretch;

   /* CTA: mobile kolumna, desktop rząd. W DOM przycisk wpłaty stoi pierwszy
      i mobile czyta kolejność źródłową; na desktopie order przerzuca go na koniec. */
   --fdn-hero-s-cta-dir: column;
   --fdn-hero-s-donate-order: 0;

   /* kolory słów, tryb jasny (tło strony = biel): kontrasty 13,42 / 6,09 / 8,96 */
   --fdn-hero-s-word-1: var(--fdn-blue-900);
   --fdn-hero-s-word-2: var(--fdn-blue-700);
   --fdn-hero-s-word-3: var(--fdn-blue-900);
   --fdn-hero-s-word-3-bg: var(--fdn-lime-500);

   /* hover słowa (tylko wskaźnik precyzyjny): słowo odwraca się w blok */
   --fdn-hero-s-word-1-hover: var(--fdn-neutral-0);
   --fdn-hero-s-word-1-hover-bg: var(--fdn-blue-900);
   --fdn-hero-s-word-2-hover: var(--fdn-blue-900);
   --fdn-hero-s-word-2-hover-bg: var(--fdn-blue-500);
   --fdn-hero-s-word-3-hover: var(--fdn-lime-500);
   --fdn-hero-s-word-3-hover-bg: var(--fdn-blue-900);

   /* ramka i szewron przycisku „w dół". Blue-600, nie blue-500 marki: blue-500
      na bieli daje 2,91 przy wymaganych 3,0 dla elementu nietekstowego. */
   --fdn-hero-s-dalej-color: var(--fdn-blue-600);

   /* pętla kiwania przycisku „w dół". „Ogranicz ruch" nie gasi pętli nieskończonej
      samym zerem tokenu (animacja o czasie 0.01ms próbkuje się w przypadkowej fazie
      i przycisk by drgał): sekcja 4 system.css zdejmuje ją wprost, a zero tokenu
      zostaje strażem dla przejść. */
   --fdn-duration-ms-hero-kiw: 2000ms;
}

@media (min-width: 768px) {
   :root {
      --fdn-hero-s-title-size: clamp(2.75rem, 8.9vw, 7.5rem);
      --fdn-hero-s-inner-dir: row;
      --fdn-hero-s-inner-align: flex-end;
      --fdn-hero-s-cta-dir: row;
      --fdn-hero-s-donate-order: 1;
   }
}

/* mapa ciemna słów jest inna niż jasna, nie „ta sama z korektą jasności": blue-900
   na tle strony w ciemnym daje 1,21, blue-700 2,67. Na neutral-850: słowo 1 biel
   15,7, słowo 2 blue-300 8,1, słowo 3 bez zmian (8,96 na limonce); przycisk „w dół"
   blue-300 8,1. Hover: odwrócenie na jasne tło z tekstem blue-900. */
html[data-theme="dark"] {
   --fdn-hero-s-word-1: var(--fdn-neutral-0);
   --fdn-hero-s-word-2: var(--fdn-blue-300);
   --fdn-hero-s-word-1-hover: var(--fdn-blue-900);
   --fdn-hero-s-word-1-hover-bg: var(--fdn-blue-50);
   --fdn-hero-s-word-2-hover: var(--fdn-blue-900);
   --fdn-hero-s-word-2-hover-bg: var(--fdn-blue-300);
   --fdn-hero-s-dalej-color: var(--fdn-blue-300);
}