/* menu-ds-bridge.css — Maps DS tokens ↔ restaurant theme variables
 *
 * Direction 1: accent-colors.css (per-restaurant theme) → DS tokens
 *   So .mm-btn, .mm-chip etc. pick up the restaurant's brand color.
 *
 * Direction 2: DS tokens → legacy CSS variables
 *   So existing CSS that references --text-primary, --spacing-md etc.
 *   immediately resolves through DS values (including dark mode).
 *
 * After all CSS files are migrated to --mm-* directly, Direction 2
 * mappings can be removed (Phase 8 cleanup).
 */

body.menu-page {
  /* ── Direction 1: accent → DS ──────────────────────────────────────── */
  --mm-brand-functional: var(--primary-color);
  --mm-on-primary: var(--primary-contrast);
  --mm-primary-rgb: var(--primary-rgb-space);
  --mm-primary-70: var(--primary-dark);
  --mm-primary-10: rgb(var(--primary-rgb-space) / 0.10);
  --mm-primary-20: rgb(var(--primary-rgb-space) / 0.20);

  /* ── Direction 2: DS → legacy colors ───────────────────────────────── */
  --text-primary: var(--mm-text);
  --text-secondary: var(--mm-text-secondary);
  --text-disabled: var(--mm-text-tertiary);
  --text-inverse: var(--mm-on-primary);

  --background-color: var(--mm-bg);
  --surface-color: var(--mm-surface);
  --divider-color: var(--mm-border);
  --border-color: var(--mm-border-strong);

  --error-color: var(--mm-error-40);
  --error-bg: var(--mm-error-10);

  /* ── Direction 2: DS → legacy spacing ──────────────────────────────── */
  --spacing-xs: var(--mm-sp-1);
  --spacing-sm: var(--mm-sp-2);
  --spacing-md: var(--mm-sp-4);
  --spacing-lg: var(--mm-sp-6);
  --spacing-xl: var(--mm-sp-8);
  --spacing-xxl: var(--mm-sp-12);

  /* ── Direction 2: DS → legacy radius ───────────────────────────────── */
  --radius-sm: var(--mm-radius-xs);
  --radius-md: var(--mm-radius-md);
  --radius-lg: var(--mm-radius-lg);
  --radius-xl: var(--mm-radius-xl);
  --radius-round: var(--mm-radius-full);

  /* ── Direction 2: DS → legacy shadows ──────────────────────────────── */
  --shadow-1: var(--mm-shadow-xs);
  --shadow-2: var(--mm-shadow-sm);
  --shadow-3: var(--mm-shadow-md);
  --shadow-4: var(--mm-shadow-lg);
  --shadow-5: var(--mm-shadow-xl);

  /* ── Direction 2: DS → legacy typography ────────────────────────────── */
  --font-family-base: var(--mm-ff-body);
  --font-size-xs: var(--mm-fs-xs);
  --font-size-sm: var(--mm-fs-sm);
  --font-size-base: var(--mm-fs-base);
  --font-size-lg: var(--mm-fs-lg);
  --font-size-xl: var(--mm-fs-xl);
  --font-size-2xl: var(--mm-fs-2xl);
  --font-size-3xl: var(--mm-fs-3xl);

  /* ── Direction 2: DS → legacy transitions ──────────────────────────── */
  --transition-fast: var(--mm-dur-short3) var(--mm-ease-standard);
  --transition-normal: var(--mm-dur-medium1) var(--mm-ease-standard);
  --transition-slow: var(--mm-dur-medium3) var(--mm-ease-standard);

  /* ── Typography: apply DS fonts to menu page ───────────────────────── */
  font-family: var(--mm-ff-body);
}

/* Hebrew override */
[dir="rtl"] body.menu-page {
  font-family: var(--mm-ff-hebrew);
}

/* Ensure mm-input-group is unconstrained in menu context */
body.menu-page .mm-input-group {
  max-width: none;
}