/* White Theme (Default) */
body {
    background-color: #F8F9FA;
    color: #1A1A1A;
    /* Fase 4: variables del header / nav / drawer */
    --header-bg: #FFFFFF;
    --header-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    --header-icon: #1A1A1A;
    --header-brand-fg: #1A1A1A;
    --search-pill-bg: #F1F5F9;
    --bottom-nav-bg: #FFFFFF;
    --cart-badge-bg: #D32F2F;
    --menu-drawer-bg: #FFFFFF;
    --menu-drawer-fg: #1E293B;
    --menu-divider: rgba(0, 0, 0, 0.06);
    --menu-link-icon: #475569;
    --menu-link-secondary-fg: #64748B;
    /* Fase 5: cards y vista categorías */
    --card-bg: #FFFFFF;
    --card-border: rgba(0, 0, 0, 0.06);
    --card-name-fg: #1A1A1A;
    --card-meta-fg: #64748B;
    --img-fallback-bg: #F1F5F9;
    --img-fallback-fg: #CBD5E1;
    --cat-pill-more-border: rgba(0, 0, 0, 0.18);
    /* Fase 8: textos genéricos para vistas favoritos/pedidos */
    --text-primary: #1A1A1A;
    --text-muted: #64748B;
}

.app-header {
    background-color: #F8F9FA;
}

.main-title {
    color: #1A1A1A;
}

.icon-btn,
.cart-icon-container i {
    color: #1A1A1A;
}

.category-pill {
    background: #FFFFFF;
    color: #666666;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.category-pill.active {
    background: #FF4747;
    color: #FFFFFF;
}

.search-bar {
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.search-bar i {
    color: #999999;
}

.product-card {
    background: #FFFFFF;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.product-name {
    color: #1A1A1A;
}

.product-price {
    color: #666666;
}

.add-btn-circle {
    background: #FF4747;
    color: #FFFFFF;
}

.app-bottom-nav {
    background: #FFFFFF;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05);
}

.nav-item i {
    color: #999999;
}

.nav-item span {
    color: #999999;
}

.nav-item.active i,
.nav-item.active span {
    color: #FF4747;
}

.modal-content {
    background: #FFFFFF;
}

.theme-opt.active {
    border: 2px solid #FF4747;
}

.preview.light {
    background: #FFFFFF;
    border: 1px solid #EEE;
}

.preview.night {
    background: #1A1A1A;
}

.preview.premium {
    background: #151515;
    border: 1px solid #C5A059;
}