/* ============================================================
   Love Recipe · 前台主题系统
   5 套视觉主题，通过 body.theme-XXX 激活
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   Theme 1 · warm-amber 暖橙·家常  (默认，main.css :root 已定义)
   ────────────────────────────────────────────────────────── */
/* 与 main.css :root 完全相同，无需另行声明 */


/* ──────────────────────────────────────────────────────────
   Theme 2 · fresh-green 青野·田园
   ────────────────────────────────────────────────────────── */
.theme-fresh-green {
  --color-bg:                #F0FAF4;
  --color-bg-secondary:      #E8F5E9;
  --color-bg-card:           #FFFFFF;
  --color-primary:           #2D6A4F;
  --color-primary-hover:     #1B5E36;
  --color-primary-light:     #52B788;
  --color-primary-ultra-light: #D8F3DC;
  --color-accent:            #1B4332;
  --color-text:              #1B3A2D;
  --color-text-secondary:    #40916C;
  --color-text-muted:        #95BFA8;
  --color-border:            #B7E4C7;
  --color-border-light:      #D8F3DC;
  --shadow-primary:          0 4px 16px rgba(45,106,79,.28);
  --shadow-card:             0 4px 20px rgba(45,106,79,.08);
}
.theme-fresh-green .site-header {
  background: rgba(240,250,244,.92);
  border-bottom-color: #B7E4C7;
}
.theme-fresh-green .hero {
  background: linear-gradient(135deg, #D8F3DC 0%, #B7E4C7 50%, #DCF5E5 100%);
}
.theme-fresh-green .hero::before { content: '🌿'; color: #2D6A4F; }
.theme-fresh-green .hero::after  { content: '🥬'; color: #2D6A4F; }
.theme-fresh-green .hero-title   { color: #1B4332; }
.theme-fresh-green .category-tabs-wrapper {
  background: rgba(240,250,244,.96);
  border-bottom-color: #D8F3DC;
}
.theme-fresh-green #splash { background: rgba(232,245,233,.80); }
.theme-fresh-green .cart-drawer { background: var(--color-bg); }
.theme-fresh-green .cart-drawer-header {
  background: linear-gradient(135deg, #D8F3DC, #B7E4C7);
}
.theme-fresh-green .mobile-bottom-nav {
  background: rgba(240,250,244,.98);
  border-top-color: #B7E4C7;
}
.theme-fresh-green .mobile-nav-link { color: #40916C; }
.theme-fresh-green .mobile-nav-link.active { color: #2D6A4F; }
.theme-fresh-green .mobile-nav-link .nav-dot { background: #2D6A4F; }


/* ──────────────────────────────────────────────────────────
   Theme 3 · elegant-purple 雅紫·优雅
   ────────────────────────────────────────────────────────── */
.theme-elegant-purple {
  --color-bg:                #FAF5FF;
  --color-bg-secondary:      #F5F0FF;
  --color-bg-card:           #FFFFFF;
  --color-primary:           #7C3AED;
  --color-primary-hover:     #6D28D9;
  --color-primary-light:     #A78BFA;
  --color-primary-ultra-light: #EDE9FE;
  --color-accent:            #4C1D95;
  --color-text:              #2E1065;
  --color-text-secondary:    #5B21B6;
  --color-text-muted:        #8B5CF6;
  --color-border:            #DDD6FE;
  --color-border-light:      #EDE9FE;
  --shadow-primary:          0 4px 16px rgba(124,58,237,.28);
  --shadow-card:             0 4px 20px rgba(124,58,237,.08);
}
.theme-elegant-purple .site-header {
  background: rgba(250,245,255,.92);
  border-bottom-color: #DDD6FE;
}
.theme-elegant-purple .hero {
  background: linear-gradient(135deg, #F5F0FF 0%, #EDE9FE 50%, #FAF5FF 100%);
}
.theme-elegant-purple .hero::before { content: '🌸'; color: #7C3AED; }
.theme-elegant-purple .hero::after  { content: '✨'; color: #7C3AED; }
.theme-elegant-purple .hero-title   { color: #4C1D95; }
.theme-elegant-purple .category-tabs-wrapper {
  background: rgba(250,245,255,.96);
  border-bottom-color: #EDE9FE;
}
.theme-elegant-purple #splash { background: rgba(245,240,255,.80); }
.theme-elegant-purple .cart-drawer { background: var(--color-bg); }
.theme-elegant-purple .cart-drawer-header {
  background: linear-gradient(135deg, #EDE9FE, #DDD6FE);
}
.theme-elegant-purple .cart-btn { background: #7C3AED; }
.theme-elegant-purple .mobile-bottom-nav {
  background: rgba(250,245,255,.98);
  border-top-color: #DDD6FE;
}
.theme-elegant-purple .mobile-nav-link { color: #5B21B6; }
.theme-elegant-purple .mobile-nav-link.active { color: #7C3AED; }
.theme-elegant-purple .mobile-nav-link .nav-dot { background: #7C3AED; }


/* ──────────────────────────────────────────────────────────
   Theme 4 · midnight-dark 深夜·深邃  (暗黑模式)
   ────────────────────────────────────────────────────────── */
.theme-midnight-dark {
  --color-bg:                #0F172A;
  --color-bg-secondary:      #1E293B;
  --color-bg-card:           #1E293B;
  --color-primary:           #38BDF8;
  --color-primary-hover:     #0EA5E9;
  --color-primary-light:     #7DD3FC;
  --color-primary-ultra-light: #0C2A46;
  --color-accent:            #E2E8F0;
  --color-text:              #F1F5F9;
  --color-text-secondary:    #CBD5E1;
  --color-text-muted:        #64748B;
  --color-border:            #334155;
  --color-border-light:      #1E293B;
  --shadow-primary:          0 4px 16px rgba(56,189,248,.25);
  --shadow-card:             0 4px 20px rgba(0,0,0,.4);
  --shadow-sm:               0 2px 8px  rgba(0,0,0,.3);
  --shadow-md:               0 4px 16px rgba(0,0,0,.4);
}
.theme-midnight-dark body       { background: #0F172A; color: #F1F5F9; }
.theme-midnight-dark .site-header {
  background: rgba(15,23,42,.96);
  border-bottom-color: #334155;
}
.theme-midnight-dark .logo-text { color: #F1F5F9; }
.theme-midnight-dark .nav-link  { color: #CBD5E1; }
.theme-midnight-dark .nav-link:hover { background: #1E293B; color: #38BDF8; }
.theme-midnight-dark .cart-btn  { background: #38BDF8; color: #0F172A; }
.theme-midnight-dark .cart-count { color: #38BDF8; }

.theme-midnight-dark .hero {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 60%, #0F172A 100%);
}
.theme-midnight-dark .hero::before { content: '🌙'; }
.theme-midnight-dark .hero::after  { content: '⭐'; }
.theme-midnight-dark .hero-title   { color: #E2E8F0; }
.theme-midnight-dark .hero-subtitle { color: #94A3B8; }

.theme-midnight-dark .category-tabs-wrapper {
  background: rgba(15,23,42,.96);
  border-bottom-color: #334155;
}
.theme-midnight-dark .tab-btn {
  background: #1E293B;
  border-color: #334155;
  color: #CBD5E1;
}
.theme-midnight-dark .tab-btn:hover { border-color: #38BDF8; color: #38BDF8; }
.theme-midnight-dark .tab-btn.active {
  background: #38BDF8;
  color: #0F172A;
  border-color: #38BDF8;
}

.theme-midnight-dark .category-title { color: #E2E8F0; border-bottom-color: #334155; }
.theme-midnight-dark .dish-card {
  background: #1E293B;
  border: 1px solid #334155;
  color: #F1F5F9;
}
.theme-midnight-dark .dish-name { color: #F1F5F9; }
.theme-midnight-dark .dish-image-placeholder { background: #0F172A; }

.theme-midnight-dark .search-wrap { background: #1E293B; border-color: #334155; }
.theme-midnight-dark .search-input { color: #F1F5F9; }
.theme-midnight-dark .search-input::placeholder { color: #475569; }

.theme-midnight-dark .cart-overlay { background: rgba(0,0,0,.7); }
.theme-midnight-dark .cart-drawer {
  background: #1E293B;
  border-left-color: #334155;
}
.theme-midnight-dark .cart-drawer-header {
  background: linear-gradient(135deg, #0F172A, #1E293B);
  border-bottom-color: #334155;
}
.theme-midnight-dark .cart-drawer-title { color: #E2E8F0; }
.theme-midnight-dark .cart-close-btn  { color: #94A3B8; }
.theme-midnight-dark .cart-item { border-bottom-color: #334155; color: #F1F5F9; }
.theme-midnight-dark .cart-empty { color: #64748B; }
.theme-midnight-dark .cart-drawer-footer {
  border-top-color: #334155;
  background: #0F172A;
}
.theme-midnight-dark .form-label { color: #CBD5E1; }
.theme-midnight-dark .form-input,
.theme-midnight-dark .form-textarea {
  background: #0F172A;
  border-color: #334155;
  color: #F1F5F9;
}
.theme-midnight-dark .form-input::placeholder,
.theme-midnight-dark .form-textarea::placeholder { color: #475569; }

.theme-midnight-dark #splash { background: rgba(15,23,42,.90); }
.theme-midnight-dark .splash-title { color: #E2E8F0; }
.theme-midnight-dark .splash-sub   { color: #94A3B8; }

.theme-midnight-dark .mobile-bottom-nav {
  background: rgba(15,23,42,.98);
  border-top-color: #334155;
}
.theme-midnight-dark .mobile-nav-link       { color: #64748B; }
.theme-midnight-dark .mobile-nav-link.active { color: #38BDF8; }
.theme-midnight-dark .mobile-nav-link .nav-dot { background: #38BDF8; }
.theme-midnight-dark .cart-fab-btn { background: #38BDF8; color: #0F172A; }


/* ──────────────────────────────────────────────────────────
   Theme 5 · cherry-blossom 樱粉·少女
   ────────────────────────────────────────────────────────── */
.theme-cherry-blossom {
  --color-bg:                #FFF5F8;
  --color-bg-secondary:      #FCE7F3;
  --color-bg-card:           #FFFFFF;
  --color-primary:           #EC4899;
  --color-primary-hover:     #DB2777;
  --color-primary-light:     #F9A8D4;
  --color-primary-ultra-light: #FCE7F3;
  --color-accent:            #831843;
  --color-text:              #500724;
  --color-text-secondary:    #9D174D;
  --color-text-muted:        #F9A8D4;
  --color-border:            #FBCFE8;
  --color-border-light:      #FCE7F3;
  --shadow-primary:          0 4px 16px rgba(236,72,153,.30);
  --shadow-card:             0 4px 20px rgba(236,72,153,.08);
}
.theme-cherry-blossom .site-header {
  background: rgba(255,245,248,.92);
  border-bottom-color: #FBCFE8;
}
.theme-cherry-blossom .hero {
  background: linear-gradient(135deg, #FFF5F8 0%, #FCE7F3 50%, #FFF5F8 100%);
}
.theme-cherry-blossom .hero::before { content: '🌸'; color: #EC4899; }
.theme-cherry-blossom .hero::after  { content: '🌺'; color: #EC4899; }
.theme-cherry-blossom .hero-title   { color: #831843; }
.theme-cherry-blossom .category-tabs-wrapper {
  background: rgba(255,245,248,.96);
  border-bottom-color: #FCE7F3;
}
.theme-cherry-blossom #splash { background: rgba(255,245,248,.80); }
.theme-cherry-blossom .cart-drawer { background: var(--color-bg); }
.theme-cherry-blossom .cart-drawer-header {
  background: linear-gradient(135deg, #FCE7F3, #FBCFE8);
}
.theme-cherry-blossom .cart-btn { background: #EC4899; }
.theme-cherry-blossom .mobile-bottom-nav {
  background: rgba(255,245,248,.98);
  border-top-color: #FBCFE8;
}
.theme-cherry-blossom .mobile-nav-link { color: #9D174D; }
.theme-cherry-blossom .mobile-nav-link.active { color: #EC4899; }
.theme-cherry-blossom .mobile-nav-link .nav-dot { background: #EC4899; }