/* ==========================================================================
   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="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;
  }
}