/* order-tokens.css
 * NEW tokens for the ordering module ONLY.
 * Extends the site design system — never overrides an existing :root token
 * from /css/styles.css. All values are built on top of existing brand tokens.
 */
:root {
  /* Semantic status colors (new — not present in main site) */
  --order-success: #22a05a;          /* matches the site's form-success green (#22a05a) */
  --order-success-dark: #17663a;
  --order-warning: #f5a623;
  --order-danger: var(--red);

  /* Surfaces derived from existing bg tokens */
  --order-surface: rgba(255,255,255,0.04);
  --order-surface-2: rgba(255,255,255,0.07);
  --order-surface-hover: rgba(255,255,255,0.10);
  --order-line: var(--stroke);

  /* Component radii (reuse scale from design system) */
  --order-radius-card: 20px;
  --order-radius-input: 18px;
  --order-radius-pill: 999px;

  /* Z-index layers — single source of truth for the module */
  --z-menu-sidebar: 20;
  --z-cart-fab: 60;
  --z-toast: 80;
  --z-overlay: 90;        /* cart backdrop — must sit BELOW the cart panel */
  --z-cart-drawer: 95;    /* cart panel — above its own backdrop */
  --z-modal: 100;         /* modifier modal — above everything */

  /* Heat scale (brand heat ladder) */
  --heat-0: #7db8ff;   /* plain / no heat */
  --heat-1: #ffd166;   /* classic / mild */
  --heat-2: #ff9f45;   /* hot */
  --heat-3: #ff5a2c;   /* extra hot */
  --heat-4: #ed2a26;   /* xxx hot — brand red */

  /* Motion */
  --order-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --order-transition: 0.25s var(--order-ease);
}