/* ==========================================================================
   AL MOSTAQBAL FOODS — Design Tokens
   Warm, trust-driven palette rooted in food/agriculture/trade.
   ========================================================================== */

:root {
  /* ---- Color: base ---- */
  --color-bg: #F7F3EC;
  --color-bg-alt: #F1EAE0;
  --color-surface: #FFFFFF;
  --color-surface-alt: #FDFBF7;
  --color-text: #24211D;
  --color-text-muted: #5B564D;
  --color-text-soft: #8A8378;
  --color-border: rgba(36, 33, 29, 0.09);
  --color-border-strong: rgba(36, 33, 29, 0.16);

  /* ---- Color: brand accents ----
     Derived from the actual logo (a pixel-frequency scan of its dominant
     non-neutral colors returned a deep teal cluster around #004854 and a
     metallic gold gradient spanning roughly #C08418–#F0B43C). Used as
     inspiration rather than copied 1:1 — the logo's raw teal is a touch
     too saturated/cyan for large UI surfaces, and its gold is a shiny
     metallic gradient rather than a flat color, so both are refined into
     calmer, more "designed" solid shades that still read as the same
     family at a glance. */
  --color-primary: #12414C;
  --color-primary-dark: #0A2A32;
  --color-primary-light: #2E6C78;
  --color-primary-tint: #E3EDEE;
  --color-secondary: #C6912E;
  --color-secondary-dark: #A5751F;
  --color-secondary-tint: #F5E8CC;
  /* Darker still, reserved for small gold TEXT on the cream background
     (eyebrow labels etc.) — --color-secondary-dark reads fine as a fill
     (buttons, icons) but falls short of 4.5:1 at caption text sizes. */
  --color-secondary-text: #8F661A;
  --color-tertiary: #B5573A;
  --color-tertiary-tint: #F3E2DB;

  /* ---- Color: on-dark surfaces (primary-filled cells) ---- */
  --color-on-primary: #F7F3EC;
  --color-on-primary-muted: rgba(247, 243, 236, 0.72);
  --color-on-primary-border: rgba(247, 243, 236, 0.18);

  /* ---- Shadows: warm-toned, ambient only ---- */
  --shadow-sm: 0 2px 10px rgba(36, 33, 29, 0.05);
  --shadow-md: 0 8px 30px rgba(36, 33, 29, 0.08);
  --shadow-lg: 0 16px 44px rgba(36, 33, 29, 0.12);
  --shadow-hover: 0 20px 48px rgba(36, 33, 29, 0.14);

  /* ---- Radius ---- */
  --radius-cell: 24px;
  --radius-cell-sm: 18px;
  --radius-control: 12px;
  --radius-pill: 999px;
  --radius-tag: 8px;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-11: 96px;

  /* ---- Bento cell padding scale (responsive via clamp) ---- */
  --cell-pad: clamp(20px, 3vw, 40px);
  --cell-pad-sm: clamp(16px, 2.4vw, 28px);
  --grid-gap: clamp(14px, 2vw, 24px);

  /* ---- Layout ---- */
  --container-max: 1360px;
  --container-pad: clamp(20px, 5vw, 56px);

  /* ---- Typography: font families ---- */
  --font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --font-en: 'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ---- Typography: type scale ---- */
  --text-display: clamp(2.5rem, 5.2vw, 4.2rem);
  --text-h1: clamp(2rem, 3.6vw, 3rem);
  --text-h2: clamp(1.5rem, 2.4vw, 2.1rem);
  --text-h3: clamp(1.15rem, 1.5vw, 1.4rem);
  --text-body-lg: clamp(1.05rem, 1.2vw, 1.2rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.75rem;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-base: 250ms;
  --duration-reveal: 600ms;

  /* ---- Icon ---- */
  --icon-stroke: 1.75;
}

@media (max-width: 767px) {
  :root {
    --text-display: 2.3rem;
  }
}