/* ============================================================================
   WUTHQA — Professional Consulting Company
   Foundational design tokens: color + typography
   Updated brand palette: muted teal #587e80, muted gold #a5956b,
   light beige surface #f4eedd. Noto Kufi Arabic + Poppins.
   ============================================================================ */

/* Production builds generate this file from pinned Fontsource packages. */
@import url('/assets/fonts/fonts.css');

:root {
  /* ---- Brand core (updated palette: muted teal / muted gold) --------- */
  --teal:        #587e80;   /* primary — rgb(88 126 128)  */
  --teal-700:    #4b6b6d;   /* darker hover / pressed     */
  --teal-900:    #304546;   /* deepest, on-dark text      */
  --gold:        #a5956b;   /* secondary / accent — rgb(165 149 107) */
  --gold-600:    #8d7f5b;   /* gold hover / pressed       */

  /* Tint washes used across the site (token/10 = 10% alpha over white) */
  --teal-tint:   #587e801a; /* primary/10 — icon chips, soft section bg */
  --gold-tint:   #a5956b1a; /* secondary/10 — icon chips                */

  /* Amber highlight — used for "featured" callout cards */
  --amber-50:    #fffbeb;
  --amber-600:   #d97706;
  --amber-border:#d9770633; /* amber-600/20 callout border */

  /* ---- Neutrals (shadcn slate) -------------------------------------- */
  --bg:          #ffffff;   /* background           */
  --bg-muted:    #f1f5f9;   /* muted / section fill */
  --fg:          #0f172a;   /* foreground (slate-900) */
  --fg-2:        #475569;   /* body secondary (slate-600) */
  --fg-3:        #64748b;   /* muted-foreground (slate-500) */
  --border:      #e2e8f0;   /* border / input (slate-200) */
  --border-soft: #f1f5f9;   /* hairline card border       */
  --surface:     #f4eedd;   /* light beige card / panel   */
  --on-teal:     #ffffff;   /* text on teal               */
  --on-gold:     #ffffff;   /* text on gold               */
  --destructive: #dc2626;

  /* ---- Radii (base --radius: .5rem) --------------------------------- */
  --r-sm:  6px;
  --r-md:  8px;    /* rounded-lg — default card / button */
  --r-lg:  12px;
  --r-xl:  16px;   /* rounded-2xl — featured callout cards */
  --r-full: 9999px;/* pills, icon chips, avatars */

  /* ---- Elevation (Tailwind shadow scale) ---------------------------- */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);

  /* ---- Spacing rhythm (Tailwind 4px base) --------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --space-20: 80px; --space-32: 128px;
  --container: 1200px;    /* container mx-auto px-4 */
  --section-y: 80px;      /* py-20 standard section rhythm */

  /* ---- Typography families ------------------------------------------ */
  --font-ar: 'Noto Kufi Arabic', sans-serif;       /* Arabic (primary) */
  --font-en: 'Poppins', ui-sans-serif, system-ui, sans-serif; /* Latin */

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  300ms;
}

/* ============================================================================
   Base elements & semantic type scale
   The site is Arabic-first (dir="rtl", lang="ar"). Latin runs use Poppins.
   ============================================================================ */
html[lang="ar"], [dir="rtl"] { font-family: var(--font-ar); }

body {
  font-family: var(--font-ar);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}

.font-en { font-family: var(--font-en); }

/* Display / headings — Arabic headings use Noto Kufi at heavier weights */
.h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.h2 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; line-height: 1.25; }
.h3 { font-size: clamp(22px, 2.5vw, 28px); font-weight: 600; line-height: 1.3; }
.h4 { font-size: 20px; font-weight: 600; line-height: 1.4; }
.eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--gold); }

p, .body { font-size: 17px; font-weight: 400; color: var(--fg-2); line-height: 1.8; }
.lead  { font-size: 19px; font-weight: 400; color: var(--fg-2); line-height: 1.8; }
.small { font-size: 14px; color: var(--fg-3); }
.stat  { font-size: clamp(32px, 4vw, 44px); font-weight: 700; color: var(--teal); }
.label { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }

a { color: var(--teal); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--gold); }