/* ============================================================
   ALNATIQ · DESIGN TOKENS  (colours · fonts · spacing · shadows)
   This is your branding control panel. Change a value here and it
   updates everywhere on the site.
   ============================================================ */

/* ----------  Tokens  ---------- */
:root {
  /* colour */
  --violet:      #7c5cff;
  --violet-600:  #6a45f2;
  --violet-700:  #5a36d9;
  --violet-300:  #b9a4ff;
  --violet-200:  #d6caff;
  --lilac-bg:    #f7f4ff;
  --lilac-100:   #efe9ff;
  --lilac-200:   #e6dcff;
  --ink:         #15121f;
  --ink-soft:    #211c30;
  --charcoal:    #2a2540;
  --slate:       #5f5a73;
  --slate-light: #8b87a0;
  --line:        #e9e4f5;
  --line-strong: #ddd5ee;
  --white:       #ffffff;
  --paper:       #fdfcff;

  /* gradients */
  --grad-violet: linear-gradient(135deg, #8b6bff 0%, #6a45f2 100%);
  --grad-violet-soft: linear-gradient(135deg, #a78bff 0%, #7c5cff 100%);
  --grad-ink: linear-gradient(165deg, #221d33 0%, #15121f 70%);

  /* type — modern Arabic sans (Tajawal), not Naskh */
  --font-display: "Tajawal", "Segoe UI", system-ui, sans-serif;
  --font-body: "Tajawal", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-arabic: "Tajawal", sans-serif;

  /* radius */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* shadow */
  --sh-sm: 0 1px 2px rgba(21,18,31,.06), 0 3px 10px rgba(21,18,31,.04);
  --sh-md: 0 6px 20px rgba(74,48,150,.09), 0 14px 38px rgba(74,48,150,.07);
  --sh-lg: 0 28px 60px rgba(64,40,140,.18), 0 12px 28px rgba(64,40,140,.10);
  --sh-violet: 0 12px 28px rgba(108,69,242,.40);
  --sh-violet-sm: 0 6px 16px rgba(108,69,242,.28);

  /* layout */
  --wrap: 1180px;
  --gap: clamp(1rem, 3vw, 2rem);
  --nav-h: 74px;
}

/* Serif (Amiri) type: add class "font-serif" to any section to switch it */
.font-serif {
  --font-display: "Amiri", serif;
  --font-body: "Amiri", serif;
  --font-arabic: "Amiri", serif;
}