/* ============================================
   variables.css — Design Tokens
   كل الألوان والخطوط والمسافات في مكان واحد
   لو حابب تغيّر أي حاجة → غيّرها هنا بس
   ============================================ */

:root {

  /* ---- الألوان الرئيسية (من اللوجو) ---- */
  --clr-primary:        #0d9e6e;   /* أخضر Ultra Care */
  --clr-primary-light:  #10c987;   /* أخضر فاتح */
  --clr-primary-dark:   #097a54;   /* أخضر داكن */

  --clr-secondary:      #1a3a5c;   /* أزرق داكن */
  --clr-secondary-light:#234d7a;   /* أزرق متوسط */

  --clr-accent:         #f59e0b;   /* ذهبي — للأزرار المهمة */
  --clr-accent-dark:    #d97706;   /* ذهبي داكن */

  /* ---- ألوان الخلفية — لمسة نعنع فاتحة بدل الأبيض ---- */
  --clr-bg:             #eef8f3;   /* خلفية رئيسية — نعناعي فاتح */
  --clr-surface:        #f4faf7;   /* خلفية الكاردات — نعناعي خفيف بدل أبيض خالص */
  --clr-surface-2:      #e6f3ec;   /* خلفية أقسام متناوبة — أغمق شوية */
  --clr-surface-white:  #ffffff;   /* أبيض خالص — يُستخدم باعتدال */
  --clr-border:         rgba(13, 158, 110, 0.1); /* حدود خضراء خفيفة */

  /* ---- ألوان النص ---- */
  --clr-text:           #0f1f2e;   /* نص رئيسي داكن */
  --clr-text-muted:     #546e7a;   /* نص ثانوي رمادي-أزرق */
  --clr-text-light:     #37474f;   /* نص متوسط */

  /* ---- Glassmorphism — بلمسة نعناعية ---- */
  --glass-bg:           rgba(244, 250, 247, 0.88);
  --glass-border:       rgba(13, 158, 110, 0.14);
  --glass-blur:         blur(18px);

  /* ---- Gradients ---- */
  --gradient-primary:   linear-gradient(135deg, #0d9e6e 0%, #0a7ab5 100%);
  --gradient-hero:      linear-gradient(150deg, #e4f5ed 0%, #daeef6 50%, #eef8f3 100%);
  --gradient-card:      linear-gradient(145deg, rgba(13,158,110,0.08) 0%, rgba(10,122,181,0.06) 100%);
  --gradient-cta:       linear-gradient(135deg, #0d9e6e 0%, #0a7ab5 100%);
  --gradient-accent:    linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --gradient-section:   linear-gradient(180deg, #eef8f3 0%, #e2f0ea 50%, #eef8f3 100%);
  --gradient-card-hover:linear-gradient(145deg, rgba(13,158,110,0.12) 0%, rgba(10,122,181,0.10) 100%);
  --gradient-mint:      linear-gradient(135deg, #e8f5ef 0%, #ddf0f5 100%);
  --gradient-soft:      linear-gradient(180deg, rgba(13,158,110,0.06) 0%, rgba(10,122,181,0.04) 100%);

  /* ---- الخطوط ---- */
  --font-heading:       'Cairo', sans-serif;
  --font-body:          'Tajawal', sans-serif;

  /* ---- أحجام الخط ---- */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */

  /* ---- أوزان الخط ---- */
  --font-normal:  400;
  --font-medium:  500;
  --font-semibold:600;
  --font-bold:    700;
  --font-black:   900;

  /* ---- المسافات ---- */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ---- الحدود الدائرية ---- */
  --radius-sm:   0.375rem;  /* 6px */
  --radius-md:   0.75rem;   /* 12px */
  --radius-lg:   1rem;      /* 16px */
  --radius-xl:   1.5rem;    /* 24px */
  --radius-2xl:  2rem;      /* 32px */
  --radius-full: 9999px;

  /* ---- الظلال — أخف وأرقى ---- */
  --shadow-sm:   0 2px 8px rgba(13,158,110,0.08);
  --shadow-md:   0 4px 20px rgba(13,158,110,0.10);
  --shadow-lg:   0 10px 40px rgba(13,158,110,0.12);
  --shadow-glow: 0 0 30px rgba(13,158,110,0.20);
  --shadow-glow-accent: 0 0 30px rgba(245,158,11,0.25);

  /* ---- الـ Transitions ---- */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   500ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- أبعاد ---- */
  --nav-height:     80px;
  --topbar-height:  44px;
  --container-max:  1200px;
  --container-pad:  var(--space-6);
}