/* ==========================================================================
   Motywy klubu Moje Atelier
   --------------------------------------------------------------------------
   Barwy trzymamy tutaj jako ROLE („akcent", „powierzchnia", „tekst cichy"),
   a nie jako nazwy kolorów. Dzięki temu wymiana motywu to podmiana kilkunastu
   wartości w jednym pliku — reszta arkuszy nie wie nawet, że coś się zmieniło.

   Złoto zostaje w KAŻDYM motywie. To druga, obok różu, podpora znaku
   Atelier Słodyczy i jedyna rzecz, która trzyma warianty w jednej rodzinie.
   Motyw zmienia nastrój aplikacji, nie markę.

   Wszystkie zestawienia tekstu z tłem przechodzą próg czytelności WCAG 4,5:1
   (duże napisy i elementy 3:1). Sprawdzone rachunkiem, nie okiem.
   ========================================================================== */

:root,
[data-motyw="pudrowy"] {
  /* ------- Pudrowy: motyw podstawowy, wprost z księgi marki ------- */
  --akcent:        #AC5163;   /* przyciski, tytuły, liczby */
  --akcent-na:     #FFFFFF;   /* tekst na akcencie — 5,11:1 */
  --akcent-jasny:  #E9A3AF;   /* stany aktywne, drugi kolor wykresu */
  --akcent-tlo:    #FDEEF1;   /* delikatne panele, paski sekcji */
  --akcent-pasek:  #FAC7CE;   /* pasek nagłówka sekcji */

  --zloto:         #C09338;
  --zloto-jasne:   #E2CE9C;
  --zloto-ciemne:  #8A6520;

  --tlo:           #FDF2F4;
  --powierzchnia:  #FFFFFF;
  --tekst:         #1A1718;

  /*
   * Księga marki podaje tu #8B7C7E, ale przy rozmiarze tekstu ciągłego daje to
   * 3,98:1 — poniżej progu czytelności. Ściemniamy o tyle, ile trzeba, żeby
   * przejść 4,5:1 i ani odcienia więcej.
   */
  --tekst-cichy:   #786A6C;

  --linia:         #F6DFE3;
  --karta-tlo:     radial-gradient(120% 90% at 12% 0%, #FFFFFF 0%, #FEF7F8 42%, #FDEEF1 100%);
  --pieczatka-tlo: #FFFCFD;

  --wykres-nowi:    #AC5163;
  --wykres-odeszli: #C09338;

  --ok:            #2E7D32;
  --blad:          #B3261E;
  --cien:          0 1px 2px rgba(26, 23, 24, .05), 0 10px 30px rgba(172, 81, 99, .10);
  --cien-mocny:    0 2px 6px rgba(26, 23, 24, .06), 0 24px 50px rgba(172, 81, 99, .18);

  color-scheme: light;
}

[data-motyw="grafit"] {
  /* ------- Grafit: ten sam znak, ciemniejszy nastrój -------
     Róż ustępuje grafitowi, złoto przejmuje rolę akcentu. Napis na złotym
     przycisku jest ciemny — biały na złocie jest nieczytelny i księga marki
     mówi o tym wprost. */
  --akcent:        #C09338;
  --akcent-na:     #17161A;   /* 6,41:1 */
  --akcent-jasny:  #E2CE9C;
  --akcent-tlo:    #2A272F;
  --akcent-pasek:  #35313C;

  --zloto:         #D9AC55;
  --zloto-jasne:   #E9D4A4;
  --zloto-ciemne:  #C09338;

  --tlo:           #17161A;
  --powierzchnia:  #211F25;
  --tekst:         #F3F0EB;   /* 14,35:1 na powierzchni */
  --tekst-cichy:   #A29B93;   /* 5,94:1 na powierzchni */

  --linia:         #35323A;
  --karta-tlo:     radial-gradient(120% 90% at 12% 0%, #2C2932 0%, #262229 45%, #1D1B21 100%);
  --pieczatka-tlo: #26232B;

  /* Para sprawdzona walidatorem na ciemnym tle: ΔE 19+ przy pełnym widzeniu
     i przy daltonizmie. Złoto w każdym motywie znaczy „odeszli". */
  --wykres-nowi:    #5B86C4;
  --wykres-odeszli: #B8892F;

  --ok:            #6FBF73;
  --blad:          #E88178;
  --cien:          0 1px 2px rgba(0, 0, 0, .40), 0 10px 30px rgba(0, 0, 0, .45);
  --cien-mocny:    0 2px 6px rgba(0, 0, 0, .45), 0 24px 50px rgba(0, 0, 0, .55);

  color-scheme: dark;
}

[data-motyw="zus"] {
  /* ------- ZUS: skin bufetu w Oddziale ZUS — domyślny w tej aplikacji.
     Zieleń ZUS (logo #007834, serwis #11783B — zweryfikowane 28.08.2026 na
     zus.pl) stonowana pastelowo robi za tło i drugi akcent; róż i złoto
     Atelier zostają pierwszym planem, żeby marka była rozpoznawalna od progu.
     LOGO ZUS NIE używamy — znak jest chroniony. Tylko kolor.
     Kontrasty policzone (28.08.2026): róż na zielonym panelu #EAF4EE 4,54:1
     (tyle co błękit w Urzędzie), tekst cichy #5E6E64 — 5,40:1 na bieli
     i 4,80:1 na końcu gradientu karty, czerń na pasku #BCDCC8 — 12,05:1,
     zieleń ZUS #11783B jako „ok" — 5,57:1 na bieli. ------- */
  --akcent:        #AC5163;   /* róż Atelier — przyciski, tytuły, liczby */
  --akcent-na:     #FFFFFF;   /* 5,11:1 */
  --akcent-jasny:  #E9A3AF;
  --akcent-tlo:    #EAF4EE;   /* pastel zieleni ZUS — panele */
  --akcent-pasek:  #BCDCC8;   /* zieleń ZUS ściszona do pasteli — paski sekcji */

  --zloto:         #C09338;
  --zloto-jasne:   #E2CE9C;
  --zloto-ciemne:  #8A6520;

  --tlo:           #EDF6F0;
  --powierzchnia:  #FFFFFF;
  --tekst:         #1A1718;
  --tekst-cichy:   #5E6E64;   /* 5,40:1 na bieli */

  --linia:         #D6E7DC;
  --karta-tlo:     radial-gradient(120% 90% at 12% 0%, #FFFFFF 0%, #F5FAF7 42%, #EAF4EE 100%);
  --pieczatka-tlo: #FAFDFB;

  /* Para niebieski + ciemne złoto — ta sama, sprawdzona walidatorem
     (także przy daltonizmie), co w rybnickim i klasycznym. Zieleń NIE wchodzi
     na wykres: para zieleń + złoto zlewa się przy deuteranopii. */
  --wykres-nowi:    #2F6FA8;
  --wykres-odeszli: #966A16;

  /* Zieleń ZUS z serwisu wprost — w roli „zgoda/ok" (5,57:1 na bieli). */
  --ok:            #11783B;
  --blad:          #B3261E;
  --cien:          0 1px 2px rgba(26, 23, 24, .05), 0 10px 30px rgba(17, 120, 59, .10);
  --cien-mocny:    0 2px 6px rgba(26, 23, 24, .06), 0 24px 50px rgba(17, 120, 59, .16);

  color-scheme: light;
}

[data-motyw="klasyczny"] {
  /* ------- Klasyczny: kremowy papier, złoto, czerń. Bez różu. ------- */
  --akcent:        #8A6520;
  --akcent-na:     #FFFFFF;   /* 5,30:1 */
  --akcent-jasny:  #C09338;
  --akcent-tlo:    #F4EFE4;
  --akcent-pasek:  #EDE4D2;

  --zloto:         #8A6520;
  --zloto-jasne:   #D9C08A;
  --zloto-ciemne:  #6B4E18;

  --tlo:           #F7F4EF;
  --powierzchnia:  #FFFFFF;
  --tekst:         #1A1718;
  --tekst-cichy:   #6F6862;   /* 5,48:1 na bieli */

  --linia:         #E8E2D8;
  --karta-tlo:     radial-gradient(120% 90% at 12% 0%, #FFFFFF 0%, #FDFBF7 42%, #F4EFE4 100%);
  --pieczatka-tlo: #FFFDF9;

  --wykres-nowi:    #2F6FA8;
  --wykres-odeszli: #966A16;

  --ok:            #2E7D32;
  --blad:          #B3261E;
  --cien:          0 1px 2px rgba(26, 23, 24, .05), 0 10px 30px rgba(138, 101, 32, .10);
  --cien-mocny:    0 2px 6px rgba(26, 23, 24, .06), 0 24px 50px rgba(138, 101, 32, .16);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Nazwy używane w arkuszach aplikacji. Wskazują na role powyżej, więc zmiana
   motywu przenosi się wszędzie sama. Zostawiamy je, bo przepisywanie nazw
   w kilkuset miejscach dałoby ryzyko bez żadnego zysku.
   -------------------------------------------------------------------------- */
:root {
  --pink:        var(--akcent-pasek);
  --pink-soft:   var(--akcent-tlo);
  --pink-strong: var(--akcent);
  --pink-accent: var(--akcent-jasny);
  --bg:          var(--tlo);
  --white:       var(--powierzchnia);
  --ink:         var(--tekst);
  --muted:       var(--tekst-cichy);
  --line:        var(--linia);
  --gold:        var(--zloto);
  --gold-light:  var(--zloto-jasne);
  --gold-dark:   var(--zloto-ciemne);
  --shadow:      var(--cien);
  --shadow-lift: var(--cien-mocny);
  --err:         var(--blad);
}

/* Przejście przy przełączaniu motywu — bez niego zmiana wygląda jak usterka. */
@media (prefers-reduced-motion: no-preference) {
  html.motyw-przejscie,
  html.motyw-przejscie body,
  html.motyw-przejscie .karta,
  html.motyw-przejscie .klubowa {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease;
  }
}