/* =====================================================================
   Shawarma Ghawar — Design tokens (from the approved brand guide)
   Colours: #272425 charcoal · #FFFFFF white · #E32E27 red · #F0A023 mustard
   Type: Baloo Bhaijaan 2 (display, as on the printed menu) · Cairo (body, as in brand guide)
   ===================================================================== */
@font-face { font-family: "Baloo Bhaijaan 2"; font-weight: 700; font-display: swap;
  src: url(../fonts/baloo-bhaijaan-2-arabic-700-normal.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Baloo Bhaijaan 2"; font-weight: 700; font-display: swap;
  src: url(../fonts/baloo-bhaijaan-2-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: "Baloo Bhaijaan 2"; font-weight: 800; font-display: swap;
  src: url(../fonts/baloo-bhaijaan-2-arabic-800-normal.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Baloo Bhaijaan 2"; font-weight: 800; font-display: swap;
  src: url(../fonts/baloo-bhaijaan-2-latin-800-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212; }
@font-face { font-family: "Cairo"; font-weight: 200 1000; font-display: swap;
  src: url(../fonts/cairo-arabic-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Cairo"; font-weight: 200 1000; font-display: swap;
  src: url(../fonts/cairo-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212; }

:root {
  /* brand */
  --sg-charcoal: #272425;
  --sg-white: #FFFFFF;
  --sg-red: #E32E27;
  --sg-mustard: #F0A023;
  /* derived tints of the brand colours only (no new hues) */
  --sg-mustard-soft: #F7CB7E;       /* mustard + white */
  --sg-mustard-wash: #FCEBCB;
  --sg-red-deep: #B8221C;           /* red pressed state */
  --sg-charcoal-70: rgba(39, 36, 37, .72);
  --sg-charcoal-12: rgba(39, 36, 37, .12);
  --sg-white-70: rgba(255, 255, 255, .7);

  --font-display: "Baloo Bhaijaan 2", "Cairo", system-ui, sans-serif;
  --font-body: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;

  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-8: 48px;
  --shadow-card: 0 1px 0 rgba(39,36,37,.06), 0 6px 18px -8px rgba(39,36,37,.28);
  --shadow-float: 0 12px 32px -10px rgba(39,36,37,.55);
  --ease: cubic-bezier(.2,.8,.2,1);
  --maxw: 1080px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-body); color: var(--sg-charcoal);
  background: var(--sg-mustard); line-height: 1.6; font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sg-charcoal); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.tnum { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--sg-charcoal); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 8px; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}