/* ═══════════════════════════════════════════════════════════════════════════
   MOSTEK — tłumaczy klasy Tailwinda na tokeny `marka.css`.

   PO CO. 47 szablonów opisuje kolory klasami narzędziowymi (`bg-blue-600`,
   `text-gray-500`, `bg-white`). Przepisanie ich wszystkich na tokeny to kilkaset
   zmian w plikach, których nikt nie przetestuje naraz — a KAŻDY nowy szablon
   napisany starym nawykiem i tak wypadłby poza system. Mostek odwraca zależność:
   szablon może dalej pisać `bg-blue-600`, a kolor i tak przyjdzie z palety.

   Wydzielony z `base.html` 2026-09-15, bo panel administracyjny (`admin_base.html`)
   ma własny szablon bazowy i przez to NIE MIAŁ ani systemu wizualnego, ani mostka:
   dziewięć stron admina stało na gołym Tailwindzie i dawało 2 200 wad odbioru
   (kontrast 2,5:1 na każdej dacie w każdej tabeli). Jeden plik, dwa szablony bazowe.

   ⚠️ SPECYFICZNOŚĆ. `:where(...)` ma wagę 0 i PRZEGRYWA ze zwykłą klasą Tailwinda
   (0,1,0). Wszędzie, gdzie trzeba pobić klasę z CDN-a, selektor musi być cięższy:
   `html .bg-blue-600` (0,1,1) albo `html.dark .text-gray-400` (0,2,1). Pierwsze
   podejście do tego mostka (2026-09-14) użyło `:where()` i nie zmieniło NICZEGO —
   pomiar wyglądał tak samo przed i po.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── powierzchnie ─────────────────────────────────────────────────────────── */
:where(.bg-white) { background-color: var(--powierzchnia); }
:where(.bg-gray-50) { background-color: var(--powierzchnia-2); }
:where(.bg-gray-100) { background-color: var(--powierzchnia-2); }
:where(.text-gray-900) { color: var(--tekst-naglowek); }

/* ⚠️ Te klasy to w szablonach TEKST POMOCNICZY, a ich domyślne odcienie dawały
   2,3–4,4:1 na naszym tle — poniżej progu WCAG AA. Stąd 181 napisów zgłoszonych
   przez bramkę odbioru 2026-09-14 i kolejne 2 000 w panelu admina 2026-09-15.
   ⚠️ Jeden kolor NIE WYSTARCZY na oba motywy: żeby przejść próg 4,5:1 na bieli,
   trzeba być ciemniejszym niż ~#767676, a na granacie panelu jaśniejszym niż
   ~#8a8a8a. To rozłączne zbiory — stąd dwie reguły, nie jedna. */
/* ⚠️ `text-gray-300` NIE jest tu mapowany świadomie. Ta klasa ma w szablonach dwa
   różne znaczenia: kreskę „brak wartości” na jasnym tle tabeli (za jasna, 1,47:1)
   i treść na ciemnej karcie PIRX (gdzie jest w sam raz). Jedna reguła naprawiłaby
   pierwsze i zepsuła drugie — sprawdzone pomiarem 2026-09-15: po zmapowaniu karta
   PIRX spadła do 4,05:1. Kreski poprawiamy w szablonach, po jednej. */
html:not(.dark) :is(.text-gray-400, .text-gray-500) { color: #55637a; }
html:not(.dark) :is(.text-gray-600, .text-gray-700) { color: #31405c; }
html.dark :is(.text-gray-400, .text-gray-500) { color: #a6b6d2; }
html.dark :is(.text-gray-600, .text-gray-700) { color: #c2cee4; }

/* ── KOLORY SPOZA PALETY ──────────────────────────────────────────────────── */
/* Przycisk niebieski, zielony, fioletowy i indygo w tym samym panelu to nie jest
   „więcej kolorów”, tylko brak informacji: skoro każdy wyróżniony przycisk ma
   inny kolor, żaden nie znaczy „to jest ta jedna ważna czynność”. Sprowadzamy je
   do ról, które coś znaczą (kanon: `marka.css`, nagłówek pliku).
   ⚠️ NIE dotyczy `--tally` — czerwień anteny ma jedno znaczenie i nie wolno jej
   przypisać przyciskowi, który nie wypuszcza sygnału na antenę. */
html :is(.bg-blue-600, .bg-blue-700, .bg-indigo-600, .bg-violet-600, .bg-purple-600,
         .bg-rose-600, .bg-rose-700) {
  background-color: var(--akcent);
  color: var(--akcent-tekst);
}
html :is(.hover\:bg-rose-700:hover, .hover\:bg-rose-800:hover) { background-color: var(--akcent-jasny); }
html :is(.hover\:bg-blue-700:hover, .hover\:bg-blue-800:hover, .hover\:bg-indigo-700:hover,
         .hover\:bg-purple-700:hover) {
  background-color: var(--akcent-jasny);
}
html :is(.bg-green-600, .bg-emerald-600, .bg-green-700, .bg-emerald-700) {
  background-color: var(--powodzenie);
  color: #06281c;
}
html :is(.hover\:bg-green-700:hover, .hover\:bg-emerald-700:hover) {
  background-color: color-mix(in srgb, var(--powodzenie) 82%, #000);
}
/* Odnośnik „niebieski, bo link” — ten sam akcent co przyciski, inaczej strona ma
   dwa różne niebieskie obok siebie. */
html :is(.text-blue-600, .text-blue-500, .text-indigo-600, .text-rose-600, .text-rose-500) { color: var(--akcent); }
html.dark :is(.text-blue-600, .text-blue-500, .text-indigo-600, .text-rose-600, .text-rose-500) { color: var(--akcent-jasny); }

/* Czerwień „to jest nieodwracalne”. Domyślne `red-600` daje na bieli 4,41:1 — o włos
   poniżej progu WCAG AA, czyli dokładnie tyle, żeby nikt nie zauważył, a czytnik
   i słabszy wzrok już tak. Przyciemniamy do wartości, która próg przechodzi. */
html:not(.dark) :is(.text-red-600, .text-red-700, .text-rose-700) { color: #b91c1c; }
html.dark :is(.text-red-600, .text-red-700, .text-rose-700) { color: #f28b82; }

/* Zieleń „jest w pakiecie / gotowe”. `emerald-600` na bieli daje 3,58:1 przy 14 px —
   poniżej progu. Ten odcień przechodzi w obu motywach. */
html:not(.dark) :is(.text-emerald-600, .text-green-600, .text-emerald-700, .text-green-700) { color: #0f6b46; }
html.dark :is(.text-emerald-600, .text-green-600, .text-emerald-700, .text-green-700) { color: #4fd196; }
html:not(.dark) :is(.text-amber-600, .text-amber-700, .text-orange-600) { color: #8a5300; }
html.dark :is(.text-amber-600, .text-amber-700, .text-orange-600) { color: var(--ostrzezenie); }

/* Szarości Tailwinda mają CZTERY rodziny (gray, slate, zinc, neutral) i szablony
   używają ich zamiennie — a mostek do 2026-09-15 znał tylko `gray`. Stąd 29 napisów
   poniżej progu na liście wpłat: wszystkie na `slate-400`. */
html:not(.dark) :is(.text-slate-400, .text-slate-500, .text-zinc-400, .text-zinc-500,
                    .text-neutral-400, .text-neutral-500) { color: #55637a; }
html.dark :is(.text-slate-400, .text-slate-500, .text-zinc-400, .text-zinc-500,
              .text-neutral-400, .text-neutral-500) { color: #a6b6d2; }

/* ── tła pomocnicze w motywie ciemnym ─────────────────────────────────────── */
:where(.dark .bg-rose-50)  { background-color: rgb(136 19 55 / 0.2); }
:where(.dark .bg-blue-50)    { background-color: rgb(30 58 138 / 0.2); }
:where(.dark .bg-green-50)   { background-color: rgb(20 83 45 / 0.2); }
:where(.dark .bg-emerald-50) { background-color: rgb(6 78 59 / 0.2); }
:where(.dark .bg-amber-50)   { background-color: rgb(120 53 15 / 0.2); }
:where(.dark .bg-red-50)     { background-color: rgb(127 29 29 / 0.2); }
:where(.dark .bg-orange-50)  { background-color: rgb(124 45 18 / 0.2); }
:where(.dark .bg-teal-50)    { background-color: rgb(19 78 74 / 0.2); }

/* ── obrysy ───────────────────────────────────────────────────────────────── */
:where(.border-gray-200)  { border-color: var(--wlos); }
:where(.dark .border-rose-200) { border-color: rgb(136 19 55 / 0.4); }
:where(.dark .border-blue-200)   { border-color: rgb(30 58 138 / 0.4); }
:where(.dark .border-emerald-200){ border-color: rgb(6 78 59 / 0.4); }
:where(.dark .border-amber-200)  { border-color: rgb(120 53 15 / 0.4); }
:where(.dark .border-red-200)    { border-color: rgb(127 29 29 / 0.4); }

/* ── CELE DOTYKOWE ────────────────────────────────────────────────────────── */
/* WCAG 2.2 (2.5.8) wymaga 24×24 px. Domyślny `checkbox`/`radio` przeglądarki ma
   13–16 px i żaden szablon tego nie nadpisuje — panel miał ich kilkanaście.
   Powiększamy sam element zamiast dopisywać klasę w 20 miejscach: pole wyboru
   nigdy nie ma powodu być mniejsze. */
input[type="checkbox"], input[type="radio"] {
  /* Dokładnie próg, nie „prawie”. Obrys przezroczysty nie liczy się do rozmiaru
     elementu — sprawdzone pomiarem: przy 18 px + 3 px obrysu bramka nadal widziała
     18×18. Cel musi być duży NAPRAWDĘ, nie w intencji. */
  width: 24px; height: 24px;
  accent-color: var(--akcent);
  cursor: pointer;
  flex: none;
}

/* ── PANEL ADMINISTRACYJNY ────────────────────────────────────────────────── */
/* Boczny pasek administracji chodzi w motywie użytkownika, tak jak reszta panelu —
   osobna, zawsze ciemna konsola była trzecią estetyką w tej samej aplikacji. */
.pasek-admin { background: var(--tlo-glab); border-right: 1px solid var(--wlos); }