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

   Palette: warm sand & cream surfaces · taupe-brown chrome ·
            muted lilac accent · gold rating stars.
   ============================================================ */

/* ----------  Tokens  ---------- */
:root {
  /* accent — muted lilac / purple (mapped onto the old "violet" names) */
  --violet:      #a48ecb;   /* primary accent lilac */
  --violet-600:  #8f77b9;   /* hover */
  --violet-700:  #75609a;   /* deep — text on light */
  --violet-300:  #c9bce0;   /* focus ring / soft */
  --violet-200:  #ded4ee;   /* softest */
  --lilac-bg:    #efe9f6;
  --lilac-100:   #ebe3f4;
  --lilac-200:   #e0d5ee;

  /* warm taupe-brown — nav chrome & secondary accents */
  --brown:       #9d8560;
  --brown-600:   #86703f;
  --brown-100:   #d8c8a9;

  /* warm neutrals */
  --ink:         #2b2417;
  --ink-soft:    #383021;
  --charcoal:    #3a3226;
  --slate:       #6c6250;
  --slate-light: #978c76;
  --line:        #e4dac6;
  --line-strong: #d6cab1;
  --white:       #f8f3e8;   /* warm off-white — cards */
  --paper:       #ece3d1;   /* page cream */
  --gold:        #e3b23c;   /* rating stars */

  /* gradients */
  --grad-violet: linear-gradient(135deg, #b29ed8 0%, #8f77b9 100%);
  --grad-violet-soft: linear-gradient(135deg, #c4b4e6 0%, #a48ecb 100%);
  --grad-ink: linear-gradient(165deg, #3a3226 0%, #221d12 72%);

  /* 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 — warm-toned */
  --sh-sm: 0 1px 2px rgba(43,36,23,.06), 0 3px 10px rgba(43,36,23,.05);
  --sh-md: 0 6px 20px rgba(74,58,28,.10), 0 14px 38px rgba(74,58,28,.08);
  --sh-lg: 0 28px 60px rgba(60,46,20,.18), 0 12px 28px rgba(60,46,20,.12);
  --sh-violet: 0 12px 28px rgba(117,96,154,.36);
  --sh-violet-sm: 0 6px 16px rgba(117,96,154,.26);

  /* 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;
}