/* ============================================================
   HARVEST & CRATE — Dark Mode Styles
   Applied when <html class="dark"> is set.
   ============================================================ */

/* ---------- Dark palette tokens ---------- */
html.dark{
  color-scheme: dark;
  --paper:        #101A13;
  --paper-raised: #182619;
  --ink:          #ECE7D6;
  --ink-soft:     #B7C2B4;
  --forest:       #7FBF93;
  --forest-deep:  #0C1710;
  --sage:         #3E5A46;
  --sage-tint:    #1B2A1E;
  --marigold:     #F0A059;
  --marigold-deep:#E8873A;
  --berry:        #E17067;
  --berry-deep:   #C1443C;
  --cream-line:   #2A3A2C;
  --shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.5);
}

/* ---------- Component overrides ---------- */
html.dark .eyebrow-tag{ color:var(--forest); }
html.dark .btn-line{ border-color:var(--forest); color:var(--ink); }
html.dark .logo .word{ color:var(--forest); }
html.dark .department-card{ background:var(--paper-raised) !important; }
html.dark .phone-frame .phone-screen{ background:linear-gradient(160deg,#22321F,#182619); }
html.dark .map-visual{ background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/40px 40px,
    var(--paper-raised); }
html.dark .delivery-map-wrap{ background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0/44px 44px,
    var(--paper-raised); }
html.dark .category-card .go{ background:rgba(16,26,19,.8); }
html.dark .department-card{ background:transparent !important; }

/* ---------- Category cards ---------- */
/* Hard-coded #ffffff background and #1a202c text don't adapt to dark */
html.dark .category-card{ background:var(--paper-raised); border-color:var(--cream-line); }
html.dark .category-card h3{ color:var(--ink); }
html.dark .category-card p{ color:var(--ink-soft); }
html.dark .category-card .go{ background:var(--paper-raised); color:var(--ink); border-color:var(--cream-line); }
html.dark .category-card:hover .go{ background:var(--forest); border-color:var(--forest); color:#fff; }
html.dark #categories .section-head-link{ background:var(--paper-raised); border-color:var(--cream-line); color:var(--ink-soft); }
html.dark #categories{ background:linear-gradient(180deg,var(--paper) 0%,var(--forest-deep) 100%); }

/* ---------- Gift card banner ---------- */
/* Warm cream gradient becomes illegible in dark mode — replace with a dark surface */
html.dark .giftcard-banner{
  background:linear-gradient(120deg,#1E2E22 0%,#172518 58%,#111D15 100%);
  box-shadow:0 18px 48px rgba(0,0,0,.4);
}
html.dark .giftcard-banner h2{ color:var(--ink); }
html.dark .giftcard-banner p{ color:var(--ink-soft); }
html.dark .giftcard-banner::before{ background:rgba(255,255,255,.04); }
html.dark .giftcard-banner::after{ border-color:rgba(127,191,147,.1); box-shadow:0 0 0 18px rgba(127,191,147,.03),0 0 0 36px rgba(127,191,147,.02); }

/* ---------- Freshness & quality promise (about page) ---------- */
/* var(--forest) in dark mode resolves to #7FBF93 (light mint), making white text unreadable */
html.dark .freshness-copy{
  background:#0E1E12;
  border-left:1px solid var(--cream-line);
}
html.dark .freshness-copy h2{ color:#ECE7D6; }
html.dark .freshness-copy > p{ color:#9BB09A; }
html.dark .freshness-list strong{ color:#ECE7D6; }
html.dark .freshness-list span{ color:#9BB09A; }
html.dark .freshness-list .fl-icon{ background:rgba(127,191,147,.14); }
html.dark .freshness-list .fl-icon svg{ color:#7FBF93; }

/* ---------- Coming soon page ---------- */
/* crate-label uses var(--paper) bg + var(--forest) text — in dark mode paper is near-black
   and forest is light mint, which still works. The real issue is crate-status brown
   background making the label text low-contrast. Fix crate-label for dark mode. */
html.dark .crate-label{ background:var(--paper-raised); color:var(--ink); border-color:var(--marigold); }
html.dark .crate-label strong{ color:var(--ink); }
html.dark .crate-label span{ color:var(--ink-soft); }