/* EasyMealz design tokens (DS2 section 4). Loaded FIRST on every Part A page; the hub
   brand (/auth/api/branding/theme.css) is loaded LAST and only supplies --site-*.
   This is the ONE place a brand fallback literal lives: paprika #b23b14 (owner, 2026-10-04).
   Every pair below is asserted by backend/tests/test_em_tokens_contrast.py (WCAG 2.x). */
:root{
  /* Surfaces: warm neutral, in the lightness band of the shared header (white / #111827). */
  --em-bg:#faf6ee;--em-surface:#fffdf8;--em-wash:#efe8da;--em-wash-2:#e4dac6;
  /* Text: ink (body), ink-2 (secondary, fees, expiry), ink-3 (quiet meta only). */
  --em-ink:#231f1a;--em-ink-2:#4f483f;--em-ink-3:#6a6155;
  /* Lines: control borders (>=3:1, WCAG 1.4.11) vs decorative dividers are DIFFERENT tokens. */
  --em-line:#8a806f;--em-line-soft:#d9d0bf;
  /* Brand "Paprika": hub-supplied, the same literal as fallback everywhere. */
  --em-brand:var(--site-accent-fill,#b23b14);
  --em-brand-hover:var(--site-accent-hover,#922f0f);
  --em-on-brand:var(--site-on-accent,#ffffff);
  --em-brand-ink:var(--site-accent-ink,#9a3412);
  --em-brand-wash:#fbe9df;
  /* Semantic food and status colours (not brand-derived; allergens never share the brand hue). */
  --em-leaf-ink:#2a6a3c;--em-leaf-wash:#e6f1e3;--em-leaf-line:#7aa882;
  --em-caution-ink:#8a3a00;--em-caution-wash:#fff0d6;--em-caution-line:#b45f06;
  --em-danger-ink:var(--status-danger-ink,#a8200f);--em-danger-wash:#fde8e4;
  --em-info-ink:#1e4f8a;--em-info-wash:#e5eef9;
  --em-focus:#1d4ed8;
  --em-overlay:rgb(20 16 12 / .6);
  /* Type (12px floor; numbers always lining + tabular). */
  --em-font-ui:Inter,system-ui,sans-serif;
  --em-font-display:'Cormorant Garamond',Georgia,serif;
  --em-text-xs:.75rem;--em-text-sm:.875rem;--em-text-base:1rem;--em-text-lg:1.125rem;
  --em-text-xl:1.25rem;--em-text-2xl:1.5rem;--em-text-3xl:2rem;
  --em-title:clamp(1.75rem,4.5vw,2.5rem);
  --em-hero:clamp(2.25rem,6vw,4.5rem);
  --em-leading-tight:1.15;--em-leading-body:1.55;
  --em-tracking-eyebrow:.08em;
  --em-num:lining-nums tabular-nums;
  /* Space, radius, elevation, motion. */
  --em-space-1:.25rem;--em-space-2:.5rem;--em-space-3:.75rem;--em-space-4:1rem;
  --em-space-5:1.5rem;--em-space-6:2rem;--em-space-8:3rem;--em-space-10:5rem;
  --em-radius-sm:.5rem;--em-radius-md:.75rem;--em-radius-lg:1rem;--em-radius-pill:62rem;
  --em-shadow-1:0 .0625rem .125rem rgb(35 31 26 / .08),0 .0625rem .25rem rgb(35 31 26 / .06);
  --em-shadow-2:0 .5rem 1.5rem rgb(35 31 26 / .14);
  --em-shadow-3:0 1rem 3rem rgb(35 31 26 / .22);
  --em-ease:cubic-bezier(.2,.7,.2,1);--em-dur-1:150ms;--em-dur-2:220ms;
  --em-target:2.75rem;
  --em-header-h:var(--he-height,3.75rem);
  /* Legacy names kept as aliases so existing selectors resolve to the one system. */
  --em-paper:var(--em-bg);--em-panel:var(--em-surface);--em-text:var(--em-ink);
  --em-muted:var(--em-ink-3);--em-tint:var(--em-wash);--em-display:var(--em-font-display);
  --em-radius:var(--em-radius-lg);
  color-scheme:light;
}
/* Dark: warm neutrals in the same lightness band as the shared header's #111827, so the
   header/content seam is a hue nuance rather than a colour step (DS2-24 site side). */
:root[data-theme=dark],:root.dark{
  --em-bg:#171411;--em-surface:#211d19;--em-wash:#2b2621;--em-wash-2:#352f28;
  --em-ink:#f5efe6;--em-ink-2:#cfc5b5;--em-ink-3:#a89d8c;
  --em-line:#85796a;--em-line-soft:#3c352d;
  --em-brand:var(--site-accent-fill,#f08a5d);--em-brand-hover:var(--site-accent-hover,#f49a73);
  --em-on-brand:var(--site-on-accent,#1d120c);--em-brand-ink:var(--site-accent-ink,#f6a37d);
  --em-brand-wash:#3a2318;
  --em-leaf-ink:#9fd3a4;--em-leaf-wash:#1f2e22;--em-leaf-line:#4f7a55;
  --em-caution-ink:#ffc982;--em-caution-wash:#33260f;--em-caution-line:#b8812f;
  --em-danger-ink:var(--status-danger-ink,#ffa598);--em-danger-wash:#3a1c17;
  --em-info-ink:#a9c8f5;--em-info-wash:#1b2638;
  --em-focus:#8ab4ff;--em-overlay:rgb(0 0 0 / .7);
  --em-shadow-1:0 .0625rem .125rem rgb(0 0 0 / .4);
  --em-shadow-2:0 .5rem 1.5rem rgb(0 0 0 / .5);
  --em-shadow-3:0 1rem 3rem rgb(0 0 0 / .6);
  color-scheme:dark;
}
:root:has(body>.he-context-bar){--em-header-h:6.25rem}
html.page-mode-embedded{--em-header-h:0rem}
@media (prefers-reduced-motion:reduce){:root{--em-dur-1:0ms;--em-dur-2:0ms}}