:root {
  /* Brand: main colour rgb(106, 168, 79) and shades derived from it. */
  --blue: #6aa84f;            /* fills: buttons, header, active states */
  --primary-strong: #4F7D3B;  /* hover / pressed */
  --primary-ink: #375729;     /* green text & links on light backgrounds (white on #6aa84f is only 2.87:1) */
  --primary-tint: #EEF5EA;
  --primary-tint-2: #E2EFDC;
  --red: #ea264d;
  --green: #41c18a;
  --page: #F4F7F2;
  --ink: #242424;
  --muted: #757575;
  --line: #e6e6e6;
  --shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  --wrap: 1200px;
  --header-top: 96px;
  --header-nav: 50px;
  --header-mobile: 126px;
  --bottom-nav: 70px;
  --font: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  --gap: 32px;
  /* Stacking order — keep every z-index here so layers never fight.
     page < sticky bars < bottom nav < header < cookie < drawer < sheets < modal < toast */
  --z-ask: 35;
  --z-overlay: 45;
  --z-mega: 48;
  --z-header: 50;
  --z-sticky-bar: 54;
  --z-bottom-nav: 55;
  --z-fab: 56;
  --z-cookie: 65;
  --z-drawer: 70;
  --z-sheet-back: 76;
  --z-sheet: 78;
  --z-sheet-top: 79;
  --z-modal: 80;
  --z-toast: 90;
}

@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Tajawal";
  src: url("../fonts/tajawal-latin-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}