/* ============================================================
   ع التسوية — Design tokens
   Every colour below was sampled directly from the brand's own
   assets (logo.jpg, Menu.jpg, the Facebook cover), so the site
   and the printed menu read as one identity.
   ============================================================ */

:root {
  /* -- Brand core ------------------------------------------- */
  /* The saffron field that covers ~65% of the logo and menu.   */
  --saffron: #edac1a;
  --saffron-deep: #d0900d;
  --saffron-dark: #a86f06;
  --saffron-soft: #f6cd68;
  --saffron-mist: #fdf1d5;

  /* The dark green bars carrying gold text on the printed menu */
  --forest: #044630;
  --forest-deep: #02301f;
  --forest-soft: #0d5c40;
  --forest-mist: #e6efea;

  /* The fork & spoon in the logo                               */
  --fresh: #68a820;
  --fresh-deep: #4e8115;
  --fresh-mist: #eef6e2;

  /* The Arabic wordmark & "CRAFTED with CARE"                  */
  --terracotta: #7a2e10;
  --terracotta-soft: #a84a22;

  /* Warm neutrals — quieter than the packaging, so photos lead  */
  --cream: #fffcf7;
  --cream-deep: #f6f0e5;
  --paper: #ffffff;
  --ink: #241c11;
  --ink-soft: #6b5c47;
  --ink-faint: #9c8d78;
  --line: #e4dbcb;
  --line-soft: #efe8db;

  /* Feedback                                                   */
  --success: #2f8f4e;
  --success-mist: #e8f5ec;
  --danger: #c33a2b;
  --danger-mist: #fbeae8;
  --warning: #c47d0a;
  --warning-mist: #fdf2dd;
  --whatsapp: #25d366;
  --whatsapp-deep: #1da851;

  /* -- Typography ------------------------------------------- */
  --font-display: 'Baloo Bhaijaan 2', 'Cairo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Cairo', 'Segoe UI', 'Tahoma', system-ui, sans-serif;

  /* Fluid scale — mobile first, never overflowing a 320px screen */
  --text-xs: clamp(0.69rem, 0.66rem + 0.15vw, 0.76rem);
  --text-sm: clamp(0.8rem, 0.77rem + 0.17vw, 0.88rem);
  --text-base: clamp(0.92rem, 0.88rem + 0.2vw, 1rem);
  --text-md: clamp(1.02rem, 0.97rem + 0.26vw, 1.14rem);
  --text-lg: clamp(1.16rem, 1.08rem + 0.4vw, 1.4rem);
  --text-xl: clamp(1.38rem, 1.24rem + 0.7vw, 1.85rem);
  --text-2xl: clamp(1.7rem, 1.42rem + 1.4vw, 2.6rem);
  --text-3xl: clamp(2.05rem, 1.6rem + 2.2vw, 3.4rem);

  /* -- Space ------------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* Warm shadows — tinted with the brand brown, never neutral grey */
  --shadow-sm: 0 1px 2px rgba(70, 45, 10, 0.06), 0 2px 6px rgba(70, 45, 10, 0.05);
  --shadow: 0 2px 6px rgba(70, 45, 10, 0.07), 0 8px 22px rgba(70, 45, 10, 0.08);
  --shadow-lg: 0 6px 16px rgba(70, 45, 10, 0.1), 0 18px 44px rgba(70, 45, 10, 0.12);
  --shadow-brand: 0 10px 28px rgba(237, 172, 26, 0.34);
  --shadow-forest: 0 10px 26px rgba(4, 70, 48, 0.26);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* -- Layout ----------------------------------------------- */
  --page-max: 1180px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 62px;
  --bottom-nav-h: 66px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 900px) {
  :root {
    --header-h: 76px;
    --bottom-nav-h: 0px;
  }
}