:root{
/* ---------- LEVEL 1 — GLOBAL (raw) ---------- */
--color-espresso-900:#150F0B;--color-espresso-800:#20170F;--color-espresso-700:#2E2117;--color-espresso-600:#453225;--color-espresso-400:#6F5A4A;
--color-clay-500:#8A7566;--color-clay-400:#A69485;--color-clay-300:#C2B4A6;
--color-cream-50:#FBF7F1;--color-cream-100:#F3ECE1;--color-cream-200:#EADFCF;--color-cream-300:#DDCEB9;
--color-ember-700:#8F2C10;--color-ember-600:#B93C16;--color-ember-500:#D4562B;--color-ember-100:#F7DED2;
--color-caramel-500:#D99A3C;--color-caramel-200:#F2DFBD;
--color-leaf-600:#2E6B4F;--color-signal-600:#B3301C;
--color-white:#FFFFFF;

/* ---------- LEVEL 2 — SEMANTIC ---------- */
--colors-primary:var(--color-ember-600);
--colors-primary-dark:var(--color-ember-700);
--colors-canvas:var(--color-cream-50);
--colors-canvas-soft:var(--color-cream-100);
--colors-canvas-warm:var(--color-cream-200);
--colors-surface-dark:var(--color-espresso-900);
--colors-surface-dark-elevated:var(--color-espresso-700);
--colors-ink:var(--color-espresso-900);
--colors-body:var(--color-espresso-600);
--colors-muted:var(--color-clay-500);
--colors-muted-soft:var(--color-clay-400);
--colors-hairline:rgba(21,15,11,.12);
--colors-hairline-strong:rgba(21,15,11,.26);
--colors-accent:var(--color-caramel-500);
--colors-accent-soft:var(--color-caramel-200);
--colors-success:var(--color-leaf-600);
--colors-error:var(--color-signal-600);
--colors-on-primary:var(--color-white);
--colors-on-dark:var(--color-cream-50);
--colors-on-dark-muted:rgba(251,247,241,.64);
--colors-hairline-on-dark:rgba(251,247,241,.16);
--colors-focus:var(--color-ember-500);
--colors-scrim:rgba(21,15,11,.48);

/* ---------- LEVEL 3 — COMPONENT ---------- */
--button-primary-bg:var(--colors-primary);--button-primary-text:var(--colors-on-primary);--button-primary-bg-hover:var(--colors-primary-dark);
--button-secondary-bg:var(--colors-ink);--button-secondary-text:var(--colors-on-dark);--button-secondary-bg-hover:var(--color-espresso-700);
--button-outline-border:var(--colors-hairline-strong);--button-outline-text:var(--colors-ink);--button-outline-bg-hover:var(--colors-canvas-soft);
--button-radius:var(--radius-pill);
--nav-bg:var(--colors-canvas);--nav-text:var(--colors-ink);--nav-border:var(--colors-hairline);--nav-scrolled-bg:rgba(251,247,241,.88);
--product-card-bg:var(--colors-canvas);--product-card-padding:var(--spacing-md);--product-card-radius:var(--radius-lg);--product-card-border:var(--colors-hairline);
--menu-price-color:var(--colors-ink);--menu-rule-color:var(--colors-hairline);
--stat-number-color:var(--colors-ink);--stat-label-color:var(--colors-muted);
--input-bg:var(--color-white);--input-border:var(--colors-hairline-strong);--input-text:var(--colors-ink);--input-placeholder:var(--colors-muted-soft);--input-radius:var(--radius-sm);
--tag-bg:var(--colors-canvas-warm);--tag-text:var(--colors-body);
}

/* Dark storytelling sections: wrap any block in .sc-dark to flip semantics. */
.sc-dark{
--colors-canvas:var(--color-espresso-900);
--colors-canvas-soft:var(--color-espresso-800);
--colors-canvas-warm:var(--color-espresso-700);
--colors-ink:var(--color-cream-50);
--colors-body:rgba(251,247,241,.78);
--colors-muted:rgba(251,247,241,.56);
--colors-muted-soft:rgba(251,247,241,.38);
--colors-hairline:rgba(251,247,241,.16);
--colors-hairline-strong:rgba(251,247,241,.32);
--button-secondary-bg:var(--color-cream-50);--button-secondary-text:var(--color-espresso-900);--button-secondary-bg-hover:var(--color-cream-200);
--button-outline-text:var(--color-cream-50);--button-outline-bg-hover:rgba(251,247,241,.08);
--product-card-bg:var(--color-espresso-800);
--tag-bg:rgba(251,247,241,.1);--tag-text:rgba(251,247,241,.78);
background:var(--colors-canvas);color:var(--colors-body);
}