/* ==========================================================================
   Theme variant: "Spice"  — palette from the supplied Studio 77 reference
     Coconut #FCEFDE · Tumeric #FDC413 · Saffron #EB6539 · Cumin #A1371B · Bayleaf #1F4F3D
   Activated with <html data-theme="spice"> (see js/theme.js; preview with ?theme=spice).
   Only tokens + a few deliberate overrides — no layout changes, so both variants share all markup.
   → Shopify: a second set of Dawn colour schemes / a theme preset in config/settings_data.json.

   Contrast notes: white on Saffron is only ~3.3:1, so Saffron is NEVER used behind small light text.
   Primary CTAs use Cumin (white text ≈ 7:1); Saffron carries dark text (≈ 5:1) or decoration.
   ========================================================================== */
:root[data-theme="spice"] {
  --color-saffron: #EB6539;
  --color-red: #A1371B;            /* Cumin — primary CTA / headings */
  --color-red-dark: #7C2711;       /* derived: hover/pressed */
  --color-green: #1F4F3D;          /* Bayleaf — veg mark, dark surfaces */
  --color-yellow: #FDC413;         /* Tumeric — labels, highlights */
  --color-cream: #FCEFDE;          /* Coconut — page background */
  --color-cream-dark: #F3DDBE;     /* derived */
  --color-text: #2B1A12;           /* derived warm near-black */
  --color-text-muted: rgba(43, 26, 18, .7);
  --color-line: rgba(43, 26, 18, .15);
  --shadow-card: 0 1px 2px rgba(43, 26, 18, .07), 0 8px 24px rgba(43, 26, 18, .08);
}
/* Dark surfaces use Bayleaf instead of near-black */
[data-theme="spice"] .color-scheme-dark { --scheme-bg: var(--color-green); }
[data-theme="spice"] .footer { background: var(--color-green); }
[data-theme="spice"] .announcement-bar { background: var(--color-green); }
/* The big promotional band becomes Saffron with dark text */
[data-theme="spice"] .color-scheme-red { --scheme-bg: var(--color-saffron); --scheme-fg: var(--color-text); --scheme-accent: var(--color-text); }
[data-theme="spice"] .color-scheme-red .subtitle { color: rgba(43, 26, 18, .85); }
[data-theme="spice"] .color-scheme-red .button--light { background: var(--color-text); border-color: var(--color-text); color: var(--color-cream); }
[data-theme="spice"] .color-scheme-red .button--light:hover { background: var(--color-green); border-color: var(--color-green); color: var(--color-cream); }
[data-theme="spice"] .color-scheme-red :focus-visible { outline-color: var(--color-text); }
[data-theme="spice"] .image-with-text__media .ph { color: rgba(43, 26, 18, .65); --ph-bg: rgba(255, 255, 255, .3); }
[data-theme="spice"] .image-with-text__media .ph::after { background: rgba(255, 255, 255, .5); }
[data-theme="spice"] .page-hero--band { background: var(--color-red); }
/* Decorative Saffron accents */
[data-theme="spice"] .hero__accent { stroke: var(--color-saffron); }
[data-theme="spice"] .hero__title em svg { stroke: var(--color-saffron); }
[data-theme="spice"] .hero__strip li .icon { color: var(--color-saffron); }
[data-theme="spice"] .multicolumn-card__icon { background: var(--color-saffron); color: var(--color-text); }
[data-theme="spice"] .card--product:hover { box-shadow: 0 0 0 2px var(--color-saffron), 0 14px 34px rgba(43, 26, 18, .14); }
[data-theme="spice"] .link-arrow:hover { color: var(--color-red); border-color: var(--color-saffron); }
[data-theme="spice"] .header__menu-item:hover, [data-theme="spice"] .header__menu-item[aria-current="page"], [data-theme="spice"] details[open] > .header__menu-item { border-color: var(--color-saffron); }
[data-theme="spice"] .cart-count-bubble { background: var(--color-saffron); color: var(--color-text); }
[data-theme="spice"] .story__timeline strong, [data-theme="spice"] .timeline strong { color: var(--color-red); }
[data-theme="spice"] .timeline li::before { border-color: var(--color-saffron); }

/* ---- Prototype-only theme switcher (not part of the Shopify build) ---- */
.theme-switch { position: fixed; left: .75rem; bottom: .75rem; z-index: 120; display: flex; gap: .25rem; padding: .25rem; border-radius: 99px; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); font: 700 .72rem/1 var(--font-body); }
.theme-switch button { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .8rem; border: 0; border-radius: 99px; background: transparent; color: #27211D; }
.theme-switch button[aria-pressed="true"] { background: #27211D; color: #fff; }
.theme-switch i { width: .7rem; height: .7rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .25); }