/* ==========================================================================
   THEME.CSS — JEDYNE MIEJSCE, W KTÓRYM ZMIENIASZ WYGLĄD STRONY (KOLORY, CZCIONKI)

   Jak zmienić kolor: zamień wartość po dwukropku, np.
       --color-primary: #991f6e;   ->   --color-primary: #1f6e99;
   Zapisz plik i odśwież stronę (Ctrl+F5). Cała strona zmieni kolor.

   Kolory zapisuj w formacie szesnastkowym: #RRGGBB (np. #991f6e).
   Wartości poniżej to kolory tymczasowe — dopasuj je do swojej marki.
   ========================================================================== */

:root {
    /* =====================================
       MOTYW PRZEWODNI (PRIMARY) — ZMIEŃ TE KOLORY
       Główne przyciski, nagłówki, linki, aktywne elementy menu.
       ===================================== */
    --color-primary: #991f6e;          /* główny kolor marki */
    --color-primary-hover: #7a1858;    /* ten sam kolor, ciemniejszy — po najechaniu myszką */
    --color-on-primary: #ffffff;       /* kolor tekstu NA głównym kolorze (np. napis na przycisku) */

    /* =====================================
       MOTYW DODATKOWY (SECONDARY) — ZMIEŃ TE KOLORY
       Tła sekcji, delikatne dekoracje, dodatkowe przyciski, obramowania.
       ===================================== */
    --color-secondary: #edd5e7;        /* kolor dodatkowy (np. dodatkowy przycisk) */
    --color-secondary-hover: #e2c0d9;  /* kolor dodatkowy po najechaniu myszką */
    --color-on-secondary: #5c1244;     /* tekst NA kolorze dodatkowym */
    --color-secondary-soft: #f7eaf2;   /* bardzo jasny odcień — tło wybranych sekcji */

    /* =====================================
       KOLORY NEUTRALNE
       ===================================== */
    --color-background: #fffafd;       /* tło całej strony */
    --color-surface: #ffffff;          /* tło kart, menu mobilnego, okienek */
    --color-text: #2b2230;             /* główny kolor tekstu */
    --color-text-muted: #6b5f70;       /* tekst pomocniczy (opisy, podpisy) */
    --color-border: #e8d8e2;           /* obramowania i linie */

    /* =====================================
       CZCIONKI
       Nagłówki: jeśli zainstalujesz czcionkę „Pory Roku” (Seasons), wpisz jej nazwę
       na początku listy. Montserrat i Cormorant Garamond ładują się z Google Fonts dopiero
       po zgodzie odwiedzającego w banerze cookies (do tego czasu działają czcionki zapasowe).
       ===================================== */
    --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* =====================================
       POZOSTAŁE USTAWIENIA WYGLĄDU
       ===================================== */
    --radius: 14px;                    /* zaokrąglenie rogów (0 = ostre rogi) */
    --shadow: 0 8px 30px rgba(43, 34, 48, 0.08);
    --overlay: rgba(43, 34, 48, 0.85); /* tło powiększonego zdjęcia */

    /* Logo w nagłówku: wysokość wyświetlania. Nagłówek rośnie razem z logo automatycznie.
       Chcesz większe? Zwiększ tę liczbę (np. 80px). Mniejsze? Zmniejsz (np. 48px).
       Na telefonach logo jest ograniczone do 52px. */
    --logo-height: 64px;

    /* Logo w stopce: wysokość wyświetlania */
    --footer-logo-height: 300px;

    /* =====================================
       ANIMACJE (całkiem wyłączysz je w panelu: Treść strony → Animacje)
       ===================================== */
    --anim-duration: 0.9s;                              /* czas pojawiania się elementów (większa liczba = wolniej) */
    --anim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);     /* „miękkie hamowanie” na końcu ruchu */
    --reveal-distance: 28px;                            /* jak daleko elementy „wypływają” z dołu (0px = tylko pojawianie się) */

    /* Sekcja „Umów wizytę” ze zdjęciem w tle */
    --booking-blur: 8px;                          /* siła rozmycia zdjęcia (0px = ostre, 16px = bardzo rozmyte) */
    --booking-overlay: rgba(237, 213, 231, 0.70); /* kolorowa nakładka na zdjęciu (ostatnia liczba: 0 = przezroczysta, 1 = kryjąca) */
    --booking-card: rgba(255, 255, 255, 0.45);    /* „mleczny” kafelek z tekstem (0 = brak) */

    /* Okienko cookies: tło za okienkiem (ostatnia liczba: 0 = brak przyciemnienia, 1 = całkiem ciemne) */
    --cookie-backdrop: rgba(43, 34, 48, 0.45);
}