/* ============================================================
   DARAJA EDU — Design Tokens (single source of truth)
   ============================================================ */
:root {
  /* Brand palette (mandated) */
  --c-primary: #42ACCF;
  --c-primary-dark: #2489AA;
  --c-dark: #101820;
  --c-white: #FFFFFF;
  --c-bg-light: #F6FAFC;
  --c-muted: #64748B;
  --c-border: #E2E8F0;

  /* Functional tints derived from brand (tokenized, not invented UI colors) */
  --c-primary-soft: rgba(66, 172, 207, 0.10);
  --c-primary-line: rgba(66, 172, 207, 0.35);
  --c-primary-ghost: rgba(66, 172, 207, 0.06);
  --c-dark-soft: rgba(16, 24, 32, 0.06);

  /* Type */
  --font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", "Segoe UI", Tahoma, sans-serif;
  --font-latin: "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  --text-h1: clamp(2.4rem, 1.2rem + 4.6vw, 4.4rem);
  --text-h2: clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem);
  --text-h3: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --text-lead: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
  --text-body: 1.0625rem;
  --text-small: 0.875rem;
  --text-xs: 0.78rem;

  --lh-tight: 1.18;
  --lh-body: 1.75;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5.5rem;
  --space-10: 7rem;

  /* Layout */
  --container: 72rem;             /* 1152px */
  --container-narrow: 58rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --nav-h: 4.25rem;

  /* Shape & motion */
  --radius-sm: 0.5rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.5rem;
  --shadow-nav: 0 10px 34px rgba(16, 24, 32, 0.07);
  --t-fast: 160ms;
  --t-med: 320ms;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(66, 172, 207, 0.45);
}