/* Vistitio — design tokens (źródło: Vistitio System.dc.html) */
:root{
  /* marka */
  --v-primary:#1E2B45;        /* granat · tekst główny, przyciski, sidebar admina */
  --v-primary-hover:#34425C;
  --v-primary-lift:#26324A;   /* karta na granatowym tle (sidebar panelu) — dopisane 2026-09-17 z Vistitio Admin.dc.html */
  --v-secondary:#C8912E;      /* ochra · TYLKO wypełnienie z granatowym tekstem/ikoną (2,9:1 na białym) */
  --v-secondary-text:#8A5F12; /* ochra jako tekst na białym (5,6:1) */
  --v-secondary-soft:#F7EBD3; /* tła, badge */
  --v-secondary-dark:#E0AB4A; /* ochra w trybie ciemnym i na granacie */
  /* Granat, ktory NIE odwraca sie w ciemnym motywie. Dla blokow zaprojektowanych
     jako ciemne (blok „O serwisie", ciemna karta Pomocy, hero): stoi na nich
     ochra i biel, wiec odwrocenie tla zabiloby kontrast. Zwykle przyciski
     i plakietki uzywaja `--v-primary` i maja sie odwracac razem z reszta. */
  --v-granat-staly:#1E2B45;
  /* Atrament na granacie stalym. Wartosci = te, ktorych bloki uzywaly w dzien
     (`--v-n-300` i `--v-n-200`), wiec w jasnym motywie nic sie nie zmienia;
     w ciemnym przestaja sie odwracac razem ze skala neutralna. */
  --v-na-granacie:#D5DCE6;
  --v-na-granacie-cichy:#B9C4D3;
  --v-na-granacie-szept:#7D8BA1;
  /* neutrale (błękitnoszare) */
  --v-n-950:#0E1424; /* tło dark mode */
  --v-n-900:#141C2E;
  --v-n-800:#1E2B45; /* = primary */
  --v-n-700:#34425C;
  --v-n-600:#5B6B85; /* tekst drugorzędny (5,3:1) */
  --v-n-500:#7D8BA1; /* placeholder, ikony nieaktywne (tylko duże) */
  --v-n-400:#A3AFC1; /* disabled */
  --v-n-300:#B9C4D3; /* obramowania */
  --v-n-200:#D5DCE6; /* separatory, placeholder zdjęć */
  --v-n-100:#E9EDF2; /* tło aplikacji i panelu admina */
  --v-n-50:#F5F7FA;  /* tło sekcji www */
  --v-n-0:#FFFFFF;   /* karty, inputy */
  /* PRÓBKI KOLORÓW RZECZY — filtr „Kolor” (handoff „belka filtrów 1A” §10).
     To NIE SĄ tokeny marki: marka ma granat, ochrę i neutrale. To są barwy
     TOWARU, czyli dane, które trzeba narysować. Stoją tutaj, bo kolor w arkuszu
     komponentu jest w tym projekcie zakazany — i słusznie: gdyby leżały
     w komponencie, druga lista kolorów (przy wystawianiu) dostałaby własną kopię.
     Mapa nazwa → barwa jest jedna. */
  --v-probka-czarny:#1B1B1F;
  --v-probka-bialy:#FFFFFF;
  --v-probka-szary:#9AA3AE;
  --v-probka-granatowy:#1E2B45;
  --v-probka-niebieski:#2F6BB3;
  --v-probka-zielony:#2E7D5B;
  --v-probka-czerwony:#B3372F;
  --v-probka-rozowy:#E59AB8;
  --v-probka-fioletowy:#6B4BA8;
  --v-probka-zolty:#E0AB4A;
  --v-probka-pomaranczowy:#D2762B;
  --v-probka-brazowy:#6B4A2F;
  --v-probka-bezowy:#D8C7AE;
  --v-probka-zloty:#C8912E;
  --v-probka-srebrny:#C0C6CE;
  /* Wielobarwne („Kolorowy”, „Kwiatowy”, „Wzór”) nie są jedną barwą — stąd gradient. */
  --v-probka-wiele:linear-gradient(135deg,#E59AB8 0%,#E0AB4A 33%,#2E7D5B 66%,#2F6BB3 100%);

  /* semantyczne (tekst na soft ≥ 4,5:1) */
  --v-success:#2E7D5B; --v-success-soft:#E3F1EA; --v-success-text:#1F5A41;
  --v-error:#B3372F;   --v-error-soft:#F8E5E3;   --v-error-text:#8E2A24;
  --v-error-border:#E0BCB8; /* obwódka przycisku destrukcyjnego ze styleguide'u (sekcja Przyciski) */
  --v-warning:#B8741A; --v-warning-soft:#FBEEDC; --v-warning-text:#7A4B0C;
  --v-info:#2F6BB3;    --v-info-soft:#E4EDF8;    --v-info-text:#22508A;
  /* odznaki sprzedających (handoff 60, poziomy `LV` z makiety): metka, tekst poziomu, tło poziomu */
  --v-odz-1:#B8741A; --v-odz-1-tekst:#7A4B0C; --v-odz-1-tlo:#FBEEDC;
  --v-odz-2:#7D8BA1; --v-odz-2-tekst:#34425C; --v-odz-2-tlo:#E9EDF2;
  --v-odz-3:#E0AB4A; --v-odz-3-tekst:#8A5F12; --v-odz-3-tlo:#F7EBD3; --v-odz-3-ikona:#1E2B45;
  --v-odz-stopka:#FBFCFD; /* stopka tabeli zasad */
  --v-odz-ikona:#FFFFFF;  /* ikona na brązie i srebrze (na złocie granat) */
  /* plakietka „Z aparatu Vistitio” (pozycja 35, handoff v63 „Zdjecie z Aparatu”): ten sam zielony
     co „Nagrane aparatem w aplikacji”. `-foto-` leży NA ZDJĘCIU i nie zmienia się z motywem;
     pigułka poza zdjęciem i dymek zmieniają się (makieta, tabela `specs`). */
  --v-aparat-tlo:#EEF6F1; --v-aparat-tekst:#2E7D4F;
  --v-aparat-foto-tlo:#EEF6F1; --v-aparat-foto-tekst:#2E7D4F; --v-aparat-foto-info:rgba(46,125,79,.7);
  --v-aparat-krazek:rgba(20,28,46,.85); --v-aparat-krazek-ikona:#8FD3A8;
  --v-aparat-dymek:#1E2B45; --v-aparat-dymek-tekst:#FFFFFF;
  /* typografia */
  --v-font-display:"Outfit",sans-serif;  /* nagłówki, liczby, wordmark · 500/600/700 */
  --v-font-body:"Manrope",sans-serif;    /* tekst, UI · 400/500/600/700 */
  --v-ls-display:-.03em; --v-ls-h2:-.025em; --v-ls-h3:-.02em; --v-ls-label:.04em; --v-ls-eyebrow:.08em;
  /* promienie */
  --v-r-badge:6px; --v-r-chip:8px; --v-r-btn:10px; --v-r-input:12px; --v-r-card:16px; --v-r-sheet:24px; --v-r-hero:28px;
  /* odstępy (skala 4) */
  --v-s-1:4px; --v-s-2:8px; --v-s-3:12px; --v-s-4:16px; --v-s-5:20px; --v-s-6:24px; --v-s-7:28px; --v-s-8:32px; --v-s-10:40px; --v-s-12:48px; --v-s-16:64px;
  /* rozmiary i dotyk */
  --v-hit-min:44px;      /* każdy element klikalny */
  --v-h-input:48px;      /* pole web · mobile 52px */
  --v-h-input-mobile:52px;
  --v-h-cta:52px;        /* akcja główna web · mobile 56px */
  --v-h-cta-mobile:56px;
  --v-h-chip:38px; --v-h-badge:24px; --v-h-row:44px;
  /* skala typograficzna (px / line-height) */
  --v-t-display:40px/1.1; --v-t-h1:30px/1.15; --v-t-h2:24px/1.2; --v-t-h3:18px/1.3;
  --v-t-money:32px/1; --v-t-body:15px/1.6; --v-t-ui:14px/1.4; --v-t-label:12px/1.35; --v-t-note:12px/1.55;
  /* szerokości i siatki */
  --v-w-page:1240px;     /* kontener web */
  --v-w-text:720px;      /* maks. szerokość akapitu */
  --v-w-mobile:390px;    /* ramka prototypu mobile */
  --v-bp-sm:480px; --v-bp-md:760px; --v-bp-lg:1024px; --v-bp-xl:1280px;
  /* warstwy */
  --v-z-header:30; --v-z-dropdown:40; --v-z-sheet:50; --v-z-toast:60;
  /* cienie */
  --v-shadow-sheet:0 12px 40px rgba(20,28,46,.14);
  --v-shadow-card:0 12px 40px rgba(20,28,46,.10);
  --v-shadow-knob:0 1px 3px rgba(20,28,46,.2);
  --v-shadow-bottom-nav:0 -2px 12px rgba(20,28,46,.05); /* dolny pasek: cień świeci W GÓRĘ (dopisane 2026-09-17, makieta Nawigacja) */
  /* motion — bez bounce, miękkie osiągnięcie */
  --v-ease:cubic-bezier(.2,.7,.2,1);
  --v-dur-fast:120ms; --v-dur-base:200ms; --v-dur-slow:320ms;
}

/* ===========================================================================
   CIEMNY MOTYW — TOKENAMI, nie selektorami komponentów.

   Zrodlo palety: „Vistitio Dark i Stany.dc.html" (ekrany Dark feed, Dark oferta,
   Dark pieniadze, Dark czat). Wyciagniete z niej kolory, ktorych nie bylo
   w tokenach: #1B2436 (karta), #26324A (obwodka i tlo wyniesione), #5DBB8F
   (zielen czytelna na ciemnym).

   Jak to dziala: NIE dopisujemy regul do komponentow, tylko PRZEDEFINIOWUJEMY
   te same tokeny. Serwis uzywa ich konsekwentnie parami — `--v-primary` jako
   atrament, `--v-n-0` jako powierzchnia — wiec odwrocenie skali neutralnej
   odwraca caly interfejs naraz, razem z przyciskami (granatowe tlo + bialy
   napis staje sie jasnym tlem + ciemnym napisem).

   Wartosc poczatkowa bierze sie z systemu (`prefers-color-scheme`), a wybor
   z Profilu nadpisuje ja atrybutem `data-motyw` na `<html>` — tak mowi
   checklista handoffu PWA.

   ⚠️ CIEMNY MOTYW DZIALA WYLACZNIE W ZAINSTALOWANEJ APLIKACJI (DECYZJA Huberta
   05.10). Kazda regula nizej jest zawezona klasa `.jak-aplikacja`, ktora
   `public/js/js-wlaczony.js` stawia na `<html>` przed pierwszym malowaniem.

   Dlaczego: checklista handoffu PWA opisuje ciemny motyw jako funkcje APLIKACJI,
   a my wpielismy go w samo `prefers-color-scheme` — czyli wystarczylo miec ciemny
   motyw w systemie, zeby caly serwis, razem z wersja na laptopie, zrobil sie ciemny.
   To nie byl wybor niczyj: ani nasz, ani osoby ogladajacej. Strona w przegladarce
   jest JASNA zawsze i to jest jedyny jej motyw.
   =========================================================================== */

/* CIEMNY MOTYW NIE WLACZA SIE SAM — NIGDZIE (DECYZJA Huberta 05.10).

   Bylo tu `@media (prefers-color-scheme: dark)`, czyli ciemny motyw systemu
   przestawial serwis bez pytania. Najpierw wszedzie, przez chwile w samej
   aplikacji — a ma byc tak: domyslnie JASNO, takze w zainstalowanej aplikacji,
   i ciemno wylacznie wtedy, gdy ktos sam wybierze to w Profilu.

   Zostaje wiec jedna regula nizej: jawny wybor, i tylko w aplikacji. */


/* Wybor z Profilu nadpisuje system — w obie strony, ale nadal tylko w aplikacji. */
:root.jak-aplikacja[data-motyw="ciemny"] {
  --v-n-0: #1B2436;
  --v-n-50: #141C2E;
  --v-n-100: #26324A;
  --v-n-200: #34425C;
  --v-n-300: #5B6B85;
  --v-n-600: #A3AFC1;
  --v-n-700: #D5DCE6;
  --v-n-800: #E9EDF2;
  --v-n-900: #F5F7FA;
  --v-n-950: #FFFFFF;
  --v-primary: #E9EDF2;
  --v-secondary: #E0AB4A;
  --v-secondary-text: #E0AB4A;
  --v-secondary-soft: #3A2E16;
  --v-success: #5DBB8F;
  --v-success-text: #5DBB8F;
  --v-success-soft: #17301F;
  --v-odz-1-tekst: #E0A15A; --v-odz-1-tlo: #3A2A16;
  --v-odz-2-tekst: #B9C4D3; --v-odz-2-tlo: #26324A;
  --v-odz-3-tekst: #E0AB4A; --v-odz-3-tlo: #3A2E16;
  --v-odz-stopka: #141C2E;
  --v-aparat-tlo: #15291F; --v-aparat-tekst: #6CC08E;
  --v-aparat-dymek: #E9EDF2; --v-aparat-dymek-tekst: #0F1522;
  color-scheme: dark;
}


/* ===========================================================================
   BLOKI, KTORE ZOSTAJA CIEMNE W OBU MOTYWACH.

   Stopka, blok „O serwisie" i pasek „nie prosimy o haslo" sa ZAPROJEKTOWANE
   jako ciemne albo ochrowe powierzchnie z wlasna hierarchia tekstu. Gdy skala
   neutralna odwraca sie dla calego serwisu, one odwracaja sie razem z nia
   i hierarchia rozsypuje sie w kontrast 1,8:1 (zmierzone).

   Zamiast poprawiac kazda klase osobno, PRZYWRACAMY W NICH JASNA SKALE.
   Zmienne CSS dziedzicza sie w dol, wiec jedna deklaracja na bloku naprawia
   wszystko, co w nim siedzi — i nie zmienia niczego w jasnym motywie, bo to
   dokladnie te same wartosci co w `:root`.
   =========================================================================== */
.v-stopka,
.pomoc__o-serwisie,
.v-safety {
  --v-n-0: #FFFFFF;
  --v-n-50: #F5F7FA;
  --v-n-100: #E9EDF2;
  --v-n-200: #D5DCE6;
  --v-n-300: #B9C4D3;
  --v-n-400: #A3AFC1;
  --v-n-500: #7D8BA1;
  --v-n-600: #5B6B85;
  --v-n-700: #34425C;
  --v-n-800: #1E2B45;
  --v-n-900: #141C2E;
  --v-n-950: #0E1424;
  --v-primary: #1E2B45;
  --v-secondary: #C8912E;
  --v-secondary-text: #8A5F12;
  --v-secondary-soft: #F7EBD3;
  --v-success: #2E7D5B;
  --v-success-text: #1F5A41;
  --v-success-soft: #E3F1EA;
}