/* tokens.css – JEDYNE źródło zmiennych CSS portalu „Dzień z Energią".
   -------------------------------------------------------------------
   Powstał w E1 (docs/spojnosc-podstron-plan.md): do 2026-09-12 komplet tokenów
   wariantu C żył w <style> wewnątrz portal.html (1724 linie), a assets/css/base.css
   stało na palecie sprzed R1 – stąd rozjazd strony głównej i 33 podstron.
   Plik zawiera WYŁĄCZNIE deklaracje własności niestandardowych (--*), więc nie
   może kolidować z żadnym resetem ani komponentem. Dołączaj go przed base.css
   (podstrony) albo przed inline <style> (portal.html).

   NIE dopisuj tu reguł innych niż :root / [data-theme=*].
   NIE kopiuj tych wartości do <style> podstron – kopia rozjedzie się przy
   pierwszej zmianie (patrz drugi :root w zrodla.html, usunięty w E3).

   === REBRAND 2026-09-13 – „błękit techniczny" ===================================
   Akcent z zieleni instytucjonalnej #1F5C46 na błękit #155E9C. Zieleń ZNIKA
   z portalu całkowicie, także z ról funkcjonalnych (wzrost ceny, OZE, niski
   priorytet, wiatr w pasku generacji) – decyzja świadoma, nie przeoczenie:
   portal ma jedną rodzinę chłodnych barw, a znaczenie niosą pozycja i etykieta,
   nie sam odcień. Papier ochłodzony z kremowego #FBFAF7 do neutralnego #FAFBFC.
   Typografia: Inter (UI + treść + podpisy) + Playfair Display (lektura) + CMU Concrete (dane).
   Każda wartość barwna poniżej przeszła tools/check_contrast.py – nie zmieniaj
   żadnej bez ponownego uruchomienia tego skryptu.
   ===================================================================== */

:root {
  /* Papier/atrament + JEDEN akcent. SSOT palety poniżej; stare nazwy zmapowane
     (zero find/replace w modułach). Paleta DANYCH (--c-sky/amber/red/blue) zostaje
     – używana funkcjonalnie. */
  --paper: #FAFBFC;   --paper-2: #EFF2F6;
  --ink: #16202B;     --ink-60: #3F4A55;  --ink-30: #9AA3AB;
  --rule: rgba(22,32,43,.14);
  --accent: #155E9C;  --accent-ink: #0E3F6D;
  /* --up był zielenią wzrostu (#0B6E4F). Para wzrost/spadek jest teraz błękit/ceglasty:
     odcień #1B6BA8 celowo o ton jaśniejszy od akcentu, żeby delta w tickerze nie
     czytała się jako link. */
  --up: #1B6BA8;      --down: #A23B2E;    --data: #C9A227;
  /* Druk i dokumenty (arkusz „Zapisz PDF” narzędzi, print.css § 9) – paleta Księgi tożsamości
     Fundacji Entegra (wersja 1.0 z 28.10.2026, rozdz. 3), nie paleta ekranu: na papierze rządzi
     księga, na ekranie ten plik. Kartka jest zawsze biała, więc ciemny motyw tych tokenów nie
     redefiniuje. Granat, błękit i pomarańcz to barwy znaku (README-entegra.md). */
  --doc-paper: #FFFFFF;  --doc-panel: #EEF3F8;  --doc-line: #C9D1DA;
  --doc-ink: #16202B;    --doc-muted: #54606B;
  --doc-navy: #12304F;   --doc-blue: #1A6FBF;   --doc-orange: #C2570F;
  /* Rytm odstępów księgi (rozdz. 5): 2 · 4 · 7 · 10 · 14 pt. */
  --doc-s1: 2pt;  --doc-s2: 4pt;  --doc-s3: 7pt;  --doc-s4: 10pt;  --doc-s5: 14pt;
  /* O1: barwy kategorii artykułów (klucz = slug z artykuly/articles.json:categories). Tylko typografia
     i linie 1 px, nigdy tło. HSL S .40, L dobrane do kontrastu ≥ 4,5:1 na --paper i --paper-2
     (docs/samples/first-screen-colour-tokens.html). Kategoria bez tokenu → --accent.
     Rebrand: --cat-esg z zieleni #477934 na śliwkę #79346B. Wycięcie zieleni zostawia
     w rampie ośmiu odcieni dziurę ~145°, więc ESG siada bliżej --cat-odbiorcy niż
     wcześniej – świadomy kompromis, nie pomyłka. Podobnie --cat-sieci jest teraz
     tonalnie bliski akcentowi; kategorie żyją w typografii, akcent w linkach, więc
     kolizja jest znośna. */
  --cat-sieci: #345479;
  --cat-wytwarzanie: #795034;
  --cat-odbiorcy: #653479;
  --cat-obrot: #796534;
  --cat-magazyny: #347079;
  --cat-regulacje: #79344B;
  --cat-emobility: #3B3479;
  --cat-esg: #79346B;
  /* O6: struktura generacji. Pasek ma 3 px i papier ma nad nim i pod nim, więc każdy
     segment musi trzymać 3:1 do --paper (WCAG 1.4.11).
     2026-09-17: paleta przełożona na sens paliwa, bo poprzednia czytała się odwrotnie –
     wiatr miał najmocniejszy błękit, a bloki cieplne chłodną szarość. Teraz: cieplne
     ceglane (ciepło), woda błękitna, wiatr neutralnie szary (powietrze), PV ochra,
     inne OZE (biogaz, biomasa) zielone. Hue niesie znaczenie, jasność rozdziela sąsiadów. */
  --mix-thermal: #A8562B;
  --mix-hydro: #2E6F8E;
  --mix-wind: #7A8288;
  --mix-pv: #A8871F;
  --mix-other: #3F7A43;
  /* Plakietki źródeł w kalendarzu (.cal-*). Tekst na własnym tincie 6–10 % nad papierem,
     więc próg 4,5:1 liczony względem tego tintu, nie czystego papieru.
     Rebrand: --cal-oze z zieleni #117A38 na błękit #0F6FA8; --cal-low (niski priorytet)
     nie dostaje błękitu – kolidowałby z --cal-pse i z akcentem – tylko chłodną szarość
     #4F6475, która sama w sobie czyta się jako „mniej ważne". */
  --cal-ure: #7A38ED;  --cal-pse: #1659EA;  --cal-cire: #056A82;
  --cal-ets: #A15804;  --cal-leg: #CA2121;  --cal-oze: #0F6FA8;
  /* Wagi wpisu w kalendarzu. PRZYWRÓCONE 2026-09-17, kilka godzin po usunięciu: zdjąłem je
     jako osierocone, bo grep za `--cal-high` nie znajdował konsumenta – ale konsument
     istniał, tyle że pod inną nazwą i wpisany HEXEM wprost w kalendarz.html
     (`--c-high:#b14b3e; --c-med:#b9842f`). Hex nie miał wariantu nocnego, więc kropki
     ważności i plakietki miesiąca schodziły w ciemnym motywie poniżej progu – dokładnie ta
     sama usterka, którą 2026-09-15 naprawiono dla --c-manual, tylko nigdy nie dokończona
     dla pozostałych. Teraz kalendarz.html aliasuje te tokeny zamiast powtarzać wartości. */
  --cal-high: #D82323; --cal-med: #A65B05;
  --cal-low: #4F6475;

  /* Brand „teal" → akcent (chrome). Nazwy historyczne, wartość jedna. Płaskie, bez glow. */
  --c-teal: var(--accent);
  --c-teal-bright: var(--accent);
  --c-teal-deep: var(--accent-ink);
  --c-teal-glow: var(--accent);
  /* Barwy danych (funkcjonalnie – ticker, badge'y kategorii) */
  --c-sky: #38bdf8;
  --c-amber: #d97706;
  --c-red: #dc2626;
  /* --c-green trzymał #059669 i po rebrandzie nie ma prawa być zielony. Wartość żyje
     teraz pod własną nazwą --c-blue; stara nazwa zostaje wyłącznie jako alias wsteczny
     i nie należy jej używać w nowym kodzie. */
  --c-blue: #0E7BB8;
  --c-green: var(--c-blue);

  /* Alpha ramp – błękit akcentu (miękkie tła chrome) */
  --a-teal-04: rgba(21,94,156,.04);
  --a-teal-06: rgba(21,94,156,.06);
  --a-teal-08: rgba(21,94,156,.08);
  --a-teal-12: rgba(21,94,156,.10);
  --a-teal-18: rgba(21,94,156,.16);
  --a-teal-25: rgba(21,94,156,.22);
  --a-teal-35: rgba(21,94,156,.30);

  /* „Gradienty" – spłaszczone do jednego akcentu */
  --g-brand: var(--accent);
  --g-brand-soft: var(--accent);
  --g-contact: var(--accent);

  /* Semantic role tokens – papier/atrament, przełączane przez motyw */
  --c-bg: var(--paper);
  --c-bg-mid: var(--paper-2);
  --c-bg-elev: var(--paper);
  --c-fg: var(--ink);
  --c-fg-muted: var(--ink-60);
  --c-border: var(--rule);
  --c-nav-bg: var(--paper);
  --c-ticker-bg: var(--paper);
  --c-overlay: var(--paper);

  /* Kształt – promienie karty C (R3); wcześniej ostre, drukarskie krawędzie */
  --r-sm: 8px; --r-md: 12px; --r-lg: var(--card-radius); --r-xl: 20px; --r-full: 9999px;
  /* „Cienie" – linie włosowe zamiast cieni */
  --sh-sm: none;
  --sh-md: none;
  --sh-lg: none;
  --sh-ring: 0 0 0 2px var(--accent);

  /* R1 – karty pierwszego ekranu (docs/first-screen-cards-redesign-plan.md, próbka docs/samples/first-screen-cards-C.html):
     strona w neutralnej szarości, karty bielą, krawędź ledwo widoczna, promień 16, JEDEN odstęp --gap dla kolumn,
     pionu i marginesów. Rebrand: --page-bg i --card-border o ułamek chłodniejsze, żeby
     szarość strony nie ciągnęła w zieleń obok błękitnego akcentu. */
  --page-bg: #F3F5F8;
  --card-bg: #FFFFFF;
  --card-border: #E3E7EC;
  --card-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --card-radius: 16px;
  --card-pad: clamp(1.25rem, 2.4vw, 1.75rem);
  --gap: 16px;
  /* Warstwa nad tłem strony – jasny motyw. Tło to szary kolaż zdjęć (tools/tlo_serwisu.py)
     z czarnymi pikselami (lum .000), stąd .88. Historia: gradient w barwach znaku
     (2026-10-09, welon .12) i gradient z rysunkiem kolażu (2026-10-11, .40) – strona wyszła
     za niebieska, 2026-10-13 kolaż wrócił razem z welonem. Próg liczy `tlo_serwisu.py --check`:
     tekst --ink-60 leżący wprost na stronie trzyma 4,5:1 na każdym pikselu tła (najmniej .75).
     --ink-60 jest od 2026-10-09 #3F4A55 (było #54606B, wymagało .88 bez zapasu) – zostaje,
     ciemniejszy tekst tylko zyskuje na kontraście. */
  --page-veil: rgba(243, 245, 248, .88);
  /* E5: dwie powierzchnie, które do tej pory były wpisane na sztywno w portal.html
     i chrome.css. Obie są niezależne od motywu z założenia: stopka i kafle ze zdjęciem
     mają ciemną bazę, a kafelek sponsora jasną, żeby wordmarki zostały czytelne. */
  /* E6: kolor tekstu LEŻĄCEGO NA akcencie. W motywie jasnym --accent jest ciemnym
     błękitem, więc biel działa (6,75:1); w ciemnym --accent to jasny błękit #69A9E6
     i biały tekst schodzi do 1,9:1. Nie wpisuj tu #fff na stałe – to był dokładnie
     ten błąd, przez pięć miesięcy, na portalu też. */
  --on-accent: #FFFFFF;
  /* Tekst i krawędź ostrzeżenia (.art-callout.warn). Ciemny bursztyn działa na papierze,
     ale na ciemnej karcie schodzi do 2,8:1 – stąd osobna wartość dla motywu nocnego. */
  --warn-ink: #8a5a07;
  /* D4: wyróżnienia w treści artykułu (.art-callout). Liczone z --ink, więc jedna
     definicja starcza na oba motywy – nie dubluj ich w bloku [data-theme=dark].
     --callout-rule: ramka neutralnego wyróżnienia; --callout-tint: tło ostrzeżenia,
     o jeden ton od --card-bg (samo #fafafa na białej karcie jest niewidoczne). */
  --callout-rule: color-mix(in srgb, var(--ink), transparent 78%);
  --callout-tint: color-mix(in srgb, var(--ink), transparent 97%);
  --ink-deep: #0c1829;
  /* Tło widżetu Expert Match. Wartość to --accent 4 % skomponowany na --page-bg, ale
     wpisany wprost i NIEPRZEZROCZYSTY: wersja z alfą (--a-teal-04) przepuszczała
     bg-energy.webp i akapit w --ink-60 schodził do 4,38:1. Teraz 5,56:1. */
  --expert-join-bg: #EAEFF4;
  /* Wygaszenie komórki spoza bieżącego miesiąca w kalendarzu. Token, nie literał,
     bo od etapu B (2026-09-15) tint idzie WARSTWĄ NAD taflą Aero i musi być
     półprzezroczysty w obu motywach – aero.css nie trzyma żadnych wartości barwnych. */
  --cal-muted-tint: rgba(0,0,0,.02);
  --sponsor-tile: #F8FAFC;

  /* Typografia: Inter (UI + treść + podpisy) / Playfair Display (lektura, wordmark) / CMU Concrete (dane).
     Rebrand 2026-09-13 – Newsreader i IBM Plex Sans usunięte z repo.
     Krój szeryfowy ustalony 2026-09-14 na Playfair Display (po próbach z Fraunces
     i Cormorant Garamond) – oczko 0,52 i szerokość zdania 102 % Newsreadera, więc
     stopnie nagłówków zostają bez korekty.
     D1 (c), wykonane w E4/2: --f-head jest krojem INTERFEJSU i jest bezszeryfowy.
     Lektura zostaje szeryfowa, ale NIE jest już wpisywana na sztywno w sześciu plikach:
     ma własny token --f-read, którego używają .art-hero h1, .art-body h2/h3/th, inicjał,
     .page-header__title--read (tytuł ścieżki edukacyjnej, U6), .mod-content h2/h3,
     .cal-month__name (portal.html), strona 404 i nagłówki encyklopedii (wiedza.css).
     Wordmark w nawigacji i pasku to lockup SVG jako maska CSS – jego krój siedzi
     w obrysach wektora, nie w tokenie. Od rebrandingu paska jest to lockup z rodziny
     Fundacji Entegra (wersaliki w Interze); szeryf został na powierzchniach lektury.
     Nie wstawiaj --f-read do --f-head: to odwróciłoby podział, nie naprawiło go.
     Playfair Display ma oś wght 400–900 i obie odmiany; wagi 700/800 używane
     w nagłówkach są natywne. Podawaj font-weight jawnie – tak robią wszystkie
     obecne użycia --f-read. */
  --f-head: 'Inter', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-read: 'Playfair Display', Georgia, serif;
  --f-mono: 'CMU Concrete', ui-monospace, monospace;

  /* Layout rails */
  --px: clamp(1rem, 5vw, 4rem);
  --section-py: clamp(3.5rem, 8vw, 5rem);
  --nav-h: 62px;
  /* Najmniejszy cel dotykowy (WCAG 2.5.5, 44 × 44 CSS px). Obowiązuje tylko przy
     `pointer: coarse` – controls.css, blok „CEL DOTYKOWY". */
  --tap: 44px;
  /* Szerokości treści podstron (U6, docs/kontrolki-plan.md) – trzy zamiast dziesięciu
     (było: 1200, 1180, 1100, 1000, 960, 900, 880, 860, 736, 720). Liczone jak max-width
     kontenera RAZEM z marginesem bocznym --page-gutter; ten sam model ma .page-header,
     więc lewa krawędź tytułu = lewa krawędź treści pod nim. */
  --w-wide: 1200px;   /* katalogi: artykuły, eksperci, kalendarz; fundacja */
  --w-mid: 880px;     /* ścieżki edukacyjne, źródła, formularze */
  --w-text: 720px;    /* lektura: artykuł, polityka prywatności */
  --page-gutter: clamp(1rem, 4vw, 2rem);
  --ticker-h: 34px;

  /* Motion */
  --t-fast: .2s cubic-bezier(.4,0,.2,1);
  --t-base: .3s cubic-bezier(.4,0,.2,1);
  --t-slow: .45s cubic-bezier(.4,0,.2,1);

  /* Aliasy wstecznej zgodności – podstrony (edukacja, artykuły, słownik, topbar)
     używają krótkich nazw. Jedno źródło wartości: tokeny powyżej. */
  --teal: var(--accent); --teal-bright: var(--accent); --teal-deep: var(--accent-ink); --teal-glow: var(--accent);
  /* E4: na podstronach `--bg-mid` zawsze znaczyło „powierzchnia podniesiona nad stroną",
     a strona jest od E4 szara (--page-bg). Alias wskazuje więc na biel karty, a --bg-light
     (używany na hover) na tło strony – tak samo jak `.rail__row:hover` na portalu.
     Portal używa --c-bg-mid, nie tych aliasów, więc go to nie dotyczy. */
  --bg: var(--c-bg); --bg-mid: var(--card-bg); --bg-light: var(--page-bg);
  --c-bg-light: var(--c-bg-mid);
  --fg: var(--c-fg); --fg-muted: var(--c-fg-muted);
  --border: var(--c-border);

  /* === AERO 2026-09-14 – powierzchnia szklana (wariant W2 z docs/samples/metal-chrome.html).
     WARSTWA OPCJONALNA. Same deklaracje; reguły siedzą w assets/css/aero.css, który
     wczytuje wyłącznie portal.html i tylko wtedy, gdy <html> ma data-surface="aero".
     Zdejmujesz te dwie rzeczy z portal.html i strona wraca do --card-bg co do piksela.

     Aero to szkło, nie metal. Rozbłysk jest ELIPSĄ o środku NAD krawędzią (at 50% -20%),
     więc na powierzchni widać tylko jego dolny łuk – gradient wygasa promieniście i nigdzie
     nie tworzy poziomej linii. To była cała różnica wobec odrzuconego wariantu „chrom".

     Kontrast liczony na ZŁOŻONYM tle, nie na parze tokenów: zdjęcie bg-energy.webp
     (najciemniejszy możliwy piksel) pod --page-veil .88, a na tym dolny kraniec tafli
     (krycie .88, rozbłysk = 0) → #E4ECF4. Najsłabsze pary: --cat-magazyny 4,71,
     --cat-obrot 4,73, --up 4,74. Podniesienie przezroczystości tafli zjada ten zapas –
     0,76 dawało --up 4,41, czyli poniżej progu. Nie obniżaj .88. */
  --aero-face:
    radial-gradient(130% 70% at 50% -20%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.34) 45%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(244,248,252,.70) 55%, rgba(230,239,247,.88) 100%);
  --aero-blur: blur(18px) saturate(160%);
  /* KRAWĘDŹ I GRUBOŚĆ (etap 2 szkła, 2026-09-15). Wzorzec: ikony Liquid Glass w iOS 26 –
     krawędź nie jest jednolitym białym obrysem, tylko jest OŚWIETLONA KIERUNKOWO (górna
     i lewa w świetle, dolna i prawa ciemniejsze, bo załamują tło), a tafla ma grubość:
     tuż pod krawędzią biegnie drugi, miękki rozbłysk (fazka), a przy dolnej krawędzi
     wewnętrzny cień. Wszystko w cieniach wewnętrznych, więc poza kartą nic się nie zmienia.
     Kolejność w --aero-inset: rim górny → rim lewy → cienka jasna linia na samym dole
     (krawędź szkła łapie światło także od strony cienia, jak w iOS) → pod nią ciemniejsze
     pasmo załamania (3 px) → pasmo prawe → fazka górna (3 px, rozmyta) → cień grubości
     od dołu (12 px) → poświata soczewki (24 px).
     Cień zewnętrzny rozbity na kontaktowy (1 px) i miękki (14 px, szerszy niż dotąd),
     żeby karta „stała" nad tłem, nie „leżała" na nim. */
  /* Etap 12 (2026-09-16, uwagi Jana: „krawędzie plastikowo białe"): obrys nie jest już
     jednolitą bielą. Na kartach z oknem rysuje go --aero-rim-ring – gradient stożkowy
     w 1-pikselowym pierścieniu ramki (tło elementu w border-box, okno zakrywa padding-box):
     najjaśniej w lewym górnym rogu (światło), najciemniej w prawym dolnym (załamanie),
     a po drodze półprzezroczyste przejścia – tak wygląda krawędź szkła, nie plastiku.
     Białe pasma wewnętrzne osłabione o połowę; grubość zostaje jako miękki cień od dołu. */
  /* KIERUNEK ŚWIATŁA – stały, z lewego górnego rogu (--aero-lx / --aero-ly = -.707, czyli
     45°), i tak samo liczą z niego swoje przesunięcia --aero-inset, --aero-drop
     i --aero-rim-ring. Kontrastu to nie rusza: pierścień ma 1 px, a poświaty są cieniami
     WEWNĘTRZNYMI na krawędziach, nie warstwą pod tekstem.

     Zostawione jako `var(…, wartość zapasowa)` po etapie 14 („światło wędrujące za kursorem",
     2026-09-16 – 2026-09-19), w którym aero.js wpisywał te trzy zmienne na każdą kartę co
     33 ms, robiąc z kursora jedną lampę dla całej strony. EFEKTU NIE BYŁO WIDAĆ: te trzy
     tokeny są zadeklarowane TU, na :root, więc każdy var(--aero-lx) rozwiązał się już tutaj
     do wartości zapasowej, a karta dziedziczyła gotowy cień. Zmienna wpisana na kartę nie
     miała czego zmienić – sprawdzone getComputedStyle przed i po, 0 kart na 9 stronach
     w obu motywach. Kosztowało za to naprawdę (wariant `bez_swiatla` w pomiar-portal.mjs,
     3 s ruchu myszą, CPU 4× wolniej): kalendarz 6,4 → 3,1 s wątku głównego, portal 3,2 → 1,6 s.
     Pętla usunięta z aero.js 2026-09-19 razem z całym etapem 14.
     Gdyby światło miało kiedyś naprawdę wędrować, nie wystarczy wrócić do pisania zmiennych:
     te trzy tokeny musiałyby być deklarowane na KARCIE (albo zarejestrowane przez @property
     jako nieodziedziczane), inaczej znów nic się nie ruszy. */
  --aero-rim: rgba(255,255,255,.55);
  --aero-rim-ring: conic-gradient(from var(--aero-light-from, 0deg),
    rgba(255,255,255,.60) 0deg, rgba(255,255,255,.28) 70deg, rgba(16,40,80,.22) 135deg,
    rgba(255,255,255,.22) 200deg, rgba(255,255,255,.55) 260deg, rgba(255,255,255,.98) 315deg,
    rgba(255,255,255,.60) 360deg);
  --aero-inset:
    inset calc(var(--aero-lx, -.707) * 1.2px) calc(var(--aero-ly, -.707) * 1.2px) 0 rgba(255,255,255,.58),
    inset calc(var(--aero-lx, -.707) * 3px) calc(var(--aero-ly, -.707) * 3px) 4px -3px rgba(255,255,255,.50),
    inset calc(var(--aero-lx, -.707) * -1.2px) calc(var(--aero-ly, -.707) * -1.2px) 0 rgba(255,255,255,.16),
    inset calc(var(--aero-lx, -.707) * -3px) calc(var(--aero-ly, -.707) * -3px) 4px -3px rgba(16,40,80,.14),
    inset calc(var(--aero-lx, -.707) * -10px) calc(var(--aero-ly, -.707) * -10px) 14px -10px rgba(16,40,80,.10),
    inset 0 0 20px rgba(255,255,255,.22);
  --aero-grid-line: rgba(16,40,80,.14);   /* linie siatki kalendarza nad taflą (etap 12) */
  --aero-drop:
    0 1px 2px rgba(16,40,80,.10),
    calc(var(--aero-lx, -.707) * -5px) calc(var(--aero-ly, -.707) * -5px) 24px rgba(16,40,80,.13);

  /* OKNO NA KOLAŻ (etap 1 szkła, 2026-09-15). Rozmycie z `backdrop-filter` nie miało czego
     rozmywać: pod kartą stoi kolaż pod --page-veil .88, więc obszar źródłowy jest prawie
     jednolity. Na ekranach z tłem przyklejonym (hover + ≥1024 px, ten sam warunek co
     `background-attachment: fixed` na body) karta rysuje więc pod tarczą WŁASNĄ kopię
     kolażu – rozmytą OFFLINE (bg-energy-blur.webp, sigma 18 px, nasycenie ×1,4), w tym
     samym ułożeniu `cover / center top / fixed`, więc kryje się z tłem strony co do piksela.
     Rozmycie w locie znika: koszt zerowy, wygląd ten sam, co przy blur(24px).
     --aero-window-veil: ile bieli nad kolażem POD taflą (zamiast .88 ze strony).
     --aero-face-window: tafla nad oknem – rzadsza niż --aero-face, bo pod nią leży już
     warstwa bieli z okna. Kontrast liczony na NAJCIEMNIEJSZYM pikselu rozmytego kolażu
     (lum .016, czarna skrzynka falownika) pod veil .50 i środkiem tafli .50: --ink-60
     wychodziłoby 3,85, dlatego aero.css zaciemnia --ink-60 wyłącznie na kartach z oknem. */
  /* ETAP 13 (2026-09-16, „brakuje transparentności"): tafla naprawdę przezroczysta.
     Dotąd kolaż mógł dać z siebie kilkanaście procent, bo najciemniejszy piksel kolażu
     (czarna skrzynka falownika, lum .016) wymuszał krycie ~.85 dla --ink-60. Rozwiązanie
     w SAMYM OBRAZIE OKNA, nie w tafli: bg-energy-blur.webp ma podniesione cienie (v' =
     .62 + .38·v, sigma 28) – najciemniejszy piksel ma lum .44, światła i półtony zostają.
     Przy tym veil .14 i tafla .26–.34 (łącznie ~36 % bieli) dają dół tafli nie ciemniejszy
     niż lum ~.62, a barwy tekstu na kartach z oknem są dobrane do tego progu:
     --aero-ink-60 #3F4A55 (5,8 na lum .62), --aero-cat-* (lum ≤ .085 → ≥ 4,5), --aero-up.
     Strona pod kartami zostaje na --page-veil .88 – to okno pokazuje więcej niż otoczenie,
     jak szkło powiększające jasność: świadomie, bo inaczej AA na tekście poza kartami. */
  /* 2026-10-13: po gradiencie (2026-10-09…12) wrócił szary kolaż, a z nim okno z etapu 13 –
     generuje je tools/tlo_serwisu.py, `--check` pilnuje lum min okna ≥ .41 (jest .43). */
  --aero-window-veil: rgba(255,255,255,.14);
  --aero-window-img: url('../img/bg-energy-blur.webp');
  --aero-ink-60: #3F4A55;
  --aero-up: #145688;
  --aero-cat-sieci: #345479;      --aero-cat-wytwarzanie: #704A30;
  --aero-cat-odbiorcy: #653479;   --aero-cat-obrot: #615028;
  --aero-cat-magazyny: #285961;   --aero-cat-regulacje: #79344B;
  --aero-cat-emobility: #3B3479;  --aero-cat-esg: #79346B;
  /* PRZYCISKI (etap 10, 2026-09-16): ta sama krawędź co na kartach, ale w skali 40 px –
     cień grubości 4 px zamiast 12, poświata 10 px zamiast 24; bez tego przycisk wyglądał
     jak mała karta z rozmytą plamą. Primary zostaje na akcencie (kontrast --on-accent
     zmierzony 2026-09-15), dostaje tylko światło od góry i załamanie od dołu. */
  --aero-btn-inset:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.40),
    inset 0 -3px 3px -2px rgba(16,40,80,.16),
    inset 0 0 10px rgba(255,255,255,.35);
  --aero-btn-drop: 0 1px 2px rgba(16,40,80,.10), 0 6px 14px rgba(16,40,80,.12);
  --aero-btn-primary-inset:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -3px 3px -2px rgba(0,0,0,.22),
    inset 0 0 10px rgba(255,255,255,.08);
  --aero-btn-primary-drop: 0 1px 2px rgba(16,40,80,.18), 0 6px 16px rgba(21,94,156,.28);
  --aero-btn-primary-sheen: radial-gradient(120% 90% at 50% -30%, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 70%);
  --aero-spec: .40;         /* krycie odblasku od kursora (etap 6, aero.js) – biel tylko rozjaśnia, kontrastu w jasnym nie rusza */
  --aero-face-window:
    radial-gradient(130% 70% at 50% -20%, rgba(255,255,255,.90) 0%, rgba(255,255,255,.30) 45%, rgba(255,255,255,0) 72%),
    linear-gradient(135deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 65%, rgba(16,40,80,.05) 100%),
    linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.26) 55%, rgba(255,255,255,.34) 100%);
  /* Etap 12 (uwaga Jana: „całość niebieskawa, nie szklista"): tafla jest NEUTRALNA – sama
     biel o różnym kryciu, bez błękitnych odcieni 244/248/252 i 230/239/247 i bez tintu
     akcentu w rogu. Barwę szkło bierze wyłącznie z tego, co pod nim (kolaż), jak Liquid
     Glass; kolaż w oknie ma nasycenie 1,0 zamiast 1,4 (bg-energy-blur.webp przegenerowany).
     Ukośne wymycie zostaje, ale neutralne: światło u góry po lewej, cień u dołu po prawej. */
}

[data-theme="dark"] {
  /* Ciemny papier był podbity zielenią (#131A17) – teraz błękitem, żeby chłód nocnego
     motywu szedł za akcentem. Atrament z ciepłej kości słoniowej #ECEAE2 na neutralny. */
  --paper: #121A21;   --paper-2: #1B242C;
  --ink: #E9ECEF;     --ink-60: #A4ADB6;  --ink-30: #6C757E;
  --rule: rgba(233,236,239,.16);
  --accent: #69A9E6;  --accent-ink: #9AC6F0;
  --up: #6FB0E8;      --down: #E07A6B;    --data: #E0C25C;
  --cat-sieci: #8DA6C4;
  --cat-wytwarzanie: #C4A38D;
  --cat-odbiorcy: #B38DC4;
  --cat-obrot: #C4B38D;
  --cat-magazyny: #8DBDC4;
  --cat-regulacje: #C48D9F;
  --cat-emobility: #928DC4;
  --cat-esg: #C48DB6;
  /* Te same hue rozjaśnione pod ciemny papier – najsłabsze cieplne 6,38:1. */
  --mix-thermal: #D9885C;
  --mix-hydro: #7FA6B0;
  --mix-wind: #9AA3AA;
  --mix-pv: #E0C25C;
  --mix-other: #7FBF8A;
  --cal-ure: #A172F2;  --cal-pse: #5C8AF0;  --cal-cire: #089DC0;
  --cal-ets: #D97706;  --cal-leg: #E66060;  --cal-oze: #5FA9E0;
  --cal-high: #E45858; --cal-med: #D97706;   /* nocne odpowiedniki wag – patrz komentarz w motywie jasnym */
  --cal-low: #93A3B2;
  --a-teal-04: rgba(105,169,230,.05);
  --a-teal-06: rgba(105,169,230,.08);
  --a-teal-08: rgba(105,169,230,.12);
  --a-teal-12: rgba(105,169,230,.16);
  --a-teal-18: rgba(105,169,230,.22);
  --a-teal-25: rgba(105,169,230,.28);
  --a-teal-35: rgba(105,169,230,.36);
  --c-blue: #5FB0E8;
  --c-bg-elev: var(--paper-2);
  --page-bg: #0E1319;
  --card-bg: #181E25;
  --card-border: #29313A;
  --card-shadow: none;
  --page-veil: rgba(14, 19, 25, .90);
  --on-accent: var(--paper);           /* #121A21 na #69A9E6 = 7,04:1; na #9AC6F0 = 9,80:1 */
  --warn-ink: #E8A33D;                 /* na --card-bg #181E25 = 7,7:1 */
  --expert-join-bg: #121921;           /* --accent 4 % na --page-bg #0E1319; --ink-60 = 7,78:1 */
  --cal-muted-tint: rgba(255,255,255,.01);

  /* AERO, motyw ciemny – decyzja B (2026-09-14): tafla NIEPRZEZROCZYSTA.
     Zostaje rozbłysk, obrys i cień; znika backdrop-filter. Powód jest zmierzony,
     nie estetyczny: prawdziwe szkło nad jasnym punktem tła schodziło do 2,33:1
     na --cat-regulacje, a rozbłysk rozjaśnia taflę dokładnie tam, gdzie siedzi
     nagłówek. Przeszukanie siatki (baza #1B232B–#242D37 × rozbłysk 0,06–0,14)
     dało tylko dwa zestawy powyżej 4,5 – poniżej ten z większym zapasem:
     szczyt tafli #293038, najsłabsza para --cat-regulacje 4,86.
     Rozbłysk 0,06 jest wartością graniczną. Przy 0,10 spada do 4,27. */
  --aero-face:
    radial-gradient(130% 70% at 50% -20%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.015) 45%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, #1B232B 0%, #182028 55%, #12181E 100%);
  --aero-blur: none;
  /* Krawędź i grubość w ciemnym (etap 2): te same warstwy co w jasnym, ale rozbłyski
     słabsze (biel na ciemnej tafli „świeci" mocniej), a załamanie czarne, nie granatowe. */
  --aero-rim: rgba(255,255,255,.14);
  --aero-rim-ring: conic-gradient(from var(--aero-light-from, 0deg),
    rgba(255,255,255,.16) 0deg, rgba(255,255,255,.07) 70deg, rgba(0,0,0,.55) 135deg,
    rgba(255,255,255,.05) 200deg, rgba(255,255,255,.14) 260deg, rgba(255,255,255,.34) 315deg,
    rgba(255,255,255,.16) 360deg);
  --aero-grid-line: rgba(255,255,255,.10);
  /* Etap 14, ciemny: te same warstwy kierunkowe, ale rozbłysk słabszy i załamanie czarne. */
  --aero-inset:
    inset calc(var(--aero-lx, -.707) * 1.2px) calc(var(--aero-ly, -.707) * 1.2px) 0 rgba(255,255,255,.24),
    inset calc(var(--aero-lx, -.707) * 3px) calc(var(--aero-ly, -.707) * 3px) 4px -3px rgba(255,255,255,.16),
    inset calc(var(--aero-lx, -.707) * -1.2px) calc(var(--aero-ly, -.707) * -1.2px) 0 rgba(255,255,255,.06),
    inset calc(var(--aero-lx, -.707) * -3px) calc(var(--aero-ly, -.707) * -3px) 4px -3px rgba(0,0,0,.45),
    inset calc(var(--aero-lx, -.707) * -12px) calc(var(--aero-ly, -.707) * -12px) 16px -10px rgba(0,0,0,.35),
    inset 0 0 24px rgba(255,255,255,.03);
  --aero-drop:
    0 1px 2px rgba(0,0,0,.35),
    calc(var(--aero-lx, -.707) * -5px) calc(var(--aero-ly, -.707) * -5px) 30px rgba(0,0,0,.45);
  /* Okno na kolaż w motywie ciemnym (etap 4 szkła). Tu ogranicza JASNY piksel kolażu, nie
     ciemny: jasny tekst na rozjaśnionej tafli. --ink-60 #A4ADB6 wymagałby tła o lum ≤ .052,
     czyli tafli praktycznie nieprzezroczystej – dlatego na kartach z oknem --aero-ink-60
     jest jaśniejszy (#C4CBD2). Parą wiążącą nie jest jednak --ink-60, tylko --cat-regulacje
     (#C48D9F) na szczycie tafli – tak jak przy tafli nieprzezroczystej (4,86, komentarz wyżej).
     Siatka veil {.70,.75,.80} × tafla {.70–.82} × rozbłysk {.02–.05} liczona na NAJJAŚNIEJSZYM
     pikselu rozmytego kolażu: najwięcej kolażu (6,5 %) przy --cat-regulacje ≥ 4,6 daje
     veil .75 / tafla .74 / rozbłysk .02 → 4,72. Rozbłysk .06 z tafli nieprzezroczystej
     zjadałby cały zapas (3,93) – dlatego tu jest trzy razy słabszy. */
  /* Etap 13, ciemny: osobny obraz okna bg-energy-blur-dark.webp (sigma 28, v' = .38·v,
     maks. lum .11) – w ciemnym ogranicza NAJJAŚNIEJSZY piksel, więc światła są ściśnięte
     zamiast podnoszenia cieni. Veil .30, tafla .46–.56 → szczyt tafli lum ≤ ~.05; barwy
     kategorii rozjaśnione do lum ≥ .40 (--aero-cat-*), żeby trzymać 4,5 na tym szczycie. */
  --aero-window-veil: rgba(14,19,25,.30);
  --aero-window-img: url('../img/bg-energy-blur-dark.webp');
  --aero-ink-60: #C4CBD2;
  --aero-up: var(--up);
  --aero-cat-sieci: #92ACCB;      --aero-cat-wytwarzanie: #C4A38D;
  --aero-cat-odbiorcy: #C49BD7;   --aero-cat-obrot: #C4B38D;
  --aero-cat-magazyny: #8DBDC4;   --aero-cat-regulacje: #D599AD;
  --aero-cat-emobility: #A9A3E2;  --aero-cat-esg: #D298C3;
  --aero-btn-inset:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.06),
    inset 0 -3px 3px -2px rgba(0,0,0,.45),
    inset 0 0 10px rgba(255,255,255,.03);
  --aero-btn-drop: 0 1px 2px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.40);
  --aero-btn-primary-inset:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -3px 3px -2px rgba(0,0,0,.30),
    inset 0 0 10px rgba(255,255,255,.06);
  --aero-btn-primary-drop: 0 1px 2px rgba(0,0,0,.35), 0 6px 16px rgba(105,169,230,.22);
  --aero-btn-primary-sheen: radial-gradient(120% 90% at 50% -30%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%);
  --aero-spec: 0;           /* odblask od kursora WYŁĄCZONY w ciemnym: każdy +.01 bieli nad rozbłyskiem .02 zjada zapas --cat-regulacje (łącznie .04 → 4,44) */
  --aero-face-window:
    radial-gradient(130% 70% at 50% -20%, rgba(255,255,255,.02) 0%, rgba(255,255,255,.005) 45%, rgba(255,255,255,0) 72%),
    linear-gradient(135deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 62%, rgba(105,169,230,.04) 100%),
    linear-gradient(180deg, rgba(27,35,43,.50) 0%, rgba(24,32,40,.46) 55%, rgba(18,24,30,.56) 100%);
}

/* Tryb jasny jest DOMYŚLNY niezależnie od preferencji OS – ciemny włącza się
   wyłącznie przyciskiem (zapisany w localStorage). Brak auto-dark z prefers-color-scheme.
   Blok jawny dla przypadku, gdy JS wymusi data-theme="light". */
[data-theme="light"] {
  --paper: #FAFBFC;   --paper-2: #EFF2F6;
  --ink: #16202B;     --ink-60: #3F4A55;  --ink-30: #9AA3AB;
  --rule: rgba(22,32,43,.14);
  --accent: #155E9C;  --accent-ink: #0E3F6D;
  --page-bg: #F3F5F8;
  --card-bg: #FFFFFF;
  --card-border: #E3E7EC;
  --card-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --page-veil: rgba(243, 245, 248, .88);
  --on-accent: #FFFFFF;
  --warn-ink: #8a5a07;
}