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

.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;
}

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