/* ============================================
   GurmeClick POS - Theme Variables System
   Light/Dark Mode Support with CSS Variables
   ============================================ */

/* === Light Mode (Default) === */
:root,
[data-theme="light"] {
    /* Background Colors */
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f8fafc;
    --theme-bg-tertiary: #f1f5f9;
    --theme-bg-page: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);

    /* Text Colors */
    --theme-text-primary: #0f172a;
    --theme-text-secondary: #475569;
    --theme-text-muted: #94a3b8;
    --theme-text-inverse: #ffffff;

    /* Glass Morphism */
    --theme-glass-bg: rgba(255, 255, 255, 0.8);
    --theme-glass-bg-hover: rgba(255, 255, 255, 0.95);
    --theme-glass-border: rgba(0, 0, 0, 0.08);
    --theme-glass-border-hover: rgba(0, 0, 0, 0.12);

    /* Card Styles */
    --theme-card-bg: #ffffff;
    --theme-card-bg-hover: #ffffff;
    --theme-card-border: rgba(0, 0, 0, 0.06);
    --theme-card-border-hover: rgba(99, 102, 241, 0.3);
    --theme-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --theme-card-shadow-hover: 0 12px 40px rgba(99, 102, 241, 0.15);

    /* Navbar */
    --theme-navbar-bg: rgba(255, 255, 255, 0.9);
    --theme-navbar-bg-scrolled: rgba(255, 255, 255, 0.98);
    --theme-navbar-border: rgba(0, 0, 0, 0.06);
    --theme-navbar-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    /* Footer */
    --theme-footer-bg: #f1f5f9;
    --theme-footer-border: rgba(0, 0, 0, 0.06);

    /* Mobile Menu */
    --theme-mobile-bg: rgba(255, 255, 255, 0.98);
    --theme-mobile-overlay: rgba(0, 0, 0, 0.3);

    /* Section Backgrounds */
    --theme-section-primary: #ffffff;
    --theme-section-secondary: #f8fafc;
    --theme-section-tertiary: #f1f5f9;

    /* Feature Cards */
    --theme-feature-bg: #ffffff;
    --theme-feature-border: rgba(0, 0, 0, 0.06);
    --theme-feature-icon-bg: rgba(99, 102, 241, 0.1);

    /* Pricing Cards */
    --theme-pricing-bg: #ffffff;
    --theme-pricing-border: rgba(0, 0, 0, 0.08);
    --theme-pricing-popular-bg: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

    /* CTA Section */
    --theme-cta-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%);
    --theme-cta-border: rgba(99, 102, 241, 0.15);

    /* Form Elements */
    --theme-input-bg: #ffffff;
    --theme-input-border: rgba(0, 0, 0, 0.1);
    --theme-input-border-focus: rgba(99, 102, 241, 0.5);
    --theme-input-text: #0f172a;
    --theme-input-placeholder: #94a3b8;

    /* Buttons */
    --theme-btn-ghost-text: #475569;
    --theme-btn-ghost-hover-bg: rgba(0, 0, 0, 0.05);

    /* Badges */
    --theme-badge-bg: rgba(99, 102, 241, 0.1);
    --theme-badge-border: rgba(99, 102, 241, 0.2);
    --theme-badge-text: #6366f1;

    /* Dividers */
    --theme-divider: rgba(0, 0, 0, 0.06);

    /* Skeleton Loading */
    --theme-skeleton-bg: rgba(0, 0, 0, 0.03);
    --theme-skeleton-border: rgba(0, 0, 0, 0.06);
    --theme-skeleton-element: rgba(0, 0, 0, 0.05);
    --theme-skeleton-shimmer: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
    --theme-skeleton-shine: rgba(0, 0, 0, 0.08);

    /* Scrollbar */
    --theme-scrollbar-track: #f1f5f9;
    --theme-scrollbar-thumb: #cbd5e1;
    --theme-scrollbar-thumb-hover: #94a3b8;

    /* Carousel Fade */
    --theme-carousel-fade-start: #f8fafc;
    --theme-carousel-fade-end: transparent;

    /* Hero Section */
    --theme-hero-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    --theme-hero-glow: rgba(99, 102, 241, 0.15);

    /* Stats */
    --theme-stat-bg: rgba(255, 255, 255, 0.8);
    --theme-stat-border: rgba(0, 0, 0, 0.06);

    /* Logo Placeholder */
    --theme-logo-placeholder-bg: rgba(0, 0, 0, 0.05);
    --theme-logo-placeholder-color: #94a3b8;

    /* Empty State */
    --theme-empty-bg: rgba(0, 0, 0, 0.02);
    --theme-empty-border: rgba(0, 0, 0, 0.08);
    --theme-empty-icon-bg: rgba(99, 102, 241, 0.1);
    --theme-empty-icon-border: rgba(99, 102, 241, 0.2);

    /* Legal Pages */
    --theme-legal-header-icon-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
    --theme-legal-header-icon-border: rgba(99, 102, 241, 0.25);
    --theme-legal-header-icon-color: #6366f1;

    /* Table */
    --theme-table-header-bg: rgba(0, 0, 0, 0.03);
    --theme-table-border: rgba(0, 0, 0, 0.08);
    --theme-table-row-hover: rgba(0, 0, 0, 0.02);

    /* Legal Content Typography */
    --theme-heading-primary: #0f172a;
    --theme-heading-secondary: #1e293b;
    --theme-heading-tertiary: #334155;
    --theme-content-border: rgba(0, 0, 0, 0.1);
    --theme-content-strong: #1e293b;

    /* Alert Boxes */
    --theme-alert-info-bg: rgba(59, 130, 246, 0.08);
    --theme-alert-info-border: rgba(59, 130, 246, 0.2);
    --theme-alert-info-text: #1d4ed8;
    --theme-alert-warning-bg: rgba(234, 179, 8, 0.08);
    --theme-alert-warning-border: rgba(234, 179, 8, 0.2);
    --theme-alert-warning-text: #a16207;
}

/* === Dark Mode === */
[data-theme="dark"] {
    /* Background Colors */
    --theme-bg-primary: #0a0a0f;
    --theme-bg-secondary: #12121a;
    --theme-bg-tertiary: #1a1a2e;
    --theme-bg-page: linear-gradient(135deg, #0a0a0f 0%, #12121a 100%);

    /* Text Colors */
    --theme-text-primary: #ffffff;
    --theme-text-secondary: #a1a1aa;
    --theme-text-muted: #71717a;
    --theme-text-inverse: #0f172a;

    /* Glass Morphism */
    --theme-glass-bg: rgba(255, 255, 255, 0.03);
    --theme-glass-bg-hover: rgba(255, 255, 255, 0.06);
    --theme-glass-border: rgba(255, 255, 255, 0.06);
    --theme-glass-border-hover: rgba(99, 102, 241, 0.3);

    /* Card Styles */
    --theme-card-bg: rgba(255, 255, 255, 0.03);
    --theme-card-bg-hover: rgba(255, 255, 255, 0.06);
    --theme-card-border: rgba(255, 255, 255, 0.06);
    --theme-card-border-hover: rgba(99, 102, 241, 0.3);
    --theme-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --theme-card-shadow-hover: 0 12px 40px rgba(99, 102, 241, 0.2);

    /* Navbar */
    --theme-navbar-bg: rgba(10, 10, 15, 0.8);
    --theme-navbar-bg-scrolled: rgba(10, 10, 15, 0.95);
    --theme-navbar-border: rgba(255, 255, 255, 0.06);
    --theme-navbar-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

    /* Footer */
    --theme-footer-bg: #050507;
    --theme-footer-border: rgba(255, 255, 255, 0.04);

    /* Mobile Menu */
    --theme-mobile-bg: rgba(10, 10, 15, 0.98);
    --theme-mobile-overlay: rgba(0, 0, 0, 0.5);

    /* Section Backgrounds */
    --theme-section-primary: #0a0a0f;
    --theme-section-secondary: #12121a;
    --theme-section-tertiary: #1a1a2e;

    /* Feature Cards */
    --theme-feature-bg: rgba(255, 255, 255, 0.03);
    --theme-feature-border: rgba(255, 255, 255, 0.06);
    --theme-feature-icon-bg: rgba(99, 102, 241, 0.15);

    /* Pricing Cards */
    --theme-pricing-bg: rgba(255, 255, 255, 0.03);
    --theme-pricing-border: rgba(255, 255, 255, 0.06);
    --theme-pricing-popular-bg: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

    /* CTA Section */
    --theme-cta-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
    --theme-cta-border: rgba(99, 102, 241, 0.2);

    /* Form Elements */
    --theme-input-bg: rgba(255, 255, 255, 0.03);
    --theme-input-border: rgba(255, 255, 255, 0.1);
    --theme-input-border-focus: rgba(99, 102, 241, 0.5);
    --theme-input-text: #ffffff;
    --theme-input-placeholder: #71717a;

    /* Buttons */
    --theme-btn-ghost-text: #a1a1aa;
    --theme-btn-ghost-hover-bg: rgba(255, 255, 255, 0.05);

    /* Badges */
    --theme-badge-bg: rgba(99, 102, 241, 0.1);
    --theme-badge-border: rgba(99, 102, 241, 0.2);
    --theme-badge-text: #6366f1;

    /* Dividers */
    --theme-divider: rgba(255, 255, 255, 0.06);

    /* Skeleton Loading */
    --theme-skeleton-bg: rgba(255, 255, 255, 0.03);
    --theme-skeleton-border: rgba(255, 255, 255, 0.06);
    --theme-skeleton-element: rgba(255, 255, 255, 0.05);
    --theme-skeleton-shimmer: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    --theme-skeleton-shine: rgba(255, 255, 255, 0.1);

    /* Scrollbar */
    --theme-scrollbar-track: #1a1a2e;
    --theme-scrollbar-thumb: #3f3f46;
    --theme-scrollbar-thumb-hover: #52525b;

    /* Carousel Fade */
    --theme-carousel-fade-start: #12121a;
    --theme-carousel-fade-end: transparent;

    /* Hero Section */
    --theme-hero-bg: linear-gradient(135deg, #0a0a0f 0%, #12121a 100%);
    --theme-hero-glow: rgba(99, 102, 241, 0.2);

    /* Stats */
    --theme-stat-bg: rgba(255, 255, 255, 0.03);
    --theme-stat-border: rgba(255, 255, 255, 0.06);

    /* Logo Placeholder */
    --theme-logo-placeholder-bg: rgba(255, 255, 255, 0.05);
    --theme-logo-placeholder-color: #71717a;

    /* Empty State */
    --theme-empty-bg: rgba(255, 255, 255, 0.02);
    --theme-empty-border: rgba(255, 255, 255, 0.1);
    --theme-empty-icon-bg: rgba(99, 102, 241, 0.1);
    --theme-empty-icon-border: rgba(99, 102, 241, 0.2);

    /* Legal Pages */
    --theme-legal-header-icon-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
    --theme-legal-header-icon-border: rgba(99, 102, 241, 0.3);
    --theme-legal-header-icon-color: #818cf8;

    /* Table */
    --theme-table-header-bg: rgba(255, 255, 255, 0.05);
    --theme-table-border: rgba(255, 255, 255, 0.1);
    --theme-table-row-hover: rgba(255, 255, 255, 0.02);

    /* Legal Content Typography */
    --theme-heading-primary: #ffffff;
    --theme-heading-secondary: #e4e4e7;
    --theme-heading-tertiary: #d4d4d8;
    --theme-content-border: rgba(255, 255, 255, 0.1);
    --theme-content-strong: #d4d4d8;

    /* Alert Boxes */
    --theme-alert-info-bg: rgba(59, 130, 246, 0.1);
    --theme-alert-info-border: rgba(59, 130, 246, 0.2);
    --theme-alert-info-text: #93c5fd;
    --theme-alert-warning-bg: rgba(234, 179, 8, 0.1);
    --theme-alert-warning-border: rgba(234, 179, 8, 0.2);
    --theme-alert-warning-text: #fde047;
}

/* === Body & HTML Base Styles === */
html,
body {
    background: var(--theme-bg-primary);
    color: var(--theme-text-primary);
}

/* === Theme Transition === */
/* Performance optimized: Only transition key container elements, not all descendants */
html,
body,
.main-content,
.dark-navbar,
.dark-footer,
.legal-page,
.auth-page,
.landing-container {
    transition: background-color 0.2s ease,
                color 0.2s ease;
}

/* Card and interactive elements - separate for better control */
.feature-card,
.pricing-card,
.cta-card,
.legal-card,
.auth-card,
.success-card,
.nav-link,
.mobile-menu {
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease;
}

/* === Accent Colors (same for both themes) === */
:root {
    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;
    --accent-tertiary: #a78bfa;
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --accent-glow: rgba(99, 102, 241, 0.3);

    /* Success, Warning, Error */
    --color-success: #22c55e;
    --color-success-bg: rgba(34, 197, 94, 0.1);
    --color-warning: #eab308;
    --color-warning-bg: rgba(234, 179, 8, 0.1);
    --color-error: #ef4444;
    --color-error-bg: rgba(239, 68, 68, 0.1);
    --color-info: #3b82f6;
    --color-info-bg: rgba(59, 130, 246, 0.1);
}