/* =====================================================================
   TOKENS — Hulul Al Injaz design system
   Brand: Charcoal Green #202A27 · Ivory #F7F5F0 · Muted Gold #B59D6D · Deep Green #35564E
   ===================================================================== */

/* IBM Plex Sans Arabic — self-hosted (Arabic + Latin subsets share one family) */
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/plex-arabic-arabic-300.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-arabic-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plex-arabic-arabic-500.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plex-arabic-arabic-600.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plex-arabic-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/plex-arabic-latin-300.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/plex-arabic-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/plex-arabic-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/plex-arabic-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/plex-arabic-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* ---- Brand */
  --color-ink: #202A27;
  --color-ivory: #F7F5F0;
  --color-gold: #B59D6D;
  --color-green: #35564E;

  /* ---- Extended palette */
  --color-white: #FFFFFF;
  --color-surface: #F4F1EA;      /* sand — alternate light section */
  --color-surface-soft: #FAF9F6; /* paper */
  --color-green-deep: #2B4740;   /* hover / pressed deep green */
  --color-green-soft: rgba(53, 86, 78, 0.08);
  --color-hero-overlay: rgba(53, 86, 78, 0.82); /* solid brand green over the hero photo */
  --color-ink-soft: #2A3632;

  --color-text: #202A27;
  --color-text-muted: #5D645F;   /* ≥ 5:1 on ivory */
  --color-text-on-dark: #F7F5F0;
  --color-text-on-dark-muted: rgba(247, 245, 240, 0.74);

  --color-gold-text: #7D6740;    /* gold for small text on light bg (≥ 4.5:1) */
  --color-gold-light: #D6C49E;   /* gold for small text on deep green (≥ 4.5:1) */
  --color-gold-soft: rgba(181, 157, 109, 0.16);
  --color-gold-line: rgba(181, 157, 109, 0.55);

  --color-border: rgba(32, 42, 39, 0.12);
  --color-border-strong: rgba(32, 42, 39, 0.22);
  --color-border-on-dark: rgba(247, 245, 240, 0.16);

  /* ---- Typography */
  --font-sans: "Plex Arabic", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;

  --fs-display: clamp(42px, 5.4vw, 84px);
  --fs-h1: clamp(40px, 4.6vw, 72px);
  --fs-h2: clamp(30px, 3.4vw, 56px);
  --fs-h3: clamp(21px, 1.7vw, 28px);
  --fs-h4: clamp(18px, 1.3vw, 21px);
  --fs-lead: clamp(18px, 1.35vw, 21px);
  --fs-body: 17px;
  --fs-small: 15px;
  --fs-xs: 13px;
  --fs-label: 12.5px;

  --lh-display: 1.28;
  --lh-heading: 1.38;
  --lh-body: 1.85;
  --lh-tight: 1.5;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Layout */
  --container: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --grid-gap: clamp(16px, 2vw, 28px);
  --header-h: 88px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --section-y: clamp(88px, 9vw, 140px);
  --section-y-sm: clamp(64px, 6.5vw, 104px);

  /* ---- Shape */
  --radius-xs: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ---- Elevation (kept very low — rely on borders/layers) */
  --shadow-1: 0 1px 2px rgba(32, 42, 39, 0.05);
  --shadow-2: 0 18px 40px -24px rgba(32, 42, 39, 0.28);
  --shadow-3: 0 30px 60px -36px rgba(32, 42, 39, 0.38);

  /* ---- Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur: 0.45s;
  --dur-slow: 0.9s;

  --z-header: 50;
  --z-mega: 49;
  --z-menu: 80;
}

@media (max-width: 768px) {
  :root {
    --fs-body: 16px;
    --header-h: 72px;
    --section-y: clamp(56px, 14vw, 84px);
    --section-y-sm: clamp(48px, 12vw, 72px);
  }
}