/* Root Variables - Light Theme Default */
:root {
    /* Brand Colors */
    --brand-color: #5b7a82;
    --primary-color: #5b7a82;
    --primary-hover: #4a6970;
    --category-color: #497c1d;
    --text-color: #333;
    --background-color: #efefed;
    --card-background: #fff;
    --border-color: rgba(0, 0, 0, 0.1);
    --price-color: #5b7a82;
    --header-color: #497c1d;
    --allergen-color: #666;

    /* Text hierarchy - Modal & UI elemekhez */
    --text-primary: #333;
    --text-secondary: #555;
    --text-muted: #888;
    --bg-secondary: #f5f5f5;
    --bg-hover: rgba(0, 0, 0, 0.04);
    --primary: #4CAF50;
    --primary-soft: rgba(91, 122, 130, 0.12);

    /* Typography */
    --menu-font: 'Playfair Display', serif;

    /* Navigation — light mode */
    --nav-background: #efefed;
    --nav-background-mobile: #e6e6e4;
    --nav-button-bg: rgba(0, 0, 0, 0.06);
    --nav-button-hover: rgba(0, 0, 0, 0.1);
    --nav-text: rgba(0, 0, 0, 0.7);

    /* Sticky nav — light mode */
    --sticky-bg: #efefed;
    --sticky-text: rgba(0, 0, 0, 0.6);
    --sticky-text-hover: rgba(0, 0, 0, 0.85);
    --sticky-border: rgba(0, 0, 0, 0.15);
    --sticky-hover-bg: rgba(0, 0, 0, 0.06);
    --sticky-active-bg: rgba(0, 0, 0, 0.08);
    --sticky-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    /* Chip hover */
    --chip-hover-bg: rgba(0, 0, 0, 0.06);
    --chip-hover-border: rgba(0, 0, 0, 0.15);

    /* Spacing */
    --spacing-xs: 0.2rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Shadows & Borders */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-pill: 999px;

    /* Cart */
    --cart-accent: #ff6b6b;
    --cart-accent-hover: #ff5252;
    
    /* =============================================
       Z-INDEX RÉTEGREND (Layer System)
       Minden z-index KIZÁRÓLAG innen jöjjön!
       ============================================= */
    
    /* Alap rétegek (1-100) */
    --z-back: 1;              /* Háttér elemek */
    --z-normal: 10;           /* Normál tartalom */
    --z-local: 10;            /* Lokális kiemelés (pl. close gomb a modalon belül) */
    
    /* Navigáció és Lebegő elemek (800-999) */
    --z-floating: 800;        /* Lebegő gombok: kosár ikon, scroll-to-top */
    --z-nav-sticky: 900;      /* Ragadós navigációs sáv */
    --z-nav-dropdown: 950;    /* Nav lenyíló menük (user dropdown) */
    
    /* Overlay-ek és Panelek (1000-1100) */
    --z-overlay: 1000;        /* Sötétítő háttér réteg */
    --z-panel: 1050;          /* Oldalsó panelek: kosár, kategória menü */
    
    /* Modalok (3000-5000) */
    --z-modal: 3000;          /* Normál modalok: ajánlatok, jogi, QR */
    --z-modal-high: 4000;     /* Kiemelt modalok: étel részletek, kép nagyítás */
    
    /* Rendszerüzenetek (9000-9999) */
    --z-toast: 9000;          /* Toast értesítések */
    --z-popup: 9500;          /* Kritikus popupok */
    --z-loading: 9999;        /* Loading screen - mindig legfelül */
}

/* Dark Theme Colors */
[data-theme="dark"] {
    --background-color: #0f1016;
    --card-background: #1a1a1f;
    --text-color: #e0e0e0;
    --header-color: #7a9e7a;
    --allergen-color: #888;
    --border-color: rgba(255, 255, 255, 0.08);
    --category-color: #6b9b5a;
    --price-color: #7a9e7a;
    --brand-color: #6b9b5a;
    --primary-color: #6bafa2;
    --primary-hover: #5a9e92;
    --primary-soft: rgba(107, 175, 162, 0.15);

    /* Text hierarchy - Dark mode */
    --text-primary: #f0f0f0;
    --text-secondary: #b8b8b8;
    --text-muted: #888;
    --bg-secondary: #2a2a2f;
    --bg-hover: rgba(255, 255, 255, 0.06);
    --primary: #4CAF50;

    /* Navigation - Dark */
    --nav-background: #111115;
    --nav-background-mobile: #1a1a1f;
    --nav-button-bg: #2a2a2f;
    --nav-button-hover: #35353a;
    --nav-text: rgba(255, 255, 255, 0.85);

    /* Sticky nav — dark mode */
    --sticky-bg: #111115;
    --sticky-text: rgba(255, 255, 255, 0.7);
    --sticky-text-hover: rgba(255, 255, 255, 0.9);
    --sticky-border: rgba(255, 255, 255, 0.2);
    --sticky-hover-bg: rgba(255, 255, 255, 0.08);
    --sticky-active-bg: rgba(255, 255, 255, 0.12);
    --sticky-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

    /* Chip hover - Dark */
    --chip-hover-bg: rgba(255, 255, 255, 0.08);
    --chip-hover-border: rgba(255, 255, 255, 0.2);

    --cart-accent: #ff6b6b;
    --cart-accent-hover: #ff5252;
}

/* Auto Theme - System Preference Based */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --background-color: #0f1016;
        --card-background: #1a1a1f;
        --text-color: #e0e0e0;
        --header-color: #7a9e7a;
        --allergen-color: #888;
        --border-color: rgba(255, 255, 255, 0.08);
        --category-color: #6b9b5a;
        --price-color: #7a9e7a;
        --brand-color: #6b9b5a;
        --primary-color: #6bafa2;
        --primary-hover: #5a9e92;
        --primary-soft: rgba(107, 175, 162, 0.15);

        /* Text hierarchy - Auto dark mode */
        --text-primary: #f0f0f0;
        --text-secondary: #b8b8b8;
        --text-muted: #888;
        --bg-secondary: #2a2a2f;
        --bg-hover: rgba(255, 255, 255, 0.06);
        --primary: #4CAF50;

        /* Navigation - Dark */
        --nav-background: #111115;
        --nav-background-mobile: #1a1a1f;
        --nav-button-bg: #2a2a2f;
        --nav-button-hover: #35353a;
        --nav-text: rgba(255, 255, 255, 0.85);

        /* Sticky nav — dark mode */
        --sticky-bg: #111115;
        --sticky-text: rgba(255, 255, 255, 0.7);
        --sticky-text-hover: rgba(255, 255, 255, 0.9);
        --sticky-border: rgba(255, 255, 255, 0.2);
        --sticky-hover-bg: rgba(255, 255, 255, 0.08);
        --sticky-active-bg: rgba(255, 255, 255, 0.12);
        --sticky-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

        /* Chip hover - Dark */
        --chip-hover-bg: rgba(255, 255, 255, 0.08);
        --chip-hover-border: rgba(255, 255, 255, 0.2);

        --cart-accent: #ff6b6b;
        --cart-accent-hover: #ff5252;
    }
}