:root {
  /* ========== الألوان الأساسية ========== */
  --navy-950: #060D1F;
  --navy-900: #0A1E42;
  --navy-800: #0E2E61;
  --navy-700: #17407F;
  --navy-100: #E5ECF7;
  --navy-50:  #F2F6FC;

  --teal-700: #0B7F7E;
  --teal-600: #0EA5A4;
  --teal-500: #17B6B4;
  --teal-100: #D8F2F2;
  --teal-50:  #ECFAFA;

  --purple-700: #5B3FE4;
  --purple-600: #7C5CFC;
  --purple-500: #977BFF;
  --purple-100: #EAE4FF;
  --purple-50:  #F5F2FF;

  --amber-600: #D88A12;
  --amber-500: #F5A623;
  --amber-100: #FDEED6;
  --amber-50:  #FFF9EC;

  --red-600:  #D64545;
  --red-100:  #FBE0DF;
  --red-50:   #FEF4F3;

  --green-600: #1F9D55;
  --green-100: #D9F2E4;
  --green-50:  #EFFAF4;

  /* ========== تدرجات ودعم ========== */
  --ink-900: #16233D;
  --ink-600: #42506B;
  --ink-500: #5B6A85;
  --ink-400: #7887A1;
  --ink-300: #A9B4C7;
  --line:    #E4E9F2;
  --line-soft: #EEF1F7;
  --surface: #FFFFFF;
  --surface-soft: #F7F9FC;
  --surface-navy: #0B1B39;

  --grad-brand: linear-gradient(130deg, var(--navy-800) 0%, var(--purple-700) 55%, var(--teal-600) 130%);
  --grad-hero:  radial-gradient(1200px 600px at 85% -10%, rgba(124,92,252,.35), transparent 55%),
                radial-gradient(900px 500px at 0% 30%, rgba(14,165,164,.28), transparent 50%),
                linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 60%, #0A1833 100%);
  --grad-teal:  linear-gradient(135deg, var(--teal-600), var(--teal-700));
  --grad-purple:linear-gradient(135deg, var(--purple-600), var(--purple-700));
  --grad-amber: linear-gradient(135deg, var(--amber-500), var(--amber-600));

  /* ========== الخطوط ========== */
  --font-body: "Tajawal", "Segoe UI", system-ui, sans-serif;
  --font-head: "Noto Kufi Arabic", "Tajawal", system-ui, sans-serif;

  /* ========== أحجام الخطوط ========== */
  --fs-xs: 0.78rem;
  --fs-sm: 0.88rem;
  --fs-md: 1rem;
  --fs-lg: 1.15rem;
  --fs-xl: 1.4rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.1rem;
  --fs-4xl: 2.6rem;
  --fs-hero: clamp(2.2rem, 5.2vw, 3.6rem);

  /* ========== التباعد ========== */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;  --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;    --sp-9: 6rem;

  /* ========== الزوايا ========== */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-full: 999px;

  /* ========== الظلال ========== */
  --shadow-sm: 0 2px 8px rgba(11, 28, 58, .06);
  --shadow-md: 0 8px 24px -6px rgba(11, 28, 58, .14);
  --shadow-lg: 0 18px 48px -12px rgba(11, 28, 58, .22);
  --shadow-teal: 0 12px 28px -8px rgba(14, 165, 164, .45);
  --shadow-purple: 0 12px 28px -8px rgba(124, 92, 252, .45);
  --shadow-amber: 0 12px 28px -8px rgba(245, 166, 35, .45);

  /* ========== انتقالات ========== */
  --tr-fast: 160ms ease;
  --tr-med: 280ms cubic-bezier(.22, .8, .36, 1);
  --tr-slow: 520ms cubic-bezier(.16, 1, .3, 1);

  /* ========== طبقات ========== */
  --z-nav: 50; --z-chat: 80; --z-modal: 90; --z-toast: 100;

  /* ========== حاويات ========== */
  --container: 1180px;

  /* ========== اتجاه ========== */
  --dir-pad-start: 64px;
}