/* ========================================== */
/* CSS Variables — Design Tokens */
/* ========================================== */

:root {
  /* ════════════════════════════════════════════
     🎨 ألوان البراند (--default-color / --secondary-color)
     معرّفة لكل ثيم في:  themes/{theme}/css/colors.css
     هذا الملف للتوكنز المشتركة بين كل الثيمات فقط.
     ════════════════════════════════════════════ */

  /* ── Brand Colors (مشتقّة) ── */
  --color-primary-mid:       #2563EB;
  --color-primary-light:     #EEF4FF;
  --color-primary-border:    #DBEAFE;

  /* ── Neutral Colors ── */
  --color-white:             #FFFFFF;
  --color-off-white:         #F8FAFF;
  --color-gray:              #F1F5F9;
  --color-gray-border:       #E2E8F0;
  --color-text:              #0F172A;
  --color-muted:             #64748B;
  --color-light:             #94A3B8;
  --color-border:            #E2E8F0;

  /* ── Status Colors ── */
  --color-success:           #4ADE80;
  --color-danger:            #EF4444;
  --color-warning:           #F59E0B;

  /* ── Success/Status Backgrounds ── */
  --color-success-bg:        #F0FDF4;
  --color-success-border:    #86EFAC;
  --color-success-text:      #166534;
  --color-danger-bg:         rgba(239, 68, 68, 0.15);
  --color-danger-text:       #FCA5A5;

  /* ════════════════════════════════════════════
     ✍️ خط المشروع — المصدر الوحيد (Alexandria)
     ════════════════════════════════════════════ */
  --font-family:             'Alexandria', sans-serif;
  --font-main:               'Alexandria', sans-serif;
  --font-weight-light:       300;
  --font-weight-regular:     400;
  --font-weight-medium:      500;
  --font-weight-semibold:    600;
  --font-weight-bold:        700;
  --font-weight-extrabold:   800;
  --font-weight-heavy:       900;

  /* ── Spacing ── */
  --spacing-xs:              4px;
  --spacing-sm:              8px;
  --spacing-md:              12px;
  --spacing-lg:              16px;
  --spacing-xl:              24px;
  --spacing-2xl:             32px;
  --spacing-3xl:             40px;
  --spacing-4xl:             48px;
  --spacing-5xl:             60px;

  /* ── Size Scale ── */
  --size-2xs:                4px;
  --size-xs:                 6px;
  --size-sm:                 8px;
  --size-md:                 12px;
  --size-lg:                 16px;
  --size-xl:                 20px;
  --size-2xl:                24px;
  --size-3xl:                28px;
  --size-4xl:                32px;

  /* ── Border Radius ── */
  --radius-none:             0px;
  --radius-sm:               4px;
  --radius-md:               8px;
  --radius-lg:               10px;
  --radius-xl:               12px;
  --radius-2xl:              16px;
  --radius-3xl:              18px;
  --radius-pill:             100px;

  /* ── Shadows ── */
  --shadow-xs:               0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:               0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md:               0 6px 24px rgba(26, 86, 219, 0.4);
  --shadow-lg:               0 16px 48px rgba(26, 86, 219, 0.12);
  --shadow-xl:               0 40px 80px rgba(0, 0, 0, 0.5);
  --shadow-2xl:              0 16px 48px rgba(0, 0, 0, 0.35);

  /* ── Transitions ── */
  --transition-fast:         0.15s;
  --transition-base:         0.25s;
  --transition-slow:         0.3s;

  /* ── Z-Index Stack ── */
  --z-nav:                   1000;
  --z-modal:                 900;
  --z-dropdown:              800;
  --z-floating:              100;

  /* ── Layout ── */
  --max-width:               1200px;
  --section-padding:         55px 5%;
  --section-padding-mobile:  48px 5%;
}

/* ── Semantic color aliases ── */

/* ── Animation keyframes ── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes waveAnimation {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.3); }
}