/* =============================================
   DESIGN TOKENS - CSS Variables
   مدار المستقبل للاستثمار
   ============================================= */

:root {
  /* ── Colors ── */
  --color-primary:        #0F4C5C;
  --color-primary-dark:   #0A3D4A;
  --color-secondary:      #0A3D4A;
  --color-accent:         #C9A961;
  --color-accent-hover:   #b8953a;
  --color-dark:           #1a1a2e;
  --color-light:          #F4F6F8;
  --color-white:          #ffffff;
  --color-gray-100:       #f3f4f6;
  --color-gray-200:       #e5e7eb;
  --color-gray-300:       #d1d5db;
  --color-gray-400:       #9ca3af;
  --color-gray-500:       #6b7280;
  --color-gray-600:       #4b5563;
  --color-gray-700:       #374151;
  --color-gray-800:       #1f2937;
  --color-gray-900:       #111827;
  --color-emerald:        #10b981;

  /* ── Typography ── */
  --font-family-base:     'Tajawal', sans-serif;
  --font-size-xs:         0.625rem;   /* 10px */
  --font-size-sm:         0.75rem;    /* 12px */
  --font-size-base:       0.875rem;   /* 14px */
  --font-size-md:         1rem;       /* 16px */
  --font-size-lg:         1.125rem;   /* 18px */
  --font-size-xl:         1.25rem;    /* 20px */
  --font-size-2xl:        1.5rem;     /* 24px */
  --font-size-3xl:        1.875rem;   /* 30px */
  --font-size-4xl:        2.25rem;    /* 36px */
  --font-size-5xl:        3rem;       /* 48px */
  --font-size-6xl:        3.75rem;    /* 60px */
  --font-size-7xl:        4.5rem;     /* 72px */
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ── Spacing ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-14:  3.5rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* ── Container ── */
  --container-max-width:  1280px;
  --container-padding:    1.5rem;

  /* ── Border Radius ── */
  --radius-sm:    0.375rem;
  --radius-md:    0.5rem;
  --radius-lg:    0.75rem;
  --radius-xl:    1rem;
  --radius-2xl:   1.5rem;
  --radius-full:  9999px;

  /* ── Shadows ── */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:    0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg:    0 10px 15px rgba(0,0,0,0.1);
  --shadow-xl:    0 20px 25px rgba(0,0,0,0.1);
  --shadow-2xl:   0 25px 50px rgba(0,0,0,0.25);
  --shadow-card:  0 2px 20px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 12px 40px rgba(15,76,92,0.15);

  /* ── Transitions ── */
  --transition-fast:    0.15s ease;
  --transition-base:    0.3s ease;
  --transition-slow:    0.5s ease;
  --transition-slower:  0.7s ease;

  /* ── Z-index ── */
  --z-navbar:  50;
  --z-modal:   100;
  --z-overlay: 200;

  /* ── Nav ── */
  --nav-height:  5rem;  /* 80px */
}