/* Magic burger design handoff: reusable tokens, not a replacement app stylesheet. */
@import url("./fonts/nunito-sans.css");
@font-face {
  font-family: "Rubik One";
  src: url("./fonts/rubik-one-display.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --mb-font-ui: "Nunito Sans", Arial, sans-serif;
  --mb-font-display: "Rubik One", "Nunito Sans", Arial, sans-serif;
  --mb-font-display-weight: 400;
  --mb-weight-body: 400;
  --mb-weight-support: 600;
  --mb-weight-action: 800;
  --mb-weight-offer: 900;
  --mb-weight-display: 1000;

  --mb-color-bg: #fff4dc;
  --mb-color-surface: #fffaf2;
  --mb-color-ink: #250803;
  --mb-color-ink-muted: #72513d;
  --mb-color-yellow: #ffc323;
  --mb-color-orange: #ff5b00;
  --mb-color-sand: #f5d9a7;
  --mb-color-border: #efddba;
  --mb-color-focus: #250803;
  --mb-color-on-orange: #250803;
  --mb-color-on-dark: #fff4dc;

  --mb-space-4: 4px;
  --mb-space-8: 8px;
  --mb-space-12: 12px;
  --mb-space-16: 16px;
  --mb-space-24: 24px;
  --mb-space-32: 32px;
  --mb-space-48: 48px;
  --mb-space-64: 64px;

  --mb-radius-control: 14px;
  --mb-radius-card: 20px;
  --mb-radius-feature: 28px;
  --mb-radius-pill: 999px;
  --mb-shadow-card: 0 4px 14px rgb(37 8 3 / 0.06);
  --mb-shadow-feature: 0 8px 28px rgb(37 8 3 / 0.09);

  --mb-page-max: 1200px;
  --mb-page-gutter: 16px;
  --mb-header-height: 64px;
  --mb-layout-gap: 24px;
  --mb-card-gap: 12px;
  --mb-tap-min: 44px;
  --mb-action-height: 52px;
  --mb-wheel-mobile: 358px;
  --mb-wheel-desktop: 600px;

  --mb-title-size: 36px;
  --mb-count-size: 72px;
  --mb-title-leading: 1.08;
  --mb-title-tracking: -0.025em;
  --mb-body-size: 16px;
  --mb-body-leading: 1.5;
  --mb-condition-size: 14px;
  --mb-action-size: 16px;

  --mb-motion-fast: 160ms;
  --mb-motion-normal: 240ms;
  --mb-motion-reveal: 320ms;
  --mb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Food atlas: 1774 x 887 RGBA, with two square 887 x 887 cells. */
  --mb-food-cell-ratio: 1;
}

@media (max-width: 374px) {
  :root {
    --mb-title-size: 34px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --mb-page-gutter: 24px;
    --mb-title-size: 44px;
    --mb-wheel-mobile: 420px;
  }
}

@media (min-width: 1024px) {
  :root {
    --mb-page-gutter: 32px;
    --mb-header-height: 80px;
    --mb-layout-gap: 48px;
    --mb-title-size: 64px;
    --mb-count-size: 128px;
    --mb-body-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mb-motion-fast: 0ms;
    --mb-motion-normal: 0ms;
    --mb-motion-reveal: 0ms;
  }
}

/* Apply to the actual offer count inside the ready headline. */
.mb-count-number {
  color: var(--mb-color-orange);
  font-size: var(--mb-count-size);
  font-weight: var(--mb-weight-display);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

/* Optional food atlas helpers. Importing tokens alone does not alter existing UI. */
.mb-atlas-art {
  display: block;
  width: 100%;
  background-repeat: no-repeat;
}

.mb-atlas-art--food {
  aspect-ratio: var(--mb-food-cell-ratio);
  background-image: url("./art/food-atlas.png");
  background-size: 200% 100%;
}

.mb-atlas-art--burger { background-position: 0% 50%; }
.mb-atlas-art--shawarma { background-position: 100% 50%; }

/* Apply to interactive controls; keep parent overflow from clipping the ring. */
.mb-focus-ring:focus-visible {
  outline: 3px solid var(--mb-color-focus);
  outline-offset: 3px;
}