/**
 * FolkBeauty Webshop - CSS Változók (v2.0)
 * Itt definiáljuk a színeket, méreteket, betűtípusokat.
 */

 :root {
    /* Színpaletta */
    --piros: #C40011;       /* FolkBeauty fő piros */
    --piros-dark: #8B0000;  /* Sötétebb piros hover/aktív állapothoz */
    --feher: #FFFFFF;
    --zold: #008000;        /* Siker, kosárba helyezés */
    --zold-dark: #006400;
    --terrakotta: #CD5C5C;  /* Melegebb piros árnyalat, pl. akció */
    --narancs: #E86D1F;     /* Akciós badge */
    --barna: #8B4513;       /* Pl. "Egyedi" badge */

    /* Szürkeárnyalatok */
    --szurke-100: #f8f9fa;  /* Világos háttér */
    --szurke-200: #e9ecef;
    --szurke-300: #dee2e6;  /* Keretek */
    --szurke-400: #ced4da;
    --szurke-500: #adb5bd;
    --szurke-600: #6c757d;  /* Szürke szöveg */
    --szurke-700: #495057;
    --szurke-800: #343a40;  /* Sötét szöveg, lábléc háttér */
    --szurke-900: #212529;

    /* Témafüggő Színek (Alapértelmezett: Világos) */
    --szin-hatter: var(--szurke-100);
    --szin-szoveg: var(--szurke-800);
    --szin-kartya-hatter: var(--feher);
    --szin-kartya-szoveg: var(--szurke-800);
    --szin-keret: var(--szurke-300);
    --szin-hover-hatter: var(--szurke-200);
    --szin-link: var(--piros);
    --szin-link-hover: var(--piros-dark);
    --szin-input-hatter: var(--feher);
    --szin-input-szoveg: var(--szurke-800);
    --szin-input-keret: var(--szurke-400);
    --szin-input-focus-keret: var(--piros);
    --szin-navbar-hatter: rgba(255, 255, 255, 0.95);
    --szin-navbar-hatter-gorgetett: rgba(255, 255, 255, 0.98);
    --szin-shadow: rgba(0, 0, 0, 0.1);

    /* Betűtípusok */
    --font-primary: 'Open Sans', sans-serif;
    --font-secondary: 'Playfair Display', serif; /* Címsorokhoz */
    --font-accent: 'Berkshire Swash', cursive;   /* Logó, kiemelt címek */
    --font-handwriting: 'Quintessential', cursive; /* Terméknevekhez (opcionális) */

    /* Betűméretek */
    --font-size-xs: 0.75rem;  /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem;   /* 16px */
    --font-size-md: 1.125rem; /* 18px */
    --font-size-lg: 1.25rem;  /* 20px */
    --font-size-xl: 1.5rem;   /* 24px */
    --font-size-xxl: 2rem;    /* 32px */
    --font-size-display: 2.5rem; /* Nagyobb címek */

    /* Térközök */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-xxl: 3rem;    /* 48px */

    /* Lekerekítések */
    --radius-sm: 0.25rem; /* 4px */
    --radius-md: 0.5rem;  /* 8px */
    --radius-lg: 1rem;    /* 16px */
    --radius-full: 50px;  /* Gombokhoz */

    /* Árnyékok */
    --shadow-sm: 0 1px 3px var(--szin-shadow);
    --shadow-md: 0 4px 10px var(--szin-shadow);
    --shadow-lg: 0 10px 25px var(--szin-shadow);

    /* Áttűnések */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;

    /* Z-indexek */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    --z-index-notification: 1080; /* Kosár értesítés */
    --z-index-lightbox: 2000;   /* Lightbox */
}

/* Sötét Téma Felülírások - Új, modern színpaletta */
body.dark-theme {
    /* Fő téma színek - barátságosabb, kevésbé álmosító sötét tónusok */
    --szin-hatter: #252326;
    --szin-szoveg: #E8E6EC;
    --szin-kartya-hatter: #2D2B30;
    --szin-kartya-szoveg: #E8E6EC;
    --szin-keret: #444148;
    --szin-hover-hatter: #36343A;
    --szin-link: #FF7A7A;
    --szin-link-hover: #E56969;

    /* Űrlap és beviteli mezők */
    --szin-input-hatter: #2A282D;
    --szin-input-szoveg: #E8E6EC;
    --szin-input-keret: #444148;
    --szin-input-focus-keret: #7A6F8C;

    /* Navigáció */
    --szin-navbar-hatter: rgba(37, 35, 38, 0.95);
    --szin-navbar-hatter-gorgetett: rgba(37, 35, 38, 0.98);
    --szin-shadow: rgba(0, 0, 0, 0.2);

    /* Egyéb sötét téma specifikus színek - földszínek beépítése */
    --piros: #FF7A7A;
    --piros-dark: #E56969;
    --zold: #7DCE8A;
    --zold-dark: #63A570;
    --narancs: #E8AD68;
    --terrakotta: #C17A65;
    --barna: #A68268;

    /* Szürke árnyalatok finomhangolása */
    --szurke-600: #ADA9B4;
    --szurke-700: #7A6F8C;
    --szurke-800: #36343A;
    --szurke-900: #1A191C;
}

/* Specifikus elemek sötét témához */
body.dark-theme .text-muted {
    color: #ADA9B4 !important;
}

body.dark-theme .bg-light {
    background-color: #2D2B30 !important;
}

body.dark-theme .table {
    --bs-table-color: var(--szin-szoveg);
    --bs-table-bg: var(--szin-kartya-hatter);
    --bs-table-border-color: var(--szin-keret);
    --bs-table-striped-color: var(--szin-szoveg);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-active-color: var(--szin-szoveg);
    --bs-table-active-bg: rgba(255, 255, 255, 0.07);
    --bs-table-hover-color: var(--szin-szoveg);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.06);
}

body.dark-theme .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Űrlapok sötét mód kiegészítése */
body.dark-theme .form-control,
body.dark-theme .form-select {
    background-color: var(--szin-input-hatter);
    color: var(--szin-input-szoveg);
    border-color: var(--szin-input-keret);
}

body.dark-theme .form-control:focus,
body.dark-theme .form-select:focus {
    background-color: var(--szin-input-hatter);
    color: var(--szin-input-szoveg);
    border-color: var(--szin-input-focus-keret);
    box-shadow: 0 0 0 0.2rem rgba(255, 122, 122, 0.25);
}

body.dark-theme .form-control::placeholder {
    color: #7A6F8C;
    opacity: 0.7;
}

body.dark-theme .form-control:disabled,
body.dark-theme .form-select:disabled,
body.dark-theme .form-control[readonly] {
    background-color: #2A282D;
    border-color: #36343A;
    color: #7A6F8C;
}

body.dark-theme .form-check-input {
    background-color: #2A282D;
    border-color: #444148;
}

body.dark-theme .form-check-input:checked {
    background-color: var(--piros);
    border-color: var(--piros);
}

body.dark-theme .form-check-input:focus {
    border-color: var(--piros);
    box-shadow: 0 0 0 0.2rem rgba(255, 122, 122, 0.25);
}

body.dark-theme .input-group-text {
    background-color: #36343A;
    color: var(--szin-szoveg);
    border-color: var(--szin-input-keret);
}

/* Validation states for dark mode */
body.dark-theme .was-validated .form-control:valid,
body.dark-theme .form-control.is-valid {
    border-color: var(--zold);
    background-color: rgba(125, 206, 138, 0.05);
}

body.dark-theme .was-validated .form-control:invalid,
body.dark-theme .form-control.is-invalid {
    border-color: var(--piros);
    background-color: rgba(255, 122, 122, 0.05);
}

body.dark-theme .valid-feedback {
    color: var(--zold);
}

body.dark-theme .invalid-feedback {
    color: var(--piros);
}

/* Alert komponensek */
body.dark-theme .alert-success {
    color: #a3e9a4;
    background-color: #2C3E33;
    border-color: #63A570;
}

body.dark-theme .alert-danger {
    color: #f8b4ab;
    background-color: #3E2C2C;
    border-color: #E56969;
}

body.dark-theme .alert-warning {
    color: #fbd38d;
    background-color: #3E382C;
    border-color: #E8AD68;
}

body.dark-theme .alert-info {
    color: #90cdf4;
    background-color: #2C323E;
    border-color: #63b3ed;
}

/* Card és kartya stílusok */
body.dark-theme .card {
    background-color: var(--szin-kartya-hatter);
    border-color: var(--szin-keret);
}

body.dark-theme .card-header,
body.dark-theme .card-footer {
    background-color: #36343A;
    border-color: var(--szin-keret);
}

/* Modal és dialógus ablakok */
body.dark-theme .modal-content {
    background-color: var(--szin-kartya-hatter);
    border-color: var(--szin-keret);
}

body.dark-theme .modal-header,
body.dark-theme .modal-footer {
    border-color: var(--szin-keret);
}

/* Breadcrumb */
body.dark-theme .breadcrumb-item.active {
    color: #ADA9B4;
}

body.dark-theme .breadcrumb-item + .breadcrumb-item::before {
    color: #7A6F8C;
}

/* Biztonságos Bootstrap komponens felülírások */
body.dark-theme .dropdown-menu {
    background-color: var(--szin-kartya-hatter);
    border-color: var(--szin-keret);
}

body.dark-theme .dropdown-item {
    color: var(--szin-szoveg);
}

body.dark-theme .dropdown-item:hover,
body.dark-theme .dropdown-item:focus {
    background-color: var(--szin-hover-hatter);
    color: var(--szin-szoveg);
}

body.dark-theme .nav-tabs {
    border-color: var(--szin-keret);
}

body.dark-theme .nav-tabs .nav-link.active {
    background-color: var(--szin-kartya-hatter);
    border-color: var(--szin-keret) var(--szin-keret) var(--szin-kartya-hatter);
    color: var(--szin-szoveg);
}

body.dark-theme .nav-tabs .nav-link:hover,
body.dark-theme .nav-tabs .nav-link:focus {
    border-color: var(--szin-keret);
}