/* ═══════════════ MOTYW BiznesAI — JEDNO ŹRÓDŁO KOLORÓW ═══════════════
 *
 * PO CO TO POWSTAŁO (06.08.2026). Osiem plików HTML miało własny blok :root
 * z przepisanymi kolorami — zmiana koloru marki wymagała edycji ośmiu miejsc
 * naraz. Paleta zdążyła się już rozjechać: polityka prywatności i regulamin
 * deklarowały akcent #3E6DFF, niebieski sprzed przejścia na zieloną #17A673.
 *
 * Uczciwie: ten konkretny rozjazd BYŁ NIEWIDOCZNY. Sprawdzone zrzutami przed
 * i po — obie strony wyglądają identycznie, bo var(--accent) nie występuje
 * w nich ani razu. To była martwa deklaracja, nie zepsuty wygląd. Ale dokładnie
 * tak zaczyna się dryf: ktoś dopisze na tych stronach jeden przycisk używający
 * --accent i dostanie niebieski w zielonym produkcie, nie rozumiejąc dlaczego.
 *
 * ODTĄD: kolor marki zmienia się TUTAJ i tylko tutaj.
 *
 * CO ZOSTAŁO DO DECYZJI: privacy.html i terms.html kolorują linki wpisanym
 * na sztywno #9DB7FF (jasnoniebieski), a notatki #FFC94D. To realna, WIDOCZNA
 * niespójność z zieloną marką — ale zmiana koloru linków to decyzja projektowa,
 * nie porządkowanie kodu, więc zostawiona świadomie.
 *
 * DWA NAZEWNICTWA. index.html od zawsze używa --ink-soft/--ink-xsoft, a reszta
 * plików --soft/--xsoft. To ta sama barwa pod dwiema nazwami. Zamiast przepisywać
 * setki użyć w obu kierunkach (i ryzykować, że któreś się przeoczy), definiujemy
 * oba komplety o identycznych wartościach. Nowy kod niech używa --ink-soft.
 *
 * CZEGO TU NIE MA — świadomie:
 *  · --radius: 14px w aplikacji, 16px na landingu, 18px na powitaniu. Różne
 *    zaokrąglenia to decyzja projektowa każdej strony, nie rozjazd.
 *  · paleta welcome.html: ciemniejsza (#0A0C12) — to ekran-moment po rejestracji
 *    i ma wyglądać inaczej. Nadpisuje motyw u siebie.
 */
:root {
  color-scheme: dark;

  /* tła — od najciemniejszego */
  --bg:#0B0D13;
  --surface:#141826;
  --card:#171C2B;

  /* tekst: pełny, przygaszony, ledwie widoczny */
  --ink:#EDEFF5;
  --ink-soft:#9BA3B5;
  /* #5D6579 dawalo na karcie tylko 2,91:1 — ponizej AA. Etykiety sekcji w menu
     bocznym, podpisy prognoz i czas przy wiadomosciach byly na granicy widocznosci.
     #7D8699 to 4,64:1 i wciaz wyraznie ciemniejszy od --ink-soft, wiec hierarchia
     trzech poziomow tekstu zostaje zachowana. */
  --ink-xsoft:#7D8699;
  --soft:#9BA3B5;      /* alias --ink-soft  (crm, landing, booking, staff, dokumenty) */
  --xsoft:#7D8699;     /* alias --ink-xsoft */

  /* kolor marki */
  --accent:#17A673;
  --accent2:#0E8A5F;
  --accent-light:#122A20;
  --accent-light2:#0F241B;   /* druga barwa gradientu na kafelku "Panel salonu" */
  --accent-mid:#2A5C42;
  --chart-grid:rgba(255,255,255,.07);

  /* Odnośniki w tekście mają WŁASNĄ nazwę, a nie pożyczoną z --accent.
     Powód jest mierzalny: --accent (#17A673) na tle #0B0D13 daje kontrast
     6,23:1 — przechodzi WCAG AA, ale wypada poniżej AAA, czyli gorzej niż
     niebieski, który tu wcześniej stał (9,85:1). #34D399 to ten sam zielony,
     co w gradiencie logotypu, i daje 10,10:1 — czyli zmiana na kolor marki
     POPRAWIA czytelność zamiast ją psuć. Na stronach prawnych, gdzie się
     naprawdę czyta, to nie jest szczegół. */
  --link:#34D399;

  /* stany */
  --green:#2EE07C;
  --on-green:#08301C;      /* tekst NA jasnej zieleni — bialy dawalby 1,74:1 */
  --green-light:#0F2A1C;
  --green-mid:#1D4D34;
  --amber:#FFB224;
  --amber-light:#2B2210;
  --amber-mid:#4A3A12;      /* obwodka banera "potwierdz e-mail" */
  --amber-btn:#D97706;      /* przycisk w tym banerze */
  --amber-btn-hover:#B45309;
  --red:#FF5C5C;
  --red-light:#2C1518;

  --border:#242B3D;
  --border-strong:#2B3354;   /* obwódka mocniejsza niż zwykła — karty wyróżnione */

  /* Role, które wcześniej były wpisywane na sztywno w poszczególnych plikach.
     Nazwa mówi DO CZEGO kolor służy, nie jaki jest — dzięki temu jasny motyw
     niżej podmienia wartość, a pliki nie muszą wiedzieć, który motyw działa. */
  --card-2:#141A33;          /* druga barwa gradientu na karcie ceny */
  --accent-soft:#5FD0A0;     /* akcent na tekście: hovery, linki kontaktowe */
  --brand-1:#6EE7B7;         /* gradient logotypu — jaśniejszy koniec */
  --brand-2:#34D399;         /* gradient logotypu — ciemniejszy koniec */
  --cta-1:#0E2419;           /* tło sekcji "zajmij miejsce" */
  --cta-2:#0F2A1C;
  --red-mid:#5B2529;         /* obwódka pola z błędem */
  --red-ink:#FF8080;         /* tekst błędu na własnym tle */
  --glass:rgba(255,255,255,.04);   /* wypełnienie pól i kafelków "ze szkła" */
  /* Obwódka POLA FORMULARZA to nie to samo co linia między sekcjami: WCAG 1.4.11
     wymaga dla granicy elementu, który się klika, kontrastu 3:1 wobec tła.
     Zwykły --border (1,2:1 na bieli) tego nie spełnia — pole byłoby ledwie
     widoczne, zwłaszcza na telefonie w słońcu. */
  --field-line:#313B54;
  --glass-line:rgba(255,255,255,.09);
  --nav-bg:rgba(11,13,19,.82);     /* pasek nawigacji z rozmyciem */
  --shadow-card:0 30px 70px rgba(0,0,0,.5);
  --shadow-btn:0 14px 38px rgba(23,166,115,.35);

  /* Dwie poświaty w tle strony rezerwacji. Do 11.08.2026 były granatowa
     (#0F1A3D) i fioletowa (#190F38) — resztka palety sprzed przejścia na
     zieleń; teraz trzymają kolor marki. W jasnym motywie gasną do bieli. */
  --glow-1:#0F2A1C;
  --glow-2:#122A20;

  /* Hero landingu ma własny komplet nazw, bo jego tło zmienia się inaczej niż
     reszta strony: w ciemnym motywie leży na teksturze łupka, w jasnym tekstura
     gaśnie (--hero-texture:0) i zostaje czysta biel. Typografia musi za tym
     nadążyć, inaczej biały napis wylądowałby na białym tle. */
  --hero-bg:transparent;
  --hero-texture:.55;         /* krycie tekstury łupka pod nagłówkiem */
  /* Krycie kostki 3D ustawia JS wg szerokości ekranu (--cube-a); ten mnożnik
     dokłada do tego motyw: na bieli złota kostka jest dużo bardziej widoczna
     i zjadałaby kontrast nagłówka, który na niej leży. */
  --cube-mul:1;
  --hero-ink:#EDEFF5;
  --hero-soft:#9BA3B5;
  --hero-xsoft:#5D6579;
  --hero-line:#242B3D;        /* obwódka przycisku "Jak to działa" */
  --hero-em-1:#34D399;        /* gradient napisu "Zero prowizji." */
  --hero-em-2:#6EE7B7;
  --hero-badge-bg:#122A20;
  --hero-badge-ink:#5FD0A0;
  --hero-badge-line:#2A5C42;
  --hero-green:#2EE07C;       /* "Za darmo na start" pod przyciskami */
  --hero-btn-1:#17A673;       /* glowny przycisk stoi na ciemnym tle hero, wiec
                                 zostaje jasniejsza zielen niz w reszcie strony */
  --hero-btn-2:#0E8A5F;

  /* ── PANEL APLIKACJI ── */

  /* Blok wyniku podatku i podglad deklaracji: celowo ciemniejszy od karty,
     bo to "wydruk" — liczby, na ktore sie patrzy, a nie formularz. */
  --panel-print:#0A0E19;
  --panel-print-ink:#FFFFFF;
  --panel-print-line:rgba(255,255,255,.1);
  --panel-print-total:#6EE7B7;   /* kwota podsumowania */
  --panel-print-btn:rgba(255,255,255,.1);
  --panel-print-btn-line:rgba(255,255,255,.2);
  --cta-ink:#FFFFFF;             /* naglowek na pasku "Prowadz salon, nie tabelki" */

  /* Plakietki rodzaju podatku (VAT/PIT/ZUS/JPK) — pastelowe tlo + ciemny napis */
  --tag-vat-bg:#EEF2FF;   --tag-vat-ink:#0E8A5F;
  --tag-pit-bg:#F0FDF4;   --tag-pit-ink:#16A34A;
  --tag-zus-bg:#FFFBEB;   --tag-zus-ink:#D97706;
  --tag-jpk-bg:#FEF2F2;   --tag-jpk-ink:#DC2626;
  /* Wiersze terminow: PRZEZROCZYSTY odcien, nie jasna plama. Wpisane tu wczesniej
     #FEF2F2 i #FFFBEB to kolory z motywu JASNEGO — w ciemnym dawaly jasny wiersz,
     na ktorym tekst w kolorze --ink (prawie bialy) mial kontrast 1,05:1, czyli
     najpilniejszy termin podatkowy byl NIEWIDOCZNY. */
  --row-urgent:rgba(255,92,92,.16);    /* wiersz terminu: dzis/po terminie */
  --row-soon:rgba(240,180,60,.14);     /* wiersz terminu: niedlugo */

  /* Kafelki wizyt w kalendarzu i plakietki statusu. Kolor NIESIE ZNACZENIE
     (zarezerwowana / zrealizowana / nieobecnosc / odwolana), wiec kazdy status
     ma wlasny komplet: tlo, obwodka, tekst — osobno na ciemno i na jasno. */
  --appt-booked-bg:#16224A;    --appt-booked-line:#4E7BFF;  --appt-booked-ink:#CFE0FF;
  --appt-done-bg:#0F2A1C;      --appt-done-line:#2EE07C;    --appt-done-ink:#B7F5D2;
  --appt-noshow-bg:#2C1518;    --appt-noshow-line:#FF5C5C;  --appt-noshow-ink:#FFC0C0;
  --appt-cancel-bg:#20222E;    --appt-cancel-line:#565E77;  --appt-cancel-ink:#8A93A8;

  /* Dymek powiadomienia zostaje ciemny w obu motywach — komunikat ma odbijac
     sie od strony, a nie z nia zlewac (tak dziala wiekszosc toastow). */
  --toast-bg:#222B44;
  --toast-line:#33406A;
  --toast-ink:#FFFFFF;

  --btn-white-bg:#FFFFFF;      /* przycisk na ciemnozielonym pasku CTA */
  --btn-white-ink:#10131B;
  --btn-white-hover:#EFF6FF;
  --scroll-thumb:#2B3247;
  /* Hover głównych przycisków. Do 30.08.2026 stał tu NIEBIESKI #5B82FF —
     pozostałość po palecie sprzed przejścia na zieleń: każdy główny przycisk
     zmieniał kolor na obcy marce dopiero po najechaniu, więc nikt tego nie
     zauważał na zrzutach. Teraz jaśniejsza zieleń z tej samej rodziny co --accent. */
  --accent-h:#12B87F;

  /* Ekran logowania. Lewy panel (logo + lista funkcji) zostaje ciemnym plakatem
     marki w obu motywach — na telefonie i tak jest ukryty. Formularz po prawej
     idzie juz za motywem, bo to jedyne, co widac na waskim ekranie. */
  --auth-page-bg:#05070D;           /* tlo calego ekranu logowania (za karta) */
  --auth-page-1:#0C2A20;            /* dwie zielone poswiaty na tym tle */
  --auth-page-2:#0A2119;
  --auth-bg:rgba(8,10,20,.97);      /* tlo kolumny z formularzem */
  /* UWAGA: o tle formularza decyduje --auth-bg-2 z bloku "LOGIN — STYL V2",
     ktory stoi nizej w app.css i nadpisuje regule bazowa. Zmiana samego
     --auth-bg nic nie da — to klasyczna pulapka tego pliku. */
  --auth-bg-2:rgba(10,13,24,.86);
  --auth-field-focus:rgba(23,166,115,.08);
  --auth-split-line:rgba(95,208,160,.16);
  --auth-split-shadow:0 0 0 1px rgba(95,208,160,.14),0 60px 140px rgba(0,0,0,.85),0 0 90px rgba(23,166,115,.16);
  --auth-poster-1:#0a0f1e;          /* lewy plakat marki — ciemny w obu motywach */
  --auth-poster-2:#0d1633;
  --auth-poster-3:#080d1a;
  --auth-poster-4:#0A0F1F;
  --auth-poster-ink:rgba(255,255,255,.92);
  --auth-poster-soft:rgba(255,255,255,.5);
  --auth-poster-line:rgba(95,208,160,.24);
  --auth-poster-fill:rgba(255,255,255,.045);
  --auth-poster-wash:rgba(10,15,30,.65);   /* srodek gradientu na plakacie */
  --welcome-badge-ink:#4ADE80;      /* "Online" na zielonym pasku powitania */
  --auth-ink:rgba(255,255,255,.92);
  --auth-soft:rgba(255,255,255,.5);
  --auth-xsoft:rgba(255,255,255,.35);
  --auth-label:rgba(255,255,255,.4);
  --auth-placeholder:rgba(255,255,255,.2);
  --auth-field-bg:rgba(255,255,255,.045);
  --auth-field-line:rgba(255,255,255,.09);
  --auth-tabs-bg:rgba(255,255,255,.05);
  --auth-tabs-line:rgba(255,255,255,.09);
  --auth-foot:rgba(255,255,255,.2);
}

/* ═══════════════ MOTYW JASNY ═══════════════
 *
 * Włącza się sam, gdy telefon albo system ma ustawiony tryb jasny — nic nie
 * trzeba klikać. Decyzja Darii (11.08.2026): na telefonie w słońcu ciemny
 * ekran jest nieczytelny, a większość ludzi trzyma telefon w trybie jasnym.
 *
 * ZASADA: tutaj podmieniamy TYLKO wartości zmiennych. Jeśli coś nie zmienia
 * się razem z motywem, to znaczy, że w pliku został kolor wpisany na sztywno —
 * naprawiać u źródła (zamienić na var), nie dopisywać wyjątków w tym bloku.
 *
 * Kontrasty policzone, nie dobrane na oko (WCAG AA = 4,5:1 dla zwykłego tekstu):
 * tekst główny 18,4:1 · przygaszony 6,5:1 · link 5,4:1 · biały na przycisku 5,9:1.
 */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --bg:#FFFFFF;
    --surface:#F4F6F9;
    --card:#FFFFFF;
    --card-2:#F7F9FC;

    --ink:#10141C;
    --ink-soft:#565E70;
    --ink-xsoft:#8A92A3;
    --soft:#565E70;
    --xsoft:#8A92A3;

    /* Zieleń marki ciemnieje: #17A673 na bieli daje tylko 3,2:1, czyli biały
       napis na przycisku byłby nieczytelny. #0A7350 to ta sama barwa zejściem
       jasności — 5,9:1 i wygląda jak ta sama marka, nie jak inny kolor. */
    --accent:#0A7350;
    --accent2:#075C40;
    --accent-light:#E6F5EE;
    --accent-light2:#DCF0E6;
    --accent-mid:#B9E3D0;
    --chart-grid:rgba(16,20,28,.10);
    --accent-soft:#0B7A53;
    --link:#0B7A53;
    --brand-1:#12A06C;
    --brand-2:#0B7A53;

    --green:#0F7A46;
    --on-green:#FFFFFF;
    --green-light:#E4F6EA;
    --green-mid:#B7E3C6;
    --amber:#8A5A00;
    --amber-light:#FDF3DC;
    --amber-mid:#F0DFB4;
    --amber-btn:#8A5A00;
    --amber-btn-hover:#6E4800;
    --red:#C42B2B;
    --red-light:#FCEBEB;
    --red-mid:#F3C9C9;
    --red-ink:#B02121;

    --border:#E3E7EE;
    --border-strong:#D3D9E4;

    --cta-1:#E9F6F0;
    --cta-2:#E1F2E9;

    /* Na jasnym tle biel jest niewidzialna — kafelki "ze szkła" muszą
       przyciemniać, nie rozjaśniać. */
    --glass:rgba(16,20,28,.035);
    --field-line:#8A92A3;   /* 3,1:1 na bieli */
    --glass-line:rgba(16,20,28,.10);
    --nav-bg:rgba(255,255,255,.86);
    --shadow-card:0 18px 44px rgba(16,20,28,.10);
    --shadow-btn:0 10px 26px rgba(10,115,80,.28);

    /* Te dwie zmienne to tylko poświata za bohaterem landingu. Pełny jasny
       zestaw --hero-* (tło, tekstura, typografia) stoi NIŻEJ w tym samym bloku,
       przy komentarzu „Hero też jest jasny" — hero w jasnym motywie NIE zostaje
       ciemne. */
    --glow-1:#F1F8F4;
    --glow-2:#EFF6F2;

    /* ── PANEL APLIKACJI ── */
    --panel-print:#F4F6F9;
    --panel-print-ink:#10141C;
    --panel-print-line:rgba(16,20,28,.10);
    --panel-print-total:#0A7350;
    --panel-print-btn:rgba(16,20,28,.05);
    --panel-print-btn-line:#C6CDDA;
    --cta-ink:#10141C;

    /* Pastele z ciemnego motywu są na bieli prawie niewidoczne (1,05:1),
       więc tła plakietek ciemnieją, a napisy schodzą do wartości z kontrastem
       ponad 4,5:1 wobec własnego tła. */
    --tag-vat-bg:#E4EAFB;   --tag-vat-ink:#2F4C9E;
    --tag-pit-bg:#DFF3E6;   --tag-pit-ink:#12703C;
    --tag-zus-bg:#FBEFD5;   --tag-zus-ink:#8A5A00;
    --tag-jpk-bg:#FBE3E3;   --tag-jpk-ink:#A82626;
    --row-urgent:#FDEDED;
    --row-soon:#FCF5E4;

    --appt-booked-bg:#E8EEFC;    --appt-booked-line:#3B62D6;  --appt-booked-ink:#1C3A8A;
    --appt-done-bg:#E4F6EA;      --appt-done-line:#0F7A46;    --appt-done-ink:#10603A;
    --appt-noshow-bg:#FDEDED;    --appt-noshow-line:#C42B2B;  --appt-noshow-ink:#8F2020;
    --appt-cancel-bg:#F0F2F5;    --appt-cancel-line:#B4BCCA;  --appt-cancel-ink:#5F6878;

    --btn-white-bg:#FFFFFF;
    --btn-white-ink:#0A7350;
    --btn-white-hover:#EDF6F1;
    --scroll-thumb:#C6CDDA;
    /* Jasny motyw: hover musi być CIEMNIEJSZY od --accent, inaczej po najechaniu
       nic się nie zmienia (dotąd obie zmienne miały tę samą wartość). */
    --accent-h:#075C40;

    /* Formularz logowania — jedyna część tego ekranu widoczna na telefonie */
    --auth-page-bg:#F4F6F9;
    --auth-page-1:#E8F5EF;
    --auth-page-2:#EDF6F1;
    --auth-bg:#FFFFFF;
    --auth-bg-2:#FFFFFF;
    --auth-field-focus:#EDF7F2;
    --auth-split-line:#D7E5DE;
    --auth-split-shadow:0 24px 60px rgba(16,20,28,.12);
    --auth-ink:#10141C;
    --auth-soft:#565E70;
    --auth-xsoft:#6B7385;
    --auth-label:#565E70;
    --auth-placeholder:#5F6878;   /* 5,2:1 na tle pola — placeholder tez jest tekstem */
    --auth-field-bg:#F4F6F9;
    --auth-field-line:#8A92A3;
    --auth-tabs-bg:#EFF2F7;
    --auth-tabs-line:#DCE1EA;
    --auth-foot:#8A92A3;

    /* Plakat po lewej na ekranie logowania — jasny, z delikatną zielenią zamiast
       czerni; na telefonie i tak go nie widać, ale na laptopie to połowa ekranu. */
    --auth-poster-1:#F2F9F6;
    --auth-poster-2:#E8F4EE;
    --auth-poster-3:#F7FBF9;
    --auth-poster-4:#F2F9F6;
    --auth-poster-ink:#10141C;
    --auth-poster-soft:#565E70;
    --auth-poster-line:#CFE4DA;
    --auth-poster-fill:rgba(10,115,80,.06);
    --auth-poster-wash:rgba(255,255,255,.72);
    --welcome-badge-ink:#0F7A46;

    /* Hero też jest jasny: tekstura ciemnego łupka na bieli dałaby szarą plamę,
       więc gaśnie, a napisy schodzą do kolorów tekstu z reszty strony. */
    --hero-bg:#FFFFFF;
    --hero-texture:0;
    --cube-mul:.45;
    --hero-ink:#10141C;
    --hero-soft:#565E70;
    --hero-xsoft:#8A92A3;
    --hero-line:#C6CDDA;
    --hero-em-1:#0A7350;
    --hero-em-2:#12A06C;
    --hero-badge-bg:#E6F5EE;
    --hero-badge-ink:#0B7A53;
    --hero-badge-line:#B9E3D0;
    --hero-green:#0F7A46;
    --hero-btn-1:#0A7350;
    --hero-btn-2:#075C40;
  }
}