/* ===== Theme System — CSS Custom Properties ===== */
/* Light mode is the default; dark mode toggles via [data-theme="dark"] */
/* OS-level dark mode also respected via prefers-color-scheme */

:root,
[data-theme="light"] {
    /* Accent / Brand */
    --accent: #b596ff;
    --accent-dark: #9a7ae0;
    --accent-dark-2: #5b34b0;
    --accent-text: #7c5cbf;
    --accent-glow: rgba(181, 150, 255, 0.15);
    --accent-glow-strong: rgba(181, 150, 255, 0.25);

    /* Surface backgrounds */
    --body-bg: #fff;
    --section-bg: #f8f6fc;
    --section-bg-alt: #f8f5f0;
    --section-bg-dark: #272727;
    --card-bg: #fff;
    --card-hover-bg: #f8f5f0;
    --nav-bg: transparent;
    --nav-scroll-bg: #fff;
    --overlay-bg: rgba(0,0,0,0.45);
    --error-color: #d63031;

    /* Toast notifications */
    --toast-success-text: #15803d;
    --toast-success-bg: rgba(16, 185, 129, 0.12);
    --toast-success-border: rgba(16, 185, 129, 0.3);
    --toast-error-text: #dc2626;
    --toast-error-bg: rgba(239, 68, 68, 0.12);
    --toast-error-border: rgba(239, 68, 68, 0.3);

    /* Text */
    --text-primary: #333;
    --text-heading: #222;
    --text-secondary: #666;
    --text-muted: #777;
    --text-muted-2: #999;
    --text-light: #fff;
    --text-nav: rgba(255,255,255,0.7);
    --text-copyright: #eee;

    /* Borders */
    --border-light: #ececec;
    --border-input: rgba(0,0,0,0.12);
    --border-card: rgba(0,0,0,0.12);

    /* Cards & Surfaces */
    --card-shadow: 0 4px 24px rgba(0,0,0,0.06);
    --card-shadow-hover: 0 8px 32px rgba(0,0,0,0.10);
    --card-border: rgba(0,0,0,0.12);
    --card-hover-border: var(--accent);

    /* Menu cards — light mode matches modal card style */
    --menu-card-bg: var(--section-bg);
    --menu-card-border: var(--border-light);
    --menu-card-text: var(--text-primary);
    --menu-card-desc-text: var(--text-muted-2);
    --menu-card-heading-text: var(--text-heading);

    /* Dropdown / Mega menu (navigation) */
    --dropdown-bg: #fff;
    --dropdown-text: var(--text-heading);
    --mega-menu-bg: #fff;
    --mega-menu-text: var(--text-primary);
    --mega-menu-border: rgba(0,0,0,0.05);
    --mega-menu-shadow: 0 10px 20px rgba(0,0,0,0.05);

    /* Lang nav / theme toggle (over hero — white-based; nav-scroll overrides handle light bg) */
    --lang-text: rgba(255,255,255,0.7);
    --lang-border: rgba(255,255,255,0.2);
    --lang-divider: rgba(255,255,255,0.15);
    --toggle-border: rgba(255,255,255,0.2);

    /* News card */
    --news-card-text: var(--text-primary);

    /* Footer */
    --footer-top-bg: linear-gradient(135deg, #1a1a1a 0%, #2a1545 100%);
    --footer-text: var(--text-light);

    /* Form inputs */
    --input-bg: #f8f6fc;
    --input-text: #333;
    --input-border: rgba(0,0,0,0.35);
    --input-icon: rgba(0,0,0,0.45);
    --input-focus-shadow: 0 0 0 3px var(--accent-glow);

    /* Labels / badges */
    --label-color: rgba(0,0,0,0.55);
    --char-count: rgba(0,0,0,0.45);
    --badge-bg: var(--accent);
    --badge-text: #fff;

    /* Social icons */
    --social-icon: #666;
    --social-bg: rgba(0,0,0,0.10);
    --icon-bg: rgba(181, 150, 255, 0.15);

    /* Theme toggle button */
    --theme-toggle-color: rgba(255,255,255,0.7);
    --theme-toggle-hover-color: #fff;
    --theme-toggle-hover-border: #b596ff;
    --theme-toggle-hover-bg: rgba(181,150,255,0.15);

    /* Tooltip */
    --tooltip-bg: #333;
    --tooltip-text: #fff;
    --tooltip-arrow-border: transparent;
    --tooltip-arrow-side: #333;

    /* Preloader */
    --preloader-bg: #fff;
    --preloader-accent: #e4a853;

    /* Dark backgrounds (used by .bg-black, butn-dark, overlays) */
    --dark-bg: #1a1a1a;
    --menu-section-bg: #2a2a2a;

    /* Miscellaneous */
    --radius: 16px;
    --overlay-dark: rgba(0,0,0,0.45);

    /* WhatsApp */
    --whatsapp-bg: #25D366;
    --whatsapp-hover: #128C7E;

    /* Price tag — solid in light mode */
    --price-tag-bg: var(--accent-dark-2);
    --price-tag-border: transparent;
    --price-tag-text: var(--text-light);
}

[data-theme="dark"] {
    /* Accent stays the same */
    --accent: #b596ff;
    --accent-dark: #9a7ae0;
    --accent-dark-2: #8c71c8;
    --accent-text: var(--accent);
    --accent-glow: rgba(181, 150, 255, 0.15);
    --accent-glow-strong: rgba(181, 150, 255, 0.3);

    /* Surface backgrounds */
    --body-bg: #180826;
    --section-bg: transparent;
    --section-bg-alt: #1e0c30;
    --section-bg-dark: #0d0415;
    --card-bg: #220e38;
    --card-hover-bg: #2a1545;
    --nav-bg: transparent;
    --nav-scroll-bg: #180826;
    --overlay-bg: rgba(0,0,0,0.6);
    --error-color: #ff7d7d;

    /* Toast notifications */
    --toast-success-text: #4ade80;
    --toast-success-bg: rgba(16, 185, 129, 0.15);
    --toast-success-border: rgba(16, 185, 129, 0.35);
    --toast-error-text: #ff7d7d;
    --toast-error-bg: rgba(239, 68, 68, 0.15);
    --toast-error-border: rgba(239, 68, 68, 0.35);

    /* Text */
    --text-primary: #fff;
    --text-heading: #fff;
    --text-secondary: rgba(255,255,255,0.7);
    --text-muted: rgba(255,255,255,0.55);
    --text-muted-2: rgba(255,255,255,0.45);
    --text-light: #fff;
    --text-nav: rgba(255,255,255,0.7);
    --text-copyright: rgba(255,255,255,0.5);

    /* Borders */
    --border-light: rgba(255,255,255,0.10);
    --border-input: rgba(255,255,255,0.15);
    --border-card: rgba(181,150,255,0.15);

    /* Cards & Surfaces */
    --card-shadow: 0 4px 24px rgba(0,0,0,0.3);
    --card-shadow-hover: 0 8px 32px var(--accent-glow);
    --card-border: rgba(181,150,255,0.15);
    --card-hover-border: var(--accent);

    /* Menu cards — glass effect */
    --menu-card-bg: rgba(13, 4, 21, 0.72);
    --menu-card-border: rgba(181, 150, 255, 0.12);
    --menu-card-text: var(--text-light);
    --menu-card-desc-text: rgba(255,255,255,0.55);
    --menu-card-heading-text: var(--text-light);

    /* Dropdown / Mega menu (navigation) */
    --dropdown-bg: #1a1a1a;
    --dropdown-text: var(--text-light);
    --mega-menu-bg: #1a1a1a;
    --mega-menu-text: var(--text-light);
    --mega-menu-border: rgba(255,255,255,0.08);
    --mega-menu-shadow: 0 10px 20px rgba(0,0,0,0.3);

    /* Lang nav / theme toggle — white-based on dark bg */
    --lang-text: rgba(255,255,255,0.7);
    --lang-border: rgba(255,255,255,0.2);
    --lang-divider: rgba(255,255,255,0.15);
    --toggle-border: rgba(255,255,255,0.2);

    /* News card */
    --news-card-text: var(--text-light);

    /* Footer */
    --footer-top-bg: linear-gradient(135deg, #0a0310 0%, #1e0c30 100%);
    --footer-text: var(--text-light);

    /* Form inputs */
    --input-bg: rgba(255,255,255,0.08);
    --input-text: #fff;
    --input-border: rgba(255,255,255,0.15);
    --input-icon: rgba(255,255,255,0.40);
    --input-focus-shadow: 0 0 0 3px var(--accent-glow);

    /* Labels / badges */
    --label-color: rgba(255,255,255,0.55);
    --char-count: rgba(255,255,255,0.55);
    --badge-bg: var(--accent);
    --badge-text: #fff;

    /* Social icons */
    --social-icon: rgba(255,255,255,0.7);
    --social-bg: var(--accent-glow);
    --icon-bg: var(--accent-glow);

    /* Theme toggle button */
    --theme-toggle-color: rgba(255,255,255,0.7);
    --theme-toggle-hover-color: #fff;
    --theme-toggle-hover-border: #b596ff;
    --theme-toggle-hover-bg: rgba(181,150,255,0.25);

    /* Tooltip — lighter bg in dark mode */
    --tooltip-bg: #555;
    --tooltip-text: #fff;
    --tooltip-arrow-border: transparent;
    --tooltip-arrow-side: #555;

    /* Preloader */
    --preloader-bg: #180826;
    --preloader-accent: #e4a853;

    /* Dark backgrounds */
    --dark-bg: #0a0310;
    --menu-section-bg: #0a0310;

    /* Misc */
    --radius: 16px;
    --overlay-dark: rgba(0,0,0,0.6);

    /* WhatsApp — brand colors, same in both themes */
    --whatsapp-bg: #25D366;
    --whatsapp-hover: #128C7E;

    /* Price tag — ghost in dark mode */
    --price-tag-bg: transparent;
    --price-tag-border: var(--accent-dark-2);
    --price-tag-text: var(--accent-dark-2);
}

/* OS-level dark mode detection — respects system preference if JS hasn't run */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --body-bg: #180826;
        --section-bg: transparent;
        --section-bg-alt: #1e0c30;
        --section-bg-dark: #0d0415;
        --card-bg: #220e38;
        --card-hover-bg: #2a1545;
        --overlay-bg: rgba(0,0,0,0.6);
        --nav-scroll-bg: #180826;
        --error-color: #ff7d7d;
        --toast-success-text: #4ade80;
        --toast-success-bg: rgba(16, 185, 129, 0.15);
        --toast-success-border: rgba(16, 185, 129, 0.35);
        --toast-error-text: #ff7d7d;
        --toast-error-bg: rgba(239, 68, 68, 0.15);
        --toast-error-border: rgba(239, 68, 68, 0.35);
        --text-primary: #fff;
        --text-heading: #fff;
        --text-secondary: rgba(255,255,255,0.7);
        --text-muted: rgba(255,255,255,0.55);
        --text-muted-2: rgba(255,255,255,0.45);
        --text-copyright: rgba(255,255,255,0.5);
        --border-light: rgba(255,255,255,0.10);
        --border-input: rgba(255,255,255,0.15);
        --border-card: rgba(181,150,255,0.15);
        --card-shadow: 0 4px 24px rgba(0,0,0,0.3);
        --card-shadow-hover: 0 8px 32px var(--accent-glow);
        --card-border: rgba(181,150,255,0.15);
        --accent-text: var(--accent);
    --menu-card-bg: rgba(13, 4, 21, 0.72);
        --menu-card-border: rgba(181, 150, 255, 0.12);
        --menu-card-text: var(--text-light);
        --menu-card-desc-text: rgba(255,255,255,0.55);
        --menu-card-heading-text: var(--text-light);
    --dropdown-bg: #180826;
        --dropdown-text: var(--text-light);
        --mega-menu-bg: #1a1a1a;
        --mega-menu-text: var(--text-light);
        --mega-menu-border: rgba(255,255,255,0.08);
        --mega-menu-shadow: 0 10px 20px rgba(0,0,0,0.3);
        --news-card-text: var(--text-light);
    --footer-top-bg: linear-gradient(135deg, #0a0310 0%, #1e0c30 100%);
        --footer-text: var(--text-light);
        --input-bg: rgba(255,255,255,0.08);
        --input-text: #fff;
        --input-border: rgba(255,255,255,0.15);
        --input-icon: rgba(255,255,255,0.40);
        --label-color: rgba(255,255,255,0.55);
        --char-count: rgba(255,255,255,0.55);
        --social-icon: rgba(255,255,255,0.7);
        --social-bg: var(--accent-glow);
        --icon-bg: var(--accent-glow);
        --theme-toggle-hover-bg: rgba(181,150,255,0.25);
        --lang-text: rgba(255,255,255,0.7);
        --lang-border: rgba(255,255,255,0.2);
        --lang-divider: rgba(255,255,255,0.15);
        --toggle-border: rgba(255,255,255,0.2);
        --tooltip-bg: #555;
        --tooltip-arrow-side: #555;
    --preloader-bg: #180826;
    --dark-bg: #0a0310;
        --menu-section-bg: #0a0310;
        --overlay-dark: rgba(0,0,0,0.6);

        --whatsapp-bg: #25D366;
        --whatsapp-hover: #128C7E;

        --price-tag-bg: transparent;
        --price-tag-border: var(--accent-dark-2);
        --price-tag-text: var(--accent-dark-2);
    }
}