/**
 * carrinho.ai proprietary design tokens
 * Slogan: mercado perto, preço certo!
 * iFood-faithful delivery palette: red + yellow + ink + white.
 * NO brown/sand/beige. NO brand green. NO stiff SaaS blue.
 */

:root {
  /* ── Locked proprietary brand ── */
  --carrinho-red: #EA1D2C;
  --carrinho-red-hover: #D01926;
  --carrinho-red-pressed: #B91520;
  --carrinho-red-soft: #FFE8EA;
  --carrinho-red-deep: #C01018;

  --carrinho-yellow: #FFCC00;
  --carrinho-yellow-hover: #F0B800;
  --carrinho-yellow-pressed: #E0A800;
  --carrinho-yellow-soft: #FFF6D1;

  --carrinho-ink: #1A1A1A;
  --carrinho-ink-deep: #141414;
  --carrinho-ink-soft: #3D3D3D;
  --carrinho-ink-muted: #717171;

  --carrinho-snow: #FFFFFF;
  --carrinho-mist: #F7F7F7;
  --carrinho-mist-deep: #F5F5F5;
  --carrinho-line: #E0E0E0;
  --carrinho-line-strong: #BDBDBD;

  /* ── Aliases (compat — map old muddy names → clean) ── */
  --carrinho-flare: var(--carrinho-red);
  --carrinho-flare-soft: var(--carrinho-red-soft);
  --carrinho-flare-deep: var(--carrinho-red-deep);
  --carrinho-sun: var(--carrinho-yellow);
  --carrinho-sun-hover: var(--carrinho-yellow-hover);
  --carrinho-sun-pressed: var(--carrinho-yellow-pressed);
  --carrinho-sun-soft: var(--carrinho-yellow-soft);
  --carrinho-paper: var(--carrinho-snow);
  --carrinho-sand: var(--carrinho-mist);
  --carrinho-sand-deep: var(--carrinho-mist-deep);

  --carrinho-highlight: var(--carrinho-yellow);
  --carrinho-save: var(--carrinho-red);

  --shelf-surface: var(--carrinho-snow);
  --shelf-base: var(--carrinho-mist);
  --shelf-subtle: var(--carrinho-mist-deep);
  --shelf-muted: #EEEEEE;
  --shelf-line: var(--carrinho-line);
  --shelf-line-strong: var(--carrinho-line-strong);
  --gondola-dark: var(--carrinho-ink-deep);

  --ticket-radius: 8px;
  --chip-radius: 8px;
  --card-radius: 12px;

  /* ── Semantic → proprietary ── */
  --color-brand-primary: var(--carrinho-red);
  --color-brand-primary-hover: var(--carrinho-red-hover);
  --color-brand-primary-pressed: var(--carrinho-red-pressed);
  --color-brand-primary-soft: var(--carrinho-red-soft);
  --color-brand-accent: var(--carrinho-yellow);
  --color-brand-accent-deep: var(--carrinho-yellow-hover);
  --color-brand-mark: var(--carrinho-ink);
  --color-brand-ink: var(--carrinho-ink);
  --color-brand-citrus: var(--carrinho-yellow);
  --color-brand-citrus-soft: var(--carrinho-yellow-soft);
  --color-brand-red: var(--carrinho-red);
  --color-brand-red-soft: var(--carrinho-red-soft);
  --color-brand-red-deep: var(--carrinho-red-deep);

  --color-surface-base: var(--carrinho-mist);
  --color-surface-raised: var(--carrinho-snow);
  --color-surface-subtle: var(--carrinho-mist-deep);
  --color-surface-muted: #EEEEEE;
  --color-surface-sunken: #F0F0F0;
  --color-surface-inverse: var(--carrinho-ink-deep);
  --color-surface-sidebar: var(--carrinho-ink-deep);
  --color-surface-sidebar-hover: #2A2A2A;
  --color-surface-overlay: rgba(20, 20, 20, 0.48);

  --color-text-primary: var(--carrinho-ink);
  --color-text-secondary: var(--carrinho-ink-soft);
  --color-text-muted: var(--carrinho-ink-muted);
  --color-text-inverse: #FFFFFF;
  --color-text-link: var(--carrinho-ink);
  --color-text-on-brand: #FFFFFF;
  --color-text-on-accent: var(--carrinho-ink);
  --color-text-on-red: #FFFFFF;

  --color-border-subtle: #EFEFEF;
  --color-border-default: var(--carrinho-line);
  --color-border-strong: var(--carrinho-line-strong);
  --color-border-focus: var(--carrinho-red);

  /* Status — no green brand */
  --color-status-success: var(--carrinho-ink);
  --color-status-success-soft: var(--carrinho-yellow-soft);
  --color-status-warning: #B86A00;
  --color-status-warning-soft: #FFF6D1;
  --color-status-danger: var(--carrinho-red);
  --color-status-danger-soft: var(--carrinho-red-soft);
  --color-status-info: var(--carrinho-ink);
  --color-status-info-soft: var(--carrinho-mist-deep);

  --color-atmosphere-mist: #FFF6D1;
  --color-atmosphere-leaf: #FFE58A;
  --color-atmosphere-sky: #F7F7F7;
  --color-atmosphere-glow: rgba(255, 204, 0, 0.22);
  --color-atmosphere-citrus: rgba(255, 204, 0, 0.12);
  --color-atmosphere-red: rgba(234, 29, 44, 0.12);

  --font-display: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --font-body: "Figtree", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;
  --font-size-4xl: 48px;
  --font-size-5xl: 64px;

  --line-height-tight: 1.15;
  --line-height-snug: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  --letter-spacing-tight: -0.03em;
  --letter-spacing-display: -0.04em;
  --letter-spacing-wide: 0.04em;

  /* Locked spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 16px; /* legacy alias → scale */
  --space-6: 24px;
  --space-7: 24px; /* legacy alias → scale */
  --space-8: 32px;
  --space-10: 32px; /* legacy alias → scale */
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 64px; /* legacy alias → scale */
  --space-24: 64px; /* legacy alias → scale */

  --radius-none: 0px;
  --radius-sm: var(--ticket-radius);
  --radius-md: var(--card-radius);
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 20, 20, 0.08);
  --shadow-lg: 0 18px 48px rgba(20, 20, 20, 0.12);
  /* Double ring: white gap + brand — readable on red CTAs and light surfaces */
  --shadow-focus: 0 0 0 2px var(--carrinho-snow), 0 0 0 4px var(--carrinho-red-deep);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);

  /* Glass on clean white — not muddy */
  --glass-bg: rgba(255, 255, 255, 0.86);
  --glass-bg-strong: rgba(255, 255, 255, 0.94);
  --glass-border: rgba(224, 224, 224, 0.95);
  --glass-blur: 16px;
  --grad-paper: linear-gradient(180deg, #FFFFFF 0%, #F7F7F7 100%);
  --grad-sun-mist: radial-gradient(ellipse 80% 50% at 12% -8%, rgba(255, 204, 0, 0.14), transparent 55%);
  --grad-flare-mist: radial-gradient(ellipse 55% 40% at 100% 0%, rgba(234, 29, 44, 0.08), transparent 50%);

  --motion-duration-fast: 120ms;
  --motion-duration-normal: 200ms;
  --motion-duration-slow: 360ms;
  --motion-duration-hero: 600ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-emphasized: cubic-bezier(0.15, 1, 0.3, 1);
  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  --opacity-disabled: 0.5;

  /* Locked z-index: base → sticky → dropdown → overlay/modal → cart → toast → nested → onboard */
  --z-base: 1;
  --z-sticky: 20;
  --z-dropdown: 30;
  --z-overlay: 40;
  --z-modal: 40;
  --z-cart-bar: 50;
  --z-toast: 60;
  --z-modal-nested: 70;
  --z-onboard: 80; /* consumer geo/onboarding overlay */

  --shadow-cart: 0 12px 32px rgba(20, 20, 20, 0.28);

  /* Locked shells */
  --shell-max: 430px; /* consumer column */
  --shell-wide: 960px;
  --panel-max: 1280px; /* admin / merchant canvas */
  --panel-sidebar: 248px; /* legacy; hub shell prefers top IA */
  --gutter: 16px; /* consumer = --space-4 */
  --gutter-lg: 24px; /* admin / merchant = --space-6 */
  --touch-min: 44px;
  --product-thumb: 56px;

  /* Locked nav heights */
  --nav-h: 64px; /* consumer bottom nav */
  --chip-h: 44px;
  --topbar-h: 52px; /* consumer sticky top */
  --admin-topbar-h: 64px; /* admin / merchant hub topbar */

  /* Locked admin shell */
  --admin-shell-max: var(--panel-max);
  --admin-gutter: var(--gutter-lg);
  --admin-canvas-pad-y: var(--space-5);
  --admin-canvas-pad-x: var(--gutter-lg);

  /* Locked modal sizes (panels densos 1280–1440 → ~960–1100) */
  --modal-sm: 640px;
  --modal-md: 960px;
  --modal-lg: 1100px;
  --modal-max-h: 920px;
  --modal-sm-max-h: 840px;
  --modal-pad-y: var(--space-3); /* 12 */
  --modal-pad-x: var(--space-4); /* 16 */
  --modal-body-pad-bottom: var(--space-4);

  /* Locked table density */
  --table-font-size: var(--font-size-sm); /* 14 — type scale only */
  --table-head-font-size: var(--font-size-xs); /* 12 */
  --table-cell-pad-y: var(--space-2); /* 8 */
  --table-cell-pad-x: var(--space-3); /* 12 */
  --table-wrap-max-h: 560px;

  --bp-xs: 320px;
  --bp-sm: 375px;
  --bp-sm-plus: 390px;
  --bp-phone: 414px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;

  --color-status-online: var(--carrinho-yellow);
  --color-status-offline: var(--carrinho-red);
}