/* Fonty NIE sa tu importowane celowo. @import tworzylby kaskade zapytan
   (HTML -> tokens.css -> fonts.css -> woff2), co opoznia pierwszy render.
   fonts.css jest kolejkowany osobno w inc/enqueue.php, a same pliki woff2
   sa preloadowane - dzieki temu pobieraja sie rownolegle. */

:root,
[data-theme="dark"] {
	--color-bg: #0f0f11;
	--color-bg-alt: #17171a;
	--color-bg-elevated: #1f1f23;
	--color-text: #f5f5f4;
	--color-text-muted: #a1a1aa;
	--color-accent: #ff6a1a;
	--color-accent-hover: #ff8340;
	--color-accent-dim: rgba(255, 106, 26, 0.15);
	--color-success: #22c55e;

	/* --- Tokeny pochodne dla DOSTEPNOSCI (KROK 3) ---------------------------
	   Paleta z BRIEF.md sekcja 3 zostaje nietknieta - --color-accent to nadal
	   dokladnie ten sam pomaranicz na powierzchniach i przyciskach. Ponizsze
	   dwa tokeny dotycza WYLACZNIE tekstu, bo tam obowiazuja progi WCAG:

	   --color-on-accent  tekst NA wypelnieniu akcentem. Bialy dawal tylko
	                      2,87:1 na #ff6a1a (przy wymaganych 4,5:1) - nie da sie
	                      tego uratowac pogrubieniem, bo nie osiaga nawet progu
	                      3:1 dla duzego tekstu. Ciemny grafit daje 6,68:1.
	   --color-accent-text  akcent uzyty jako KOLOR TEKSTU na tle strony.
	                      W trybie ciemnym rowny akcentowi (6,68:1 - przechodzi).
	                      W jasnym #e35a0e dawal 3,51:1, wiec dla malego tekstu
	                      uzywamy przyciemnionego wariantu (4,70:1). */
	--color-on-accent: #0f0f11;
	--color-accent-text: #ff6a1a;
	--color-border: rgba(255, 255, 255, 0.08);
	--gradient-hero: linear-gradient(180deg, rgba(15, 15, 17, 0) 0%, #0f0f11 90%);

	--color-warning: #f59e0b;
	--color-danger: #ef4444;

	--font-heading: 'Sora', sans-serif;
	--font-body: 'Inter', sans-serif;

	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 24px;
	--radius-pill: 999px;

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-24: 6rem;

	--container-max: 1280px;

	--admin-bar-offset: 0px;

	--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
	--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
}

[data-theme="light"] {
	--color-bg: #fafafa;
	--color-bg-alt: #f0f0f1;
	--color-bg-elevated: #ffffff;
	--color-text: #17171a;
	--color-text-muted: #52525b;
	--color-accent: #e35a0e;
	--color-accent-hover: #ff6a1a;
	--color-accent-dim: rgba(227, 90, 14, 0.1);
	/* Kolory statusow na jasnym tle wymagaly przyciemnienia. Uwaga: badge maja
	   przyciemnione tlo (10% wlasnego koloru), wiec liczy sie kontrast wzgledem
	   TEJ mieszanki, a nie czystej bieli - stad mocniejsze wartosci niz mogloby
	   sie wydawac. #16a34a dawal 3,30:1, #15803d 4,08:1, dopiero #166534 przechodzi. */
	--color-success: #166534;
	--color-warning: #92400e;
	/* Tekst na wypelnieniu akcentem: 5,23:1 (bialy dawal 3,66:1). */
	--color-on-accent: #0f0f11;
	/* Maly tekst w kolorze akcentu na jasnym tle. Musi przejsc takze na tle
	   sekcji naprzemiennych (#f0f0f1), ktore jest ciemniejsze od bazowego -
	   #c24a0b dawal tam tylko 4,31:1. Ten odcien: 5,47:1 na #fafafa, 5,01:1 na #f0f0f1. */
	--color-accent-text: #b04409;
	--color-border: rgba(0, 0, 0, 0.08);
	--gradient-hero: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, #fafafa 90%);

	--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
}

/* ============================================================================
   SKALA WARSTW (z-index)
   ============================================================================
   Wszystkie warstwy nakladajace sie na tresc maja tu jedno, jawne miejsce.
   Powod jest konkretny: naglowek mial z-index 100, a nakladka menu 200, przy
   czym przycisk "Menu" siedzial WEWNATRZ naglowka. Poniewaz naglowek jest
   position:sticky z wlasnym z-index, tworzy kontekst nakladania - przycisk
   z z-index 210 nie mial szans wybic sie ponad nakladke, bo caly jego
   kontekst konczyl sie na 100. Efekt: po otwarciu menu panel fizycznie
   przykrywal przycisk i nie dalo sie go klikniec (menu dalo sie otworzyc,
   ale nie zamknac).

   Zasada: element zagniezdzony NIE moze przebic warstwy swojego rodzica.
   Dlatego kolejnosc ponizej jest kolejnoscia w drzewie, a nie zyczeniem.
   Naglowek stoi NAD menu swiadomie - dzieki temu przycisk zamykania, logo,
   jezyk i motyw zostaja dostepne przy otwartym panelu. */
:root {
	--z-hero-bg: -2;         /* tlo/wideo hero pod trescia */
	--z-hero-scrim: -1;      /* przyciemnienie nad tlem hero */
	--z-raised: 1;           /* drobne uniesienia w obrebie sekcji */
	--z-floating-widget: 90; /* telefon/WhatsApp - pod naglowkiem */
	--z-dropdown: 120;       /* lista przelacznika jezyka */
	--z-menu: 200;           /* nakladka i panel StaggeredMenu */
	--z-header: 300;         /* naglowek NAD menu - patrz komentarz wyzej */
	--z-lightbox: 400;       /* podglad zdjec - nad wszystkim oprocz kurtyny */
	--z-skip-link: 1000;     /* link "przejdz do tresci" przy fokusie */
	/* Kurtyna ladowania (9999) celowo NIE jest tu zmienna: jej style sa
	   inline w <head> i nie moga zalezec od tego arkusza. */
}