/**
 * Globalne zmienne CSS - używane w całej aplikacji (site + dashboard)
 * Nadpisuj kolory Tabler bez buildowania
 */

/* ========================================
   FIXES TABLER BUGS
   ======================================== */

/* Remove Tabler's scrollbar margin compensation */
@media (min-width: 992px) {
    :host, :root {
        margin-left: 0 !important;
    }
}

/* Remove page-body vertical padding for site layout */
.page-body {
    --tblr-page-padding-y: 0;
}

/* Prevent horizontal scroll */
.page {
    overflow-x: hidden;
}

/* Scroll offset for fixed navbar anchor links */
section[id] {
    scroll-margin-top: 100px;
}

/* Global body background - główne tło strony */
body,
.page {
    background-color: var(--body-background, #F5EFE6);
}

/* ========================================
   KOLORY I ZMIENNE
   ======================================== */
:root {
    /* KOLORY GŁÓWNE TABLER (odkomentuj i zmień) */
    --tblr-primary: #4A3A2A;  /* Zmienione na kolor footer dla spójności navbar active */
    /* --tblr-secondary: #6c757d; */
    /* --tblr-success: #2fb344; */
    /* --tblr-danger: #d63939; */
    /* --tblr-warning: #f76707; */
    /* --tblr-info: #4299e1; */

    /* WŁASNE KOLORY BRAND */
    /* --brand-primary: #123456; */
    /* --brand-secondary: #654321; */
    /* --brand-accent: #ff6b6b; */

    /* ODCIENIE (dla Bootstrap utilities) */
    /* --tblr-primary-rgb: 0, 102, 204; */
    
    /* TYPOGRAFIA */
    /* --tblr-font-sans-serif: 'Inter', system-ui, sans-serif; */
    /* --tblr-border-radius: 8px; */

    /* ========================================
       CUSTOM COLORS - PALETA HARMONIA + PREMIUM
       ======================================== */
    
    /* Tło główne strony (body background) - jasny piasek, spokojny, premium */
    --body-background: #F5EFE6;
    
    /* Navbar - spójny z body lub biały (card-bg) */
    --navbar-bg: #F5EFE6;
    --navbar-border: #4A3A2A;
    
    /* Tło sekcji naprzemiennych */
    --section-alternate-bg: #EACC7F;
    
    /* Tło sekcji wyróżnionej (np. O mnie, rytuał) */
    --section-highlight-bg: #EBD97F;
    
    /* Przyciski główne (CTA – Umów wizytę) */
    --btn-primary-bg: #EBAA07;
    
    /* Hover przycisku - ciemniejszy złoty */
    --btn-primary-hover: #C89205;
    
    /* Przyciski drugorzędne - zieleń równowagi */
    --btn-secondary-bg: #8F9A7A;
    
    /* Nagłówki (H1, H2) - ciemny brąz */
    --heading-color: #4A3A2A;
    
    /* Tekst podstawowy */
    --text-color: #5A4A3A;
    
    /* Ikony / detale / cienkie linie */
    --accent-line-color: #8F9A7A;
    
    /* Sekcja opinie (tło miękkie) */
    --testimonials-bg: #FAF6F0;
    
    /* Karty usług (boxy) - białe z delikatnym cieniem */
    --card-bg: #FFFFFF;
    --card-shadow: 0 2px 8px rgba(74, 58, 42, 0.08);
    
    /* Stopka (footer) */
    --footer-bg: #4A3A2A;
}

/* ========================================
   KLASY DLA CUSTOM KOLORÓW
   ======================================== */

/* ----- TŁA (backgrounds) ----- */

/* Tło główne strony */
.bg-body-custom { background-color: var(--body-background) !important; }

/* Tło sekcji naprzemiennych */
.bg-section-alt { background-color: var(--section-alternate-bg) !important; }

/* Tło sekcji wyróżnionej */
.bg-section-highlight { background-color: var(--section-highlight-bg) !important; }

/* Sekcja opinie (tło miękkie) */
.bg-testimonials { background-color: var(--testimonials-bg) !important; }

/* Stopka */
.bg-footer { background-color: var(--footer-bg) !important; }

/* ----- NAVBAR ----- */

/* Kolor linków w navbarze */
.navbar .nav-link {
    color: var(--heading-color) !important;
}

@media (min-width: 768px) {
    .navbar .nav-link-title {
        font-weight: 700;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .navbar .nav-link {
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
        font-size: 0.8rem;
    }
    .navbar .nav-link-title {
        font-size: 0.8rem;
    }
}

.navbar .nav-link:hover {
    color: var(--btn-primary-bg) !important;
}

/* ----- PRZYCISKI ----- */

/* Przycisk główny (CTA) */
.btn-cta {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: white;
}

.btn-cta:hover {
    background-color: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
    color: white;
}

/* Przycisk drugorzędny */
.btn-secondary-custom {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-bg);
    color: white;
}
.btn-secondary-custom:hover {
    background-color: color-mix(in srgb, var(--btn-secondary-bg) 85%, black);
    border-color: color-mix(in srgb, var(--btn-secondary-bg) 85%, black);
    color: white;
}

/* ----- TYPOGRAFIA - JEDEN FONT W CAŁYM PROJEKCIE ----- */

/* Klasa pomocnicza - ten sam font co navbar (Tabler --tblr-font-sans-serif: Inter) */
.font-base,
.font-base * {
    font-family: var(--tblr-font-sans-serif) !important;
}

/* Wymuszenie spójnego fontu na wszystkich elementach strony */
body,
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body span, body a, body li, body blockquote, body cite, body em, body strong,
body button, body input, body select, body textarea,
.navbar, .navbar * {
    font-family: var(--tblr-font-sans-serif) !important;
}

/* ----- TEKST I NAGŁÓWKI ----- */

/* Nagłówki (H1, H2) */
.text-heading { color: var(--heading-color) !important; }

/* Tekst podstawowy */
.text-body-custom { color: var(--text-color) !important; }

/* Ikony / detale / cienkie linie */
.text-accent { color: var(--accent-line-color) !important; }
.border-accent { border-color: var(--accent-line-color) !important; }

/* ----- KARTY ----- */

/* Karta usług z cieniem */
.card-service {
    background-color: var(--card-bg);
    box-shadow: var(--card-shadow);
}