/* ===========================================================================
   ARKUSZ — REWERSY (Rafał 30.10.2026: „ten sam projekt, ale w rewersie
   niebieski oraz czarny, jako przełącznik u góry jak w BM")

   Trzy warianty tego samego arkusza:
     papier     — domyślny, czarny tusz na papierze w siatkę,
     niebieski  — klasyczna światłokopia: białe kreski na granacie,
     czarny     — nocny arkusz: jasny tusz na grafitowym tle.

   Wszystko wisi na tych samych zmiennych, co reszta projektu, więc
   przestawienie palety przestawia całą stronę — razem ze sklepem,
   kartami produktów i rysunkami.

   ⚠️ Pułapka, przez którą to NIE jest zwykła zamiana kolorów:
   `--czarny` pełnił dwie role naraz — „najciemniejszy tusz" (nagłówki)
   i „kolor napisu NA ŻÓŁTYM" (przyciski). W rewersie te role się rozjeżdżają:
   nagłówek musi zjaśnieć, a napis na żółtym guziku ma zostać ciemny.
   Dlatego napis na żółtym dostał własną zmienną `--na-zoltym`, która
   we wszystkich trzech wariantach zostaje ciemna.
   =========================================================================== */

:root { --na-zoltym: #141619; --tekst-2: #4A4843;
  --papier-p: rgba(245, 243, 238, .93);
  --papier-jasny-p: rgba(251, 250, 247, .93);
  --showroom-tlo: rgba(255, 246, 209, .88);
  --stempel: #C0392B; }   /* tusz pieczatki */

/* --- światłokopia ------------------------------------------------------- */

:root[data-motyw="niebieski"] {
  --papier: #103A6A;
  --papier-jasny: #16447B;
  --tusz: #E6EDF8;
  --tusz-slaby: rgba(230, 237, 248, .42);
  --olowek: #FFD84D;                  /* dopiski: żółty czyta się na granacie */
  --zolty: #F4C20D;
  --szary: #9BB3D6;
  --czarny: #FFFFFF;                  /* najmocniejszy tusz = biel */
  --siatka-duza: rgba(255, 255, 255, .17);
  --siatka-mala: rgba(255, 255, 255, .075);
  --tekst-2: #C9D7EC;
  --papier-p: rgba(16, 58, 106, .94);
  --papier-jasny-p: rgba(22, 68, 123, .94);
  --showroom-tlo: rgba(244, 194, 13, .12);
  --stempel: #FF8A72;

  /* paleta sklepu (ma własne nazwy) */
  --tlo: #103A6A;
  --panel: #16447B;
  --panel2: #16447B;
  --linia: #E6EDF8;
  --tekst: #E6EDF8;

  /* asfalt na granacie musi być ciemniejszy niż tło, inaczej ginie */
  --asfalt: #0A2544;
  --asfalt-ciemny: #071B33;
  --farba: #F2F6FD;
  color-scheme: dark;
}

/* --- nocny arkusz ------------------------------------------------------- */

:root[data-motyw="czarny"] {
  --papier: #16181B;
  --papier-jasny: #1E2125;
  --tusz: #E8E6E1;
  --tusz-slaby: rgba(232, 230, 225, .42);
  --olowek: #FFD84D;
  --zolty: #F4C20D;
  --szary: #9A968C;
  --czarny: #FFFFFF;
  --siatka-duza: rgba(255, 255, 255, .10);
  --siatka-mala: rgba(255, 255, 255, .045);
  --tekst-2: #BFBCB4;
  --papier-p: rgba(22, 24, 27, .94);
  --papier-jasny-p: rgba(30, 33, 37, .94);
  --showroom-tlo: rgba(244, 194, 13, .10);
  --stempel: #FF8A72;

  --tlo: #16181B;
  --panel: #1E2125;
  --panel2: #1E2125;
  --linia: #E8E6E1;
  --tekst: #E8E6E1;

  --asfalt: #2A2C30;
  --asfalt-ciemny: #202226;
  --farba: #EFEDE8;
  color-scheme: dark;
}

/* --- napis na żółtym zostaje ciemny we wszystkich wariantach ------------ */

body.arkusz .ark-przycisk,
body.arkusz a.ark-przycisk,
body.arkusz a.ark-przycisk:hover,
body.arkusz .h-nawierzchnia .ark-przycisk,
body.arkusz a.p-btn-zolty, body.arkusz a.p-btn-zolty:hover,
body.arkusz a.e-trasa, body.arkusz a.e-trasa:hover,
body.arkusz a.ark-menu-mob-cta, body.arkusz a.ark-menu-mob-cta:hover,
body.arkusz .p-filtr[aria-pressed="true"],
body.arkusz .p-cta.h-nawierzchnia .p-btn-czarny,
body.arkusz .ark-karta--zolta,
body.arkusz .h-rewizje .h-naglowek b { color: var(--na-zoltym); }

:root[data-motyw="niebieski"] .ark-znak,
:root[data-motyw="czarny"] .ark-znak { background: var(--zolty); color: var(--na-zoltym); }

/* pelna lista: napis na zoltym — zebrana z przeszukania arkuszy stylow */
:root[data-motyw="niebieski"] .ark-przycisk,
:root[data-motyw="czarny"] .ark-przycisk,
:root[data-motyw="niebieski"] body.arkusz a.ark-przycisk:focus-visible,
:root[data-motyw="czarny"] body.arkusz a.ark-przycisk:focus-visible,
:root[data-motyw="niebieski"] body.arkusz a.ark-menu-mob-cta:hover,
:root[data-motyw="czarny"] body.arkusz a.ark-menu-mob-cta:hover,
:root[data-motyw="niebieski"] body.arkusz a.e-trasa:hover,
:root[data-motyw="czarny"] body.arkusz a.e-trasa:hover,
:root[data-motyw="niebieski"] body.arkusz a.p-btn-zolty:hover,
:root[data-motyw="czarny"] body.arkusz a.p-btn-zolty:hover,
:root[data-motyw="niebieski"] body.arkusz .p-btn-zolty,
:root[data-motyw="czarny"] body.arkusz .p-btn-zolty,
:root[data-motyw="niebieski"] body.arkusz .e-social a:hover,
:root[data-motyw="czarny"] body.arkusz .e-social a:hover,
:root[data-motyw="niebieski"] body.arkusz .p-zakladki a:hover,
:root[data-motyw="czarny"] body.arkusz .p-zakladki a:hover,
:root[data-motyw="niebieski"] body.arkusz .p-plik-ikona,
:root[data-motyw="czarny"] body.arkusz .p-plik-ikona,
:root[data-motyw="niebieski"] .e-pin, :root[data-motyw="czarny"] .e-pin,
:root[data-motyw="niebieski"] #formularz button[style*="background: #F4C20D"],
:root[data-motyw="czarny"] #formularz button[style*="background: #F4C20D"],
:root[data-motyw="niebieski"] #kontakt a[style*="background: #F4C20D"],
:root[data-motyw="czarny"] #kontakt a[style*="background: #F4C20D"],
:root[data-motyw="niebieski"] .ilosc-glowna, :root[data-motyw="czarny"] .ilosc-glowna,
:root[data-motyw="niebieski"] .pole-l .lit, :root[data-motyw="czarny"] .pole-l .lit,
:root[data-motyw="niebieski"] .p-chip-f[aria-pressed="true"],
:root[data-motyw="czarny"] .p-chip-f[aria-pressed="true"],
:root[data-motyw="niebieski"] .punkt-dodaj:hover, :root[data-motyw="czarny"] .punkt-dodaj:hover,
:root[data-motyw="niebieski"] .s-start, :root[data-motyw="czarny"] .s-start,
:root[data-motyw="niebieski"] .s-btn-dalej, :root[data-motyw="czarny"] .s-btn-dalej,
:root[data-motyw="niebieski"] .s-projekt, :root[data-motyw="czarny"] .s-projekt,
:root[data-motyw="niebieski"] .s-postep li.teraz, :root[data-motyw="czarny"] .s-postep li.teraz,
:root[data-motyw="niebieski"] .s-wroc:hover, :root[data-motyw="czarny"] .s-wroc:hover,
:root[data-motyw="niebieski"] .zal-ikona, :root[data-motyw="czarny"] .zal-ikona { color: var(--na-zoltym) !important; }

/* --- rzeczy, które w rewersie muszą zmienić sens ------------------------ */

/* Żółte, kremowe plamy robione na papierze (uwagi, wezwania) na ciemnym
   tle są oślepiające — zamieniamy je na przygaszone pole z żółtą listwą. */
:root[data-motyw="niebieski"] .ark-karta--zolta,
:root[data-motyw="czarny"] .ark-karta--zolta,
:root[data-motyw="niebieski"] body.arkusz .p-uwaga,
:root[data-motyw="czarny"] body.arkusz .p-uwaga,
:root[data-motyw="niebieski"] body.arkusz .p-cta:not(.h-nawierzchnia),
:root[data-motyw="czarny"] body.arkusz .p-cta:not(.h-nawierzchnia) {
  background: var(--papier-jasny);
  color: var(--tusz);
}
:root[data-motyw="niebieski"] .kreator:not(.h-nawierzchnia),
:root[data-motyw="czarny"] .kreator:not(.h-nawierzchnia) { background: var(--papier-jasny); }

/* Szrafury rysowane tuszem — w rewersie tusz jest jasny. */
:root[data-motyw="niebieski"] .ark-kostka,
:root[data-motyw="czarny"] .ark-kostka { background: repeating-linear-gradient(90deg, var(--tusz-slaby) 0 2px, rgba(244,194,13,.34) 2px 22px); }
:root[data-motyw="niebieski"] .ark-podsypka,
:root[data-motyw="czarny"] .ark-podsypka { background: radial-gradient(circle at 8px 8px, var(--tusz-slaby) 0 2px, transparent 2px); background-size: 22px 18px; }
:root[data-motyw="niebieski"] .ark-kruszywo,
:root[data-motyw="czarny"] .ark-kruszywo { background: radial-gradient(circle at 14px 16px, var(--tusz-slaby) 0 4px, transparent 4px), radial-gradient(circle at 40px 50px, var(--tusz-slaby) 0 5px, transparent 5px); background-size: 72px 74px; }
:root[data-motyw="niebieski"] .ark-beton,
:root[data-motyw="czarny"] .ark-beton { background: repeating-linear-gradient(45deg, var(--tusz-slaby) 0 1px, transparent 1px 7px), repeating-linear-gradient(135deg, var(--tusz-slaby) 0 1px, transparent 1px 7px); }
:root[data-motyw="niebieski"] .ark-grunt,
:root[data-motyw="czarny"] .ark-grunt { background: repeating-linear-gradient(135deg, var(--tusz-slaby) 0 1px, transparent 1px 9px); }
:root[data-motyw="niebieski"] .ark-projekt,
:root[data-motyw="czarny"] .ark-projekt { background: repeating-linear-gradient(45deg, rgba(255,216,77,.26) 0 1px, transparent 1px 8px); }

/* Mapa dojazdu: podkład i opisy. */
:root[data-motyw="niebieski"] .dj-kropka,
:root[data-motyw="czarny"] .dj-kropka { fill: var(--papier); stroke: var(--tusz); }
:root[data-motyw="niebieski"] .dj-legenda > rect:first-child,
:root[data-motyw="czarny"] .dj-legenda > rect:first-child { fill: var(--papier-jasny); stroke: var(--tusz); }
:root[data-motyw="niebieski"] .dj-baza-opis,
:root[data-motyw="czarny"] .dj-baza-opis { fill: var(--czarny); }
:root[data-motyw="niebieski"] .dj-os,
:root[data-motyw="czarny"] .dj-os { stroke: rgba(255, 255, 255, .4); }
:root[data-motyw="niebieski"] .e-mapa .leaflet-tile-pane,
:root[data-motyw="czarny"] .e-mapa .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.92) contrast(.95); }

/* Karta produktu (okno wstrzykuje własny styl, więc bijemy je wagą). */
:root[data-motyw="niebieski"] .pk-okno,
:root[data-motyw="czarny"] .pk-okno { background-color: var(--papier); color: var(--tusz); border-color: var(--tusz); }
:root[data-motyw="niebieski"] .pk-gl, :root[data-motyw="czarny"] .pk-gl { background: var(--papier-jasny); border-bottom-color: var(--tusz); }
:root[data-motyw="niebieski"] .pk-gl h2, :root[data-motyw="czarny"] .pk-gl h2,
:root[data-motyw="niebieski"] .pk-sek h3, :root[data-motyw="czarny"] .pk-sek h3 { color: var(--czarny); }
:root[data-motyw="niebieski"] .pk-x, :root[data-motyw="czarny"] .pk-x,
:root[data-motyw="niebieski"] .pk-pdf, :root[data-motyw="czarny"] .pk-pdf,
:root[data-motyw="niebieski"] .pk-tab, :root[data-motyw="czarny"] .pk-tab,
:root[data-motyw="niebieski"] .pk-duze, :root[data-motyw="czarny"] .pk-duze,
:root[data-motyw="niebieski"] .pk-mini button, :root[data-motyw="czarny"] .pk-mini button {
  background: var(--papier-jasny); color: var(--tusz); border-color: var(--tusz);
}
:root[data-motyw="niebieski"] .pk-tab tr:first-child td,
:root[data-motyw="czarny"] .pk-tab tr:first-child td { background: var(--papier); color: var(--czarny); }
:root[data-motyw="niebieski"] .pk-sek p, :root[data-motyw="czarny"] .pk-sek p { color: var(--tusz); }
:root[data-motyw="niebieski"] .pk-kody span, :root[data-motyw="czarny"] .pk-kody span { color: var(--na-zoltym); }

/* Sklep: pola i panele biorą kolory ze zmiennych, ale kilka miejsc
   ma wpisane stałe — te trzeba przestawić osobno. */
:root[data-motyw="niebieski"] .wej, :root[data-motyw="czarny"] .wej,
:root[data-motyw="niebieski"] .podglad, :root[data-motyw="czarny"] .podglad,
:root[data-motyw="niebieski"] .lista, :root[data-motyw="czarny"] .lista,
:root[data-motyw="niebieski"] .wybor-pas, :root[data-motyw="czarny"] .wybor-pas,
:root[data-motyw="niebieski"] .strefy-blok, :root[data-motyw="czarny"] .strefy-blok,
:root[data-motyw="niebieski"] .obrz-kostka, :root[data-motyw="czarny"] .obrz-kostka,
:root[data-motyw="niebieski"] .wypust, :root[data-motyw="czarny"] .wypust,
:root[data-motyw="niebieski"] .mapa-rys, :root[data-motyw="czarny"] .mapa-rys,
:root[data-motyw="niebieski"] .prod-info, :root[data-motyw="czarny"] .prod-info {
  background: var(--papier-jasny) !important;
  border-color: var(--tusz) !important;
  color: var(--tekst);
}
:root[data-motyw="niebieski"] .kafel[aria-pressed="true"],
:root[data-motyw="czarny"] .kafel[aria-pressed="true"],
:root[data-motyw="niebieski"] .ksz[aria-pressed="true"],
:root[data-motyw="czarny"] .ksz[aria-pressed="true"],
:root[data-motyw="niebieski"] .prod[aria-pressed="true"],
:root[data-motyw="czarny"] .prod[aria-pressed="true"] { background: rgba(244, 194, 13, .16); border-color: var(--zolty); }
:root[data-motyw="niebieski"] .uwaga, :root[data-motyw="czarny"] .uwaga { background: rgba(244, 194, 13, .10); color: var(--tekst); }
:root[data-motyw="niebieski"] .ilosc-glowna .jak,
:root[data-motyw="czarny"] .ilosc-glowna .jak { color: #4A4020; }

/* --- przełącznik w pasku ------------------------------------------------ */

.ark-rewers { display: flex; align-items: center; gap: 5px; flex: none; }
.ark-rewers button {
  width: 22px; height: 22px;
  padding: 0;
  border: 1px solid var(--tusz);
  cursor: pointer;
  position: relative;
}
.ark-rewers button[aria-pressed="true"] { outline: 2px solid var(--zolty); outline-offset: 1px; }
.ark-rewers button:hover { outline: 2px solid var(--tusz-slaby); outline-offset: 1px; }
.ark-rewers .m-papier    { background: #F5F3EE; }
.ark-rewers .m-niebieski { background: #103A6A; }
.ark-rewers .m-czarny    { background: #16181B; }

@media (max-width: 900px) {
  .ark-rewers button { width: 26px; height: 26px; }   /* palec potrzebuje więcej */
}