/* CSS Custom Properties for Light and Dark Mode */

:root {
    /* Light Mode Colors */
    --bg-body: #F3F4F6;
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --text-main: #111827;
    --text-primary: #111827;
    --text-muted: #6B7280;
    --text-secondary: #9CA3AF;
    --primary: #E67E22;
    --primary-soft: #FFEDD5;
    --secondary: #E67E22;
    --border-light: #E5E7EB;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
    --radius-L: 28px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --orange-fast: #EA580C;
    --orange-fast-soft: #FFF7ED;
}

/* Dark Mode Overrides - Modern Professional Theme */
body.dark-mode {
    --bg-body: #0F172A;
    --bg: #1E293B;
    --surface: #1E293B;
    --text-main: #F1F5F9;
    --text-primary: #F1F5F9;
    --text-muted: #94A3B8;
    --text-secondary: #64748B;
    --primary: #FB923C;
    --primary-soft: #7C2D12;
    --border-light: #334155;
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Dark Mode Specific Overrides */
body.dark-mode .home-bg-overlay,
body.dark-mode .recipe-header .home-bg-overlay {
    background: rgba(0, 0, 0, 0.5);
}

body.dark-mode .pill {
    background: #334155;
    border-color: #475569;
    color: #E2E8F0;
}

body.dark-mode .pill.active {
    background: #7C2D12;
    border-color: #FB923C;
    color: #FB923C;
}

body.dark-mode .options-header {
    background: rgba(30, 41, 59, 0.98);
    border-bottom-color: #334155;
}

body.dark-mode .btn-back-options {
    color: #F1F5F9;
}

body.dark-mode .btn-back-options:active {
    background: #334155;
}

body.dark-mode .mode-btn {
    background: transparent;
    border: 1px solid #475569;
    color: #94A3B8;
}

body.dark-mode .mode-btn.active {
    background: #334155;
    color: #F1F5F9;
    border-color: #FB923C;
}

body.dark-mode .mode-btn[data-mode="eco"].active {
    background: #047857;
    color: white;
    border-color: #10B981;
}

body.dark-mode .mode-btn[data-mode="fast"].active {
    background: #C2410C;
    color: white;
    border-color: #FB923C;
}

body.dark-mode .recipe-card,
body.dark-mode .list-item,
body.dark-mode .shopping-group,
body.dark-mode .option-item {
    background: #1E293B;
    border-color: #334155;
}

body.dark-mode,
#recipes-search,
body.dark-mode #recipes-sort {
    background: #334155;
    border-color: #475569;
    color: #F1F5F9;
}

body.dark-mode .tag-chip {
    background: #334155;
    color: #E2E8F0;
    border-color: #475569;
}

body.dark-mode .item-price,
body.dark-mode .item-price-shop {
    background: #334155;
    color: #F1F5F9;
}

body.dark-mode .check-circle {
    border-color: #475569;
    background: #334155;
}

body.dark-mode .tip-box {
    background: #1E293B;
    border-color: #334155;
    color: #CBD5E1;
}

body.dark-mode .tip-box.eco {
    background: #064E3B;
    border-color: #059669;
    color: #D1FAE5;
}

body.dark-mode .shopping-stats {
    background: linear-gradient(135deg, #7C2D12 0%, #C2410C 100%);
    border-color: #EA580C;
}

body.dark-mode .about-card {
    background: linear-gradient(135deg, #7C2D12 0%, #C2410C 100%);
    border-color: #EA580C;
}

body.dark-mode .savings-teaser {
    background: linear-gradient(135deg, #064E3B 0%, #047857 100%);
}

body.dark-mode .eco-card {
    background: linear-gradient(135deg, #064E3B 0%, #065F46 100%);
    border-color: #059669;
}

body.dark-mode .total-sticky {
    background: rgba(30, 41, 59, 0.98);
    border-top-color: #334155;
}

body.dark-mode .tab-bar {
    background: rgba(30, 41, 59, 0.98);
    border-top-color: #334155;
}

body.dark-mode .nav-btn {
    color: #94A3B8;
}

body.dark-mode .nav-btn.active {
    color: #FB923C;
}

body.dark-mode .nav-btn i {
    color: #94A3B8;
}

body.dark-mode .nav-btn.active i {
    color: #FB923C;
}

body.dark-mode .side-menu {
    background: #1E293B;
}

body.dark-mode .menu-header {
    border-bottom-color: #334155;
}

body.dark-mode .option-label
{
    color:white;
}
body.dark-mode .step-card 
{
    color:white;
}

body.dark-mode .menu-item {
    color: #F1F5F9;
}

body.dark-mode .menu-item:hover {
    background: #334155;
}

body.dark-mode .menu-sep {
    background: #334155;
}

body.dark-mode .menu-version {
    color: #64748B;
}

body.dark-mode .search-floating {
    background: #1E293B;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

body.dark-mode .search-floating input {
    color: #F1F5F9;
}

body.dark-mode .search-floating input::placeholder {
    color: #64748B;
}

body.dark-mode .home-content h1 {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

body.dark-mode .badge-new {
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
    color: #F1F5F9;
    border-color: #475569;
}

body.dark-mode .recipe-card-body {
    background: #1E293B;
}

body.dark-mode .btn-close,
body.dark-mode .btn-icon {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(71, 85, 105, 0.4);
}

body.dark-mode .toggle-switch input:checked+.toggle-slider {
    background-color: #FB923C;
}

body.dark-mode .action-sm {
    background: #334155;
    border-color: #475569;
    color: #F1F5F9;
}

body.dark-mode .action-sm.danger {
    background: #7F1D1D;
    border-color: #991B1B;
    color: #FCA5A5;
}

body.dark-mode #searchBtn {
    background: #FB923C;
    box-shadow: 0 4px 15px rgba(251, 146, 60, 0.4);
}