/* public/assets/css/themes.css — Theme Variations (Variant 1, 2, and 3) */

/* ========================================================
   VARIANT 2 — MODERN LIFESTYLE (Clean, Light, Editorial)
   ======================================================== */
html.theme-lifestyle {
    --bg-page:        #ffffff;
    --bg-surface:     #ffffff;
    --bg-surface-sub: #f8fafc;
    --border-color:   #e2e8f0;
    --text-primary:   #0f172a;
    --text-secondary: #334155;
    --text-muted:     #64748b;
}

html.theme-lifestyle .site-header {
    background-color: #ffffff;
    color: #0f172a;
    border-bottom: 1px solid #e2e8f0;
}

html.theme-lifestyle .brand-logo {
    color: #0f172a;
}

html.theme-lifestyle .nav-link {
    color: #334155;
}

html.theme-lifestyle .nav-link:hover,
html.theme-lifestyle .nav-link.active {
    color: #000000;
}

html.theme-lifestyle .action-btn {
    color: #0f172a;
    background: #f1f5f9;
}

html.theme-lifestyle .mobile-toggle-btn span {
    background-color: #0f172a;
}

html.theme-lifestyle .hero-section {
    background: #ffffff;
    color: #0f172a;
    border-bottom: 1px solid #e2e8f0;
}

html.theme-lifestyle .hero-brand-title {
    color: #0f172a;
}

html.theme-lifestyle .hero-tagline-main {
    color: #334155;
}

html.theme-lifestyle .hero-tagline-sub {
    color: #64748b;
}

html.theme-lifestyle .hero-age-pill {
    background: #f1f5f9;
    color: #0f172a;
}

html.theme-lifestyle .btn-hero-explore {
    background-color: #0f172a;
    color: #ffffff;
}

html.theme-lifestyle .btn-hero-explore:hover {
    background-color: #1e293b;
}

html.theme-lifestyle .wholesale-pillars-section {
    background: #f8fafc;
}

html.theme-lifestyle .product-card {
    border-color: #e2e8f0;
}

/* ========================================================
   VARIANT 3 — DARK LUXURY FASHION (Bold, High-end)
   ======================================================== */
html.theme-dark {
    --bg-page:        #08090c;
    --bg-surface:     #111318;
    --bg-surface-sub: #171922;
    --border-color:   #232634;
    --border-dark:    #333748;
    --text-primary:   #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted:     #94a3b8;
    --color-navy-deep:#0d0e12;
}

html.theme-dark .site-topbar {
    background-color: #050608;
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

html.theme-dark .site-header {
    background-color: #0c0d12;
    border-bottom-color: #1e212b;
}

html.theme-dark .hero-section {
    background: linear-gradient(135deg, #050608 0%, #0c0d12 60%, #151722 100%);
}

html.theme-dark .wholesale-pillars-section {
    background: #0f1117;
    border-bottom-color: #1e212b;
}

html.theme-dark .pillar-card {
    background: #141720;
    border-color: #232735;
}

html.theme-dark .pillar-title {
    color: #f8fafc;
}

html.theme-dark .age-card,
html.theme-dark .category-card,
html.theme-dark .product-card,
html.theme-dark .market-card,
html.theme-dark .catalog-filter-bar,
html.theme-dark .wholesale-price-box,
html.theme-dark .pack-calculator-card,
html.theme-dark .checkout-form-card,
html.theme-dark .cart-table-card,
html.theme-dark .cart-summary-sticky,
html.theme-dark .admin-card,
html.theme-dark .cart-drawer {
    background: #111318;
    border-color: #232634;
    color: #f8fafc;
}

html.theme-dark .price-val,
html.theme-dark .pack-price-amount {
    color: #60a5fa;
}

html.theme-dark .form-input,
html.theme-dark .form-textarea,
html.theme-dark .filter-select,
html.theme-dark .filter-input {
    background: #171922;
    border-color: #2a2e3f;
    color: #f8fafc;
}

html.theme-dark .cart-table-header {
    background: #151720;
    border-color: #232634;
}

html.theme-dark .nav-dropdown,
html.theme-dark .theme-dropdown-menu,
html.theme-dark .modal-dialog {
    background: #111318;
    border-color: #232634;
    color: #f8fafc;
}

html.theme-dark .dropdown-link {
    color: #cbd5e1;
}

html.theme-dark .dropdown-link:hover {
    background: #1a1e2a;
    color: #ffffff;
}

html.theme-dark .mobile-drawer,
html.theme-dark .mobile-bottom-bar {
    background: #0d0f14;
    border-color: #232634;
}

html.theme-dark .drawer-nav-link,
html.theme-dark .drawer-accordion-title {
    color: #f8fafc;
    border-bottom-color: #171922;
}

html.theme-dark .mobile-drawer-lang {
    background: #141720;
    border-color: #232634;
}

html.theme-dark .m-lang-btn {
    background: #1a1e28;
    border-color: #2e3344;
    color: #cbd5e1;
}

html.theme-dark .tab-btn {
    background: #171922;
    border-color: #2a2e3f;
    color: #cbd5e1;
}

html.theme-dark .tab-btn.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}