/* ============================================================
   TOKENS — نظام التصميم (Design Tokens)
   نظام ألوان باستيل، أنواع الخطوط، الظلال، والمسافات
   ============================================================ */

:root {
  /* ---------- الألوان الأساسية (Pastel Palette) ---------- */
  --bg:          #FBF6EC;   /* عاجي دافئ */
  --bg-soft:     #F5EEDF;
  --surface:     #FFFFFF;
  --surface-2:   #FFFBF3;

  --ink:         #1F2540;   /* كحلي عميق للنص */
  --ink-2:       #3D4564;
  --muted:       #7A7A8C;
  --line:        rgba(31, 37, 64, 0.08);

  /* ألوان الأقسام الخمسة (Pastel) */
  --peach:       #FFD9C2;   /* خوخي */
  --peach-ink:   #B5612A;
  --mint:        #CDEBD7;   /* نعناعي */
  --mint-ink:    #2F7A52;
  --lavender:    #E0D5F2;   /* لافندر */
  --lavender-ink:#5A3F94;
  --sky:         #CFE3F2;   /* سماوي */
  --sky-ink:     #2E5F8A;
  --butter:      #FFE9A8;   /* أصفر زبدي */
  --butter-ink:  #8A6510;

  /* لون أساسي للعلامة */
  --brand:       #6A8E7F;   /* أخضر زيتي هادئ */
  --brand-soft:  #DCE9DC;
  --brand-ink:   #2E4A3F;

  --gold:        #C9A961;
  --rose:        #E8A5A5;

  /* ---------- الطباعة ---------- */
  --font-ar: 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  --font-en: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* ---------- الظلال ---------- */
  --shadow-sm: 0 1px 2px rgba(31,37,64,0.04), 0 1px 3px rgba(31,37,64,0.04);
  --shadow-md: 0 4px 12px rgba(31,37,64,0.06), 0 2px 4px rgba(31,37,64,0.04);
  --shadow-lg: 0 12px 32px rgba(31,37,64,0.08), 0 4px 12px rgba(31,37,64,0.05);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 24px rgba(31,37,64,0.06);

  /* ---------- نصف الأقطار ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ---------- المسافات ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ar);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }