/* =====================================================
   PALETA KOLORÓW I TYPOGRAFIA — Mermaid Ela
   -----------------------------------------------------
   7 MOTYWÓW DO SZYBKIEJ PODMIANY.

   JAK ZMIENIĆ MOTYW:
   w panelu WordPress → Wygląd → Dostosuj → wybór palety.
   (Technicznie: atrybut data-theme na znaczniku <html>
   w header.php ustawiany jest z opcji Customizera.)

   Dostępne nazwy palet:
       laguna, perla, zachod, ametyst, glebia, tecza, neon

   Kolory dobrane na podstawie zdjęć z sesji.
   Pastelowe: „perla", „zachod", „tecza".
   Nasycone:  „laguna", „ametyst", „glebia", „neon".

   Czcionki są wspólne dla wszystkich motywów (sekcja na dole).
   ===================================================== */


/* ===========================================================
   MOTYW 1 — LAGUNA  (domyślny, nasycony)
   Basenowe ujęcia: ocean blue + fuksja + lila na lodowym cyanie
   =========================================================== */
:root,
:root[data-theme="laguna"] {
    --primary:     #1D7EBA;  /* Ocean Blue    */
    --secondary:   #D8B4D7;  /* Soft Lilac    */
    --accent:      #B35E96;  /* Vivid Fuchsia */

    --pearl:       #E3F2FB;
    --cream:       #F0F9FF;
    --sand:        #D6EAF6;
    --shell:       #BFD9EA;
    --warm-gray:   #64748B;
    --deep-taupe:  #475569;
    --dark-brown:  #0F172A;
    --gold-accent: #B35E96;
    --soft-rose:   #D8B4D7;
    --white:       #FFFFFF;

    --nav-bg:          rgba(240, 249, 255, 0.85);
    --nav-bg-scrolled: rgba(240, 249, 255, 0.96);
    --menu-bg:         rgba(240, 249, 255, 0.98);
}


/* ===========================================================
   MOTYW 2 — PERŁA  (PASTELOWY)
   Opalizujące łuski: blada lila, róż, perła, mięta
   =========================================================== */
:root[data-theme="perla"] {
    --primary:     #8FB8D6;
    --secondary:   #E7C6E4;
    --accent:      #C07AA6;

    --pearl:       #F3E9F4;
    --cream:       #FBF4FA;
    --sand:        #EBDCEC;
    --shell:       #DEC9DD;
    --warm-gray:   #8A7E92;
    --deep-taupe:  #5C5266;
    --dark-brown:  #3A2F44;
    /* Akcent tekstowy przyciemniony do kontrastu AA (>=4.5:1 na białym/kremie);
       dekoracyjny odcień pastelowy pozostaje w --accent/--soft-rose. */
    --gold-accent: #984F80;
    --soft-rose:   #E7C6E4;
    --white:       #FFFFFF;

    --nav-bg:          rgba(251, 244, 250, 0.85);
    --nav-bg-scrolled: rgba(251, 244, 250, 0.96);
    --menu-bg:         rgba(251, 244, 250, 0.98);
}


/* ===========================================================
   MOTYW 3 — ZACHÓD NAD JEZIOREM  (PASTELOWY, ciepły)
   Złota godzina: brzoskwinia, przygaszony róż, miętowa woda, piasek
   =========================================================== */
:root[data-theme="zachod"] {
    --primary:     #6FB4AE;
    --secondary:   #F2C9B0;
    --accent:      #C97E6B;

    --pearl:       #F4E7DC;
    --cream:       #FBF3EC;
    --sand:        #EAD8C8;
    --shell:       #DCC6B4;
    --warm-gray:   #94816F;
    --deep-taupe:  #5E4D40;
    --dark-brown:  #3A2A22;
    --gold-accent: #C2814F;
    --soft-rose:   #E6A98E;
    --white:       #FFFEFB;

    --nav-bg:          rgba(251, 243, 236, 0.85);
    --nav-bg-scrolled: rgba(251, 243, 236, 0.96);
    --menu-bg:         rgba(251, 243, 236, 0.98);
}


/* ===========================================================
   MOTYW 4 — AMETYST  (nasycony, klejnotowy)
   Żywe magentowo-fioletowe ogony: królewski fiolet + fuksja
   =========================================================== */
:root[data-theme="ametyst"] {
    --primary:     #7B3FA0;
    --secondary:   #C04AA0;
    --accent:      #A82C7A;

    --pearl:       #EFE0EE;
    --cream:       #F7EEF6;
    --sand:        #E6D2E6;
    --shell:       #D3B6D2;
    --warm-gray:   #7A6480;
    --deep-taupe:  #4E3A57;
    --dark-brown:  #2A1733;
    --gold-accent: #A82C7A;
    --soft-rose:   #C9569F;
    --white:       #FFFFFF;

    --nav-bg:          rgba(247, 238, 246, 0.85);
    --nav-bg-scrolled: rgba(247, 238, 246, 0.96);
    --menu-bg:         rgba(247, 238, 246, 0.98);
}


/* ===========================================================
   MOTYW 5 — GŁĘBIA  (nasycony, chłodny)
   Mroczne podwodne kadry: głęboki turkus/szmaragd + koralowy akcent
   =========================================================== */
:root[data-theme="glebia"] {
    --primary:     #0E7C86;
    --secondary:   #5BB0B5;
    --accent:      #E0645E;

    --pearl:       #DCEFEE;
    --cream:       #EEF7F6;
    --sand:        #CCE6E4;
    --shell:       #AFD6D3;
    --warm-gray:   #5E7B7A;
    --deep-taupe:  #335150;
    --dark-brown:  #0B2E2E;
    --gold-accent: #D7514B;
    --soft-rose:   #6FBFBC;
    --white:       #FFFFFF;

    --nav-bg:          rgba(238, 247, 246, 0.85);
    --nav-bg-scrolled: rgba(238, 247, 246, 0.96);
    --menu-bg:         rgba(238, 247, 246, 0.98);
}


/* ===========================================================
   MOTYW 6 — TĘCZA  (PASTELOWY)
   Twój zestaw: #cdb4db #ffc8dd #ffafcc #bde0fe #a2d2ff
   Miękkie lila → róż → błękit. Atrament: głęboka śliwka.
   =========================================================== */
:root[data-theme="tecza"] {
    --primary:     #A2D2FF;  /* błękit */
    --secondary:   #CDB4DB;  /* lila   */
    --accent:      #FFAFCC;  /* róż    */

    --pearl:       #E7F1FF;  /* tło z błękitu (bde0fe/a2d2ff) */
    --cream:       #FFF0F6;  /* tło z różu (ffc8dd)           */
    --sand:        #F3E6F5;  /* tło z lila (cdb4db)           */
    --shell:       #D9C7E6;  /* obramowania (lila)           */
    --warm-gray:   #8B83A0;
    --deep-taupe:  #5B5170;
    --dark-brown:  #3B2D52;  /* atrament — głęboka śliwka     */
    --gold-accent: #8A50AE;  /* akcent tekstowy — kontrast AA (>=4.5:1 na jasnym tle) */
    --soft-rose:   #FFAFCC;
    --white:       #FFFFFF;

    --nav-bg:          rgba(255, 245, 250, 0.85);
    --nav-bg-scrolled: rgba(255, 245, 250, 0.96);
    --menu-bg:         rgba(255, 245, 250, 0.98);
}


/* ===========================================================
   MOTYW 7 — NEON  (nasycony pastel)
   Twój zestaw: #fdc5f5 #f7aef8 #b388eb #8093f1 #72ddf7
   Żywe róż/magenta → fiolet → cyan. Atrament: indygo-fiolet.
   =========================================================== */
:root[data-theme="neon"] {
    --primary:     #72DDF7;  /* cyan   */
    --secondary:   #B388EB;  /* fiolet */
    --accent:      #F7AEF8;  /* magenta-róż */

    --pearl:       #EDEBFF;  /* tło z periwinkle (8093f1)  */
    --cream:       #FDF1FC;  /* tło z różu (fdc5f5)         */
    --sand:        #F4E6FB;  /* tło z fioletu (b388eb)      */
    --shell:       #DCC6F0;  /* obramowania (fiolet)        */
    --warm-gray:   #8279A8;
    --deep-taupe:  #4C4170;
    --dark-brown:  #2E2150;  /* atrament — indygo-fiolet    */
    --gold-accent: #B5179E;  /* akcent tekstowy (neon)      */
    --soft-rose:   #F7AEF8;
    --white:       #FFFFFF;

    --nav-bg:          rgba(253, 241, 252, 0.85);
    --nav-bg-scrolled: rgba(253, 241, 252, 0.96);
    --menu-bg:         rgba(253, 241, 252, 0.98);
}


/* ===========================================================
   TYPOGRAFIA — wspólna dla wszystkich motywów
   =========================================================== */
:root {
    --font-display: 'Fraunces', Georgia, serif;                  /* nagłówki */
    --font-body:    'Plus Jakarta Sans', 'Segoe UI', sans-serif; /* treść    */
}