/* ==========================================================================
   Cleavera — cream-first theme (preview)
   Swaps the palette: cream becomes the main background, the bottle-label green
   (#2b5c35) becomes the secondary color (announcement bar, CTA panels, botanical bands, footer).
   Active only when <html data-theme="cream">; switch with ?theme=cream / ?theme=dark.
   ========================================================================== */

/* ---------- Tokens: cream world is now the default ---------- */
[data-theme="cream"] {
  --bg: #f6efdc;
  --bg-2: #efe6cd;
  --surface: #fffaf0;
  --surface-2: #f8f1e0;
  --surface-3: #efe5cb;
  --line: rgba(29, 42, 33, .11);
  --line-2: rgba(29, 42, 33, .19);

  --text: #1d2a21;
  --text-2: rgba(29, 42, 33, .76);
  --muted: rgba(29, 42, 33, .68);

  --forest: #2b5c35;   /* the label green on the bottle and box */
  --forest-2: #234c2c;
  --accent: #2b5c35;
  --accent-2: #3a7346;
  --grad: linear-gradient(100deg, #2b5c35 0%, #336b3f 100%);
  --grad-text: linear-gradient(100deg, #2b5c35 0%, #3a7346 55%, #5f9550 100%);
  --gold: #946618;
  --rare: #2f7f93;
  --danger: #b4483a;

  --shadow: 0 30px 80px -30px rgba(29, 42, 33, .3);
  --glow: 0 0 0 1px rgba(43, 92, 53, .25), 0 12px 32px -12px rgba(43, 92, 53, .45);
}

/* ---------- Forest world: the green is now the secondary band ---------- */
[data-theme="cream"] :is(.announce, .cream-world, .cta-panel, .site-footer) {
  --bg: #2b5c35;
  --bg-2: #2f633a;
  --surface: #326840;
  --surface-2: #376e45;
  --line: rgba(243, 234, 211, .13);
  --line-2: rgba(243, 234, 211, .22);
  --text: #f3ead3;
  --text-2: rgba(243, 234, 211, .86);
  --muted: rgba(243, 234, 211, .78);
  --accent: #b9e0b0;
  --grad: linear-gradient(100deg, #96cf9c 0%, #cfe6a6 100%);
  --grad-text: linear-gradient(100deg, #a9dcaa 0%, #e3edb9 60%, #f3ead3 100%);
  --gold: #e3c07a;
  color: var(--text-2);
}
/* cream cards sitting inside a green band keep dark ink */
[data-theme="cream"] .cream-world :is(.card, .callout, .ing-card, .step) {
  --text: #1d2a21;
  --text-2: rgba(29, 42, 33, .76);
  --muted: rgba(29, 42, 33, .68);
  --line: rgba(29, 42, 33, .11);
  --line-2: rgba(29, 42, 33, .19);
  --accent: #2b5c35;
  color: rgba(29, 42, 33, .8);
}

/* ---------- Buttons ---------- */
[data-theme="cream"] .btn-primary { color: #f6efdc; }
[data-theme="cream"] .btn-primary:hover { box-shadow: 0 0 0 1px rgba(43, 92, 53, .35), 0 18px 44px -14px rgba(43, 92, 53, .55); }
[data-theme="cream"] .btn-ghost { background: rgba(29, 42, 33, .02); }
[data-theme="cream"] .btn-ghost:hover { border-color: rgba(29, 42, 33, .35); background: rgba(29, 42, 33, .05); }
[data-theme="cream"] .btn-light, [data-theme="cream"] .add-btn { background: var(--forest); color: #f6efdc; }
[data-theme="cream"] .btn-light:hover, [data-theme="cream"] .add-btn:hover { background: var(--forest-2); }
[data-theme="cream"] :is(.announce, .cream-world, .cta-panel, .site-footer) .btn-primary { color: #0b1a10; }
[data-theme="cream"] :is(.announce, .cream-world, .cta-panel, .site-footer) .btn-ghost { background: rgba(243, 234, 211, .02); }
[data-theme="cream"] :is(.announce, .cream-world, .cta-panel, .site-footer) .btn-ghost:hover { border-color: rgba(243, 234, 211, .35); background: rgba(243, 234, 211, .06); }
[data-theme="cream"] :is(.cream-world, .cta-panel, .site-footer) .btn-light { background: var(--cream); color: #2b5c35; }
[data-theme="cream"] :is(.cream-world, .cta-panel, .site-footer) .btn-light:hover { background: #fff8e6; }

/* ---------- Header, announcement, menus ---------- */
[data-theme="cream"] .brand { color: var(--forest); }
[data-theme="cream"] :is(.skip-link, .toast) { background: var(--forest); color: #f6efdc; }
[data-theme="cream"] .announce { background: #2b5c35; }
[data-theme="cream"] .site-header { background: rgba(246, 239, 220, .88); }
[data-theme="cream"] :is(.icon-btn, .round-btn, .modal-close):hover { background: rgba(29, 42, 33, .06); }
[data-theme="cream"] .round-btn:hover { border-color: rgba(29, 42, 33, .3); }
[data-theme="cream"] .cart-count,
[data-theme="cream"] .variant .flag,
[data-theme="cream"] .float-pill { color: #f6efdc; }
[data-theme="cream"] .tag.gold,
[data-theme="cream"] .save-pill,
[data-theme="cream"] .variant .flag.gold { color: #fffaf0; }
[data-theme="cream"] .sticky-atc { background: rgba(250, 245, 232, .96); }

/* ---------- Hero & page headers ---------- */
[data-theme="cream"] .hero { background: radial-gradient(70% 90% at 80% 20%, rgba(58, 115, 70, .14) 0%, transparent 60%), linear-gradient(180deg, #faf4e4 0%, var(--bg) 100%); }
[data-theme="cream"] .hero::after { background-image: radial-gradient(rgba(29, 42, 33, .07) 1px, transparent 1px); }
[data-theme="cream"] .page-hero { background: radial-gradient(60% 100% at 85% 0%, rgba(58, 115, 70, .12), transparent 65%), var(--bg); }
[data-theme="cream"] .glow-bg { background: radial-gradient(60% 60% at 75% 30%, rgba(58, 115, 70, .12), transparent 70%), radial-gradient(40% 40% at 10% 80%, rgba(43, 92, 53, .08), transparent 70%); }
[data-theme="cream"] .hero-float { background: rgba(255, 250, 240, .9); }
[data-theme="cream"] .stat-strip { background: rgba(255, 250, 240, .75); }
[data-theme="cream"] .img-card .badge-float { background: rgba(255, 250, 240, .9); border-color: rgba(43, 92, 53, .3); }

/* ---------- Tinted chips, icons and highlights (light green → forest tint) ---------- */
[data-theme="cream"] .pill { border-color: rgba(43, 92, 53, .3); background: rgba(43, 92, 53, .07); }
[data-theme="cream"] :is(.hero-float .ico, .feature .ico) { background: rgba(43, 92, 53, .08); border-color: rgba(43, 92, 53, .2); }
[data-theme="cream"] .stat-strip .ico { border-color: rgba(43, 92, 53, .28); }
[data-theme="cream"] :is(.why-box, .promo-banner, .chip-check, .badge.ok, .code-box) { background: rgba(43, 92, 53, .06); border-color: rgba(43, 92, 53, .22); }
[data-theme="cream"] .chip.solid { background: rgba(43, 92, 53, .08); border-color: rgba(43, 92, 53, .28); }
[data-theme="cream"] a.chip:hover, [data-theme="cream"] a.chip:focus-visible { border-color: rgba(43, 92, 53, .4); background: rgba(43, 92, 53, .07); }
[data-theme="cream"] .variant { background: rgba(29, 42, 33, .02); }
[data-theme="cream"] .variant:has(input:checked), [data-theme="cream"] .ptype label:has(input:checked) { background: rgba(43, 92, 53, .07); }
[data-theme="cream"] .ptype input { accent-color: #2b5c35; }
[data-theme="cream"] .prose blockquote { background: rgba(43, 92, 53, .05); }
[data-theme="cream"] .faq summary:hover { background: rgba(29, 42, 33, .03); }
[data-theme="cream"] .input { background: #fffaf0; }
[data-theme="cream"] .input:focus { background: #fff; }
[data-theme="cream"] .bar { background: rgba(29, 42, 33, .08); }
[data-theme="cream"] .spin-card { background: radial-gradient(80% 120% at 100% 0%, rgba(58, 115, 70, .14), transparent 60%), linear-gradient(180deg, var(--surface), var(--bg-2)); border-color: rgba(43, 92, 53, .18); }
[data-theme="cream"] .modal-card { background: radial-gradient(90% 70% at 50% 0%, rgba(58, 115, 70, .12), transparent 70%), var(--surface); }
[data-theme="cream"] .reel { background: rgba(29, 42, 33, .04); }
[data-theme="cream"] .t-common { color: #6b6450; border-color: rgba(107, 100, 80, .3); background: linear-gradient(180deg, rgba(107, 100, 80, .1), rgba(107, 100, 80, .02)); }
[data-theme="cream"] .t-uncommon { border-color: rgba(43, 92, 53, .35); background: linear-gradient(180deg, rgba(43, 92, 53, .1), rgba(43, 92, 53, .02)); }
[data-theme="cream"] .t-legendary { border-color: rgba(148, 102, 24, .5); background: linear-gradient(180deg, rgba(148, 102, 24, .14), rgba(148, 102, 24, .03)); box-shadow: inset 0 0 20px rgba(148, 102, 24, .1); }

/* ---------- Green bands (previously the cream "botanical" sections) ---------- */
[data-theme="cream"] .cream-world { background: #2b5c35; color: var(--text); }
[data-theme="cream"] .cream-world :is(.eyebrow, .link-arrow) { color: var(--accent); }
[data-theme="cream"] .cream-world .lead { color: rgba(243, 234, 211, .86); }
[data-theme="cream"] .cream-world .muted { color: rgba(243, 234, 211, .78); }
[data-theme="cream"] .cream-world .btn-ghost { color: var(--text); border-color: rgba(243, 234, 211, .3); }
[data-theme="cream"] .cream-world :is(.ticks, .dot-list),
[data-theme="cream"] .cream-world .ticks[style] { color: rgba(243, 234, 211, .85) !important; }
[data-theme="cream"] .cream-world .ticks svg,
[data-theme="cream"] .cream-world svg[stroke="var(--forest)"] { color: var(--accent); stroke: var(--accent); }
[data-theme="cream"] .cream-world .dot-list li::before { background: var(--accent); }
[data-theme="cream"] .cream-world :is(.spec-grid, .spec-grid > div + div) { border-color: rgba(243, 234, 211, .18); }
[data-theme="cream"] .cream-world .spec-grid span { color: rgba(243, 234, 211, .78); }
[data-theme="cream"] .cream-world .kicker { color: rgba(243, 234, 211, .78); }
[data-theme="cream"] .cream-world :is(.card, .callout, .ing-card, .step) .kicker { color: rgba(29, 42, 33, .68); }
[data-theme="cream"] .cream-world .chip { border-color: rgba(243, 234, 211, .3); color: var(--text); }

/* ---------- CTA panels and footer ---------- */
[data-theme="cream"] .cta-panel { border-color: transparent; background: radial-gradient(80% 100% at 50% 0%, rgba(169, 214, 163, .2), transparent 70%), #2b5c35; color: var(--text-2); }
[data-theme="cream"] .cta-panel :is(h2, h3, .h2, .h3) { color: var(--text); }
[data-theme="cream"] .cta-panel.has-img::before { background: linear-gradient(90deg, rgba(43, 92, 53, .96) 0%, rgba(43, 92, 53, .82) 42%, rgba(43, 92, 53, 0) 75%); }
[data-theme="cream"] .site-footer { background: #2b5c35; }
[data-theme="cream"] .site-footer :is(.brand, .brand-name) { color: var(--text); }

@media (max-width: 960px) {
  [data-theme="cream"] .cta-panel.has-img::before { background: linear-gradient(180deg, rgba(43, 92, 53, .55) 0%, rgba(43, 92, 53, .95) 70%); }
}

[data-theme="cream"] .price-sticker { background: var(--forest); color: #f6efdc; }
[data-theme="cream"] .price-sticker span { color: #cfe6a6; }