/* =========================================================
   WAZ — Design tokens
   ---------------------------------------------------------
   Every color, font, size and timing used across the site
   lives here. Change a value once → it updates everywhere.
   ========================================================= */

:root {
  /* ---------- Brand colors ---------- */
  --c-primary: #000000;          /* main brand color (black) */
  --c-bg: #050706;               /* page background */
  --c-bg-alt: #0b0f0d;           /* alternate section background */
  --c-surface: #111614;          /* cards / panels */
  --c-surface-2: #171d1a;        /* hover state for cards */
  --c-border: rgba(255, 255, 255, 0.08);
  --c-border-strong: rgba(255, 255, 255, 0.16);

  --c-text: #f4f6f5;             /* main text */
  --c-text-muted: #9aa5a0;       /* secondary text */
  --c-text-dim: #6b7570;         /* tertiary text */

  /* Accent = the warm-white glow of the logo + the forest mint light */
  --c-accent: #c9f2dc;
  --c-accent-strong: #8fe0b6;
  --c-glow: rgba(220, 255, 235, 0.55);

  /* ---------- Typography ---------- */
  --font-display-en: "Space Grotesk", system-ui, sans-serif;
  --font-body-en: "Inter", system-ui, sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Tahoma", sans-serif;

  --fs-xs: 0.78rem;
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
  --fs-2xl: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem);
  --fs-3xl: clamp(2.4rem, 1.4rem + 4vw, 4.6rem);

  /* ---------- Layout ---------- */
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(72px, 10vw, 140px);
  --nav-h: 76px;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.35s;
  --dur-slow: 0.8s;

  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* Arabic uses one family for headings & body */
html[lang="ar"] {
  --font-display-en: var(--font-ar);
  --font-body-en: var(--font-ar);
}