/* ==========================================================================
   Halal 360 — design tokens
   Palette mirrors mobile/lib/core/theme/app_colors.dart so the site and the
   app read as one product. Do not introduce colours outside this file.
   ========================================================================== */

/* --- Fonts: self-hosted, OFL. See assets/fonts/OFL.txt -------------------- */
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('../fonts/PlusJakartaSans-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
/* Scheherazade New is subset to exactly the glyphs in the al-Baqarah 2:168
   verse on the homepage. Adding new Arabic copy means re-subsetting it from
   mobile/assets/fonts/ScheherazadeNew-SemiBold.ttf. */
@font-face{font-family:'Scheherazade New';src:url('../fonts/ScheherazadeNew-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Brand greens */
  --green-900:#044D34; --green-800:#055C3E; --green-700:#087A52;
  --green-600:#0A8C5E; --green-500:#20A463; --green-400:#35B96B; --green-300:#7BD09A;

  /* Light grounds */
  --mint:#E4F5EA; --ivory:#FAF7EF; --bg:#F7F9F6; --surface:#FFFFFF;
  --muted:#F0F4F1; --border:#EDF1EE; --border-strong:#DFE7E1;

  /* Dark grounds */
  --dark-bg:#0F1713; --dark-surface:#17211B; --dark-card:#1A241E; --dark-mint:#123527;
  --dark-border:rgba(255,255,255,.09);

  /* Ink */
  --ink:#14231C; --ink-2:#626F68; --ink-3:#9BADA3;
  --ink-on-dark:#E8F0EA; --ink-2-on-dark:#9DB0A5;

  /* Status — always paired with an icon and a label, never colour alone */
  --halal:#20A463; --halal-bg:#E4F5EA;
  --haram:#D94444; --haram-bg:#FDEAEA;
  --mushbooh:#E07A1F; --mushbooh-bg:#FEF3E2; --mushbooh-ink:#A5520D;

  /* Accent — hairlines and small marks only */
  --gold:#C9A45C;        /* decoration only */
  --gold-ink:#8A6B22;    /* gold used as text */

  /* Spacing — 8px base */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px;
  --s-6:64px; --s-7:80px; --s-8:96px; --s-9:120px;
  --section-y:clamp(72px, 9vw, 136px);
  --gutter:clamp(20px, 5vw, 40px);
  --maxw:1200px;

  /* Radii */
  --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:28px; --r-2xl:32px; --r-pill:999px;

  /* Elevation — large blur, very low opacity */
  --sh-sm:0 1px 2px rgba(15,23,19,.04), 0 4px 12px rgba(15,23,19,.04);
  --sh-md:0 2px 4px rgba(15,23,19,.03), 0 12px 32px rgba(15,23,19,.06);
  --sh-lg:0 24px 64px rgba(15,23,19,.10), 0 4px 12px rgba(15,23,19,.04);
  --sh-phone:0 40px 80px rgba(4,45,32,.22), 0 8px 24px rgba(4,45,32,.12);

  /* Type scale */
  --t-display:clamp(2.4rem, 1.45rem + 3.9vw, 4rem);
  --t-h2:clamp(1.9rem, 1.25rem + 2.5vw, 3rem);
  --t-h3:clamp(1.25rem, 1.08rem + .7vw, 1.6rem);
  --t-lead:clamp(1.03rem, .97rem + .32vw, 1.22rem);
  --t-body:1rem;
  --t-sm:.9375rem;
  --t-xs:.8125rem;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);  /* softer settle, for entrances */
  --dur:.6s;
  --dur-fast:.28s;
  --dur-slow:.9s;

  --nav-h:72px;
}

@media (max-width:768px){ :root{ --nav-h:64px; } }