/**
 * Design System - Design Tokens
 * Marsud Attendance System
 * 
 * ✅ متوافق 100% مع Instructions.md
 * ✅ اللون الأساسي: #1E3A8A
 * ✅ اللون الثانوي: #16A34A
 * ✅ دعم RTL/LTR
 * ✅ Dark/Light Mode
 */

/* ═══════════════════════════════════════════════════════
   Light Theme - الوضع الفاتح
   ═══════════════════════════════════════════════════════ */
:root {
  /* ── الألوان الأساسية ── */
  /* حسب Instructions.md الإلزامي */
  --c-primary: #1E3A8A;        /* أزرق - اللون الأساسي للنظام */
  --c-primary-600: #1e40af;    /* أزرق داكن - للهوفر والحالات النشطة */
  --c-secondary: #16A34A;      /* أخضر - اللون الثانوي */
  --c-success: #16A34A;        /* أخضر - حالات النجاح */
  --c-warning: #f59e0b;        /* برتقالي - التحذيرات */
  --c-danger: #ef4444;         /* أحمر - الأخطاء والحذف */
  
  /* ── الخلفيات والأسطح ── */
  --c-bg: #F9FAFB;             /* الخلفية الرئيسية */
  --c-surface: #f7f7fb;        /* أسطح البطاقات والنماذج */
  --c-card: #ffffff;           /* خلفية البطاقات */
  
  /* ── النصوص ── */
  --c-text: #1b1f2a;           /* النص الأساسي */
  --c-text-muted: #667085;     /* النص الثانوي */
  
  /* ── الحدود والفواصل ── */
  --c-border: #e6e8ee;         /* حدود العناصر */
  
  /* ── حالات التركيز ── */
  --c-focus: #1E3A8A33;        /* تركيز شفاف (20% opacity) */
  
  /* ── Aliases للتوافق مع الكود الموجود ── */
  --primary: var(--c-primary);
  --secondary: var(--c-secondary);
  --background: var(--c-bg);
  
  /* ═══════════════════════════════════════════════════════
     المسافات (Spacing Scale)
     ═══════════════════════════════════════════════════════ */
  --sp-0: 0;
  --sp-1: 0.25rem;    /* 4px */
  --sp-2: 0.5rem;     /* 8px */
  --sp-3: 0.75rem;    /* 12px */
  --sp-4: 1rem;       /* 16px */
  --sp-5: 1.25rem;    /* 20px */
  --sp-6: 1.5rem;     /* 24px */
  --sp-8: 2rem;       /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  
  /* ═══════════════════════════════════════════════════════
     الزوايا والظلال
     ═══════════════════════════════════════════════════════ */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-full: 9999px;
  
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 6px 16px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);
  --shadow-xl: 0 20px 48px rgba(16, 24, 40, 0.16);
  
  /* ═══════════════════════════════════════════════════════
     الخطوط والأحجام
     ═══════════════════════════════════════════════════════ */
  --font-sans: "Cairo", "Tajawal", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "Courier New", Courier, monospace;
  
  /* أحجام الخطوط */
  --fs-10: 0.625rem;   /* 10px */
  --fs-12: 0.75rem;    /* 12px */
  --fs-14: 0.875rem;   /* 14px */
  --fs-16: 1rem;       /* 16px */
  --fs-18: 1.125rem;   /* 18px */
  --fs-20: 1.25rem;    /* 20px */
  --fs-24: 1.5rem;     /* 24px */
  --fs-28: 1.75rem;    /* 28px */
  --fs-32: 2rem;       /* 32px */
  --fs-36: 2.25rem;    /* 36px */
  
  /* أوزان الخطوط */
  --fw-light: 300;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  
  /* ═══════════════════════════════════════════════════════
     الحركة والانتقالات
     ═══════════════════════════════════════════════════════ */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 350ms;
  
  /* ═══════════════════════════════════════════════════════
     Z-Index Scale
     ═══════════════════════════════════════════════════════ */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1100;
}

/* ═══════════════════════════════════════════════════════
   Dark Theme - الوضع الداكن
   ═══════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  /* ── الألوان الأساسية ── */
  /* ثابتة حسب Instructions.md للتماسك البصري */
  --c-primary: #1E3A8A;        /* ثابت في كل الأوضاع */
  --c-primary-600: #1e40af;    /* أزرق داكن - متناسق مع Primary */
  --c-secondary: #16A34A;      /* ثابت */
  --c-success: #16A34A;        /* ثابت */
  --c-warning: #f7b23c;        /* أفتح قليلاً */
  --c-danger: #f87171;         /* أفتح قليلاً */
  
  /* ── الخلفيات والأسطح ── */
  --c-bg: #111827;             /* حسب Instructions.md */
  --c-surface: #161b26;        /* أفتح قليلاً من الخلفية */
  --c-card: #1F2937;           /* بطاقات داكنة */
  
  /* ── النصوص ── */
  --c-text: #F9FAFB;           /* حسب Instructions.md */
  --c-text-muted: #98a2b3;     /* رمادي فاتح */
  
  /* ── الحدود والفواصل ── */
  --c-border: #2a3242;         /* حدود داكنة */
  
  /* ── حالات التركيز ── */
  --c-focus: #1E3A8A55;        /* أكثر وضوحاً في الداكن */
  
  /* ── الظلال المعدّلة للوضع الداكن ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.6);
}

/* ═══════════════════════════════════════════════════════
   Reduced Motion Support
   احترام تفضيلات إمكانية الوصول
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════
   Color Utilities (للاستخدام في JavaScript)
   ═══════════════════════════════════════════════════════ */
:root {
  /* RGB values للاستخدام مع rgba() */
  --c-primary-rgb: 30, 58, 138;
  --c-secondary-rgb: 22, 163, 74;
  --c-success-rgb: 22, 163, 74;
  --c-danger-rgb: 239, 68, 68;
  --c-warning-rgb: 245, 158, 11;
}