/* ============================================================
   السيف للأسماك المملحة — Design tokens

   The brand's own material is dark: the reviews poster sits on
   near-black charcoal with teal line-art, and the product posts
   sit on deep navy with a bright blue wordmark. So the site is
   dark too — a night-market counter, not a bright café. Every
   colour below is sampled from logo.jpg, reviews.jpg and the
   Facebook product post rather than invented.
   ============================================================ */

:root {
  /* -- Depths ------------------------------------------------ */
  /* The navy the product posts are built on, taken three steps  */
  /* down so photography and amber CTAs are the only bright      */
  /* things on the page.                                         */
  --abyss: #06111c;      /* text sitting ON a bright brand block */
  --sea: #0a1826;        /* the page itself                      */
  --sea-2: #132a40;      /* lifted soft surfaces — chips, pills  */
  --surface: #0f2235;    /* cards, inputs, sheets                */
  --surface-hi: #1a3550; /* hover state for the above            */

  /* -- Tide ---------------------------------------------------
     The wordmark blue from "للأسماك المملحة" on the product post.
     Bright enough to read as text on --sea, so brand-coloured
     blocks carry --abyss text rather than white.                */
  --tide: #3da5e8;
  --tide-deep: #1f7cbc;
  --tide-soft: #8fcdf4;
  --tide-mist: rgba(61, 165, 232, 0.14);

  /* -- Lagoon -------------------------------------------------
     The teal of the shrimp/lobster line-art on the reviews
     poster, and of the crest banner behind the fish.            */
  --lagoon: #22c1ce;
  --lagoon-bright: #6fe4ed;
  --lagoon-mist: rgba(34, 193, 206, 0.15);

  /* -- Amber --------------------------------------------------
     The chef-fish itself. The only warm colour in the system, so
     it is spent only on appetite: prices, ratings, calls to
     action.                                                     */
  --amber: #f5a623;
  --amber-deep: #dc8a0c;
  --amber-bright: #ffc65a;
  --amber-soft: #ffd98a;
  --amber-mist: rgba(245, 166, 35, 0.14);

  /* -- Salt --------------------------------------------------- */
  --salt: #ffffff;

  /* -- Text ---------------------------------------------------
     Cool-tinted rather than pure grey, so it belongs to the sea. */
  --ink: #eaf3fb;
  --ink-soft: #a7bfd4;
  --ink-faint: #7793ac;
  --line: rgba(146, 190, 225, 0.22);
  --line-soft: rgba(146, 190, 225, 0.12);

  /* -- Feedback -----------------------------------------------
     Lifted off their usual values so they stay legible on navy.  */
  --success: #3ad489;
  --success-mist: rgba(58, 212, 137, 0.15);
  --danger: #ff6b5e;
  --danger-mist: rgba(255, 107, 94, 0.15);
  --warning: #ffbe4d;
  --warning-mist: rgba(255, 190, 77, 0.15);
  --whatsapp: #25d366;
  --whatsapp-deep: #1da851;

  /* -- Typography ---------------------------------------------
     Baloo Bhaijaan 2 matches the heavy rounded Arabic of the
     logo wordmark; Cairo carries the body.                      */
  --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;

  /* Shadows go almost black on a dark page — a lighter shadow
     would read as fog. Depth comes from the glows instead.      */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.22);
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.32), 0 8px 22px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.38), 0 18px 44px rgba(0, 0, 0, 0.42);
  --shadow-brand: 0 10px 28px rgba(245, 166, 35, 0.28);
  --shadow-tide: 0 10px 26px rgba(61, 165, 232, 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;
  }
}