/*
 * ╔═══════════════════════════════════════════════════════════════╗
 * ║                    CSS DESIGN TOKENS                          ║
 * ║              Single Source of Truth للألوان                  ║
 * ║                  مدرسة الإرشاد - 2026                        ║
 * ╚═══════════════════════════════════════════════════════════════╝
 * 
 * هذا الملف هو المصدر الوحيد لكل الألوان والقيم التصميمية
 * ممنوع إضافة hex/rgb مباشرة في أي ملف آخر
 * كل قيمة هنا قابلة للتعديل من ملفات الثيمات
 */

:root {
  /* ═════════════════════════════════════════════════════════════
   * 1. PRIMARY & SECONDARY COLORS
   * ═════════════════════════════════════════════════════════════ */

  --primary-color: #2563eb;
  --primary-color-rgb: 37, 99, 235;
  --primary-light: #3b82f6;
  --primary-dark: #1e40af;

  --secondary-color: #06b6d4;
  --secondary-color-rgb: 6, 182, 212;
  --secondary-light: #22d3ee;
  --secondary-dark: #0891b2;

  /* Compatibility aliases */
  --primary-grad: var(--primary-color);
  --secondary-grad: var(--secondary-color);
  --primary-rgb: var(--primary-color-rgb);
  --secondary-rgb: var(--secondary-color-rgb);

  /* ═════════════════════════════════════════════════════════════
   * 2. NEUTRAL COLORS (Grayscale Palette)
   * ═════════════════════════════════════════════════════════════ */

  --neutral-50: #f9fafb;
  --neutral-100: #f8f9fa;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e0;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;

  /* ═════════════════════════════════════════════════════════════
   * 3. SEMANTIC COLORS (Status & Feedback)
   * ═════════════════════════════════════════════════════════════ */

  /* Success */
  --success-color: #27ae60;
  --success-color-hover: #229954;
  --success-color-rgb: 39, 174, 96;
  --success-soft: rgba(39, 174, 96, 0.1);
  --success-border: rgba(39, 174, 96, 0.3);

  /* Danger / Error */
  --danger-color: #e74c3c;
  --danger-color-hover: #c0392b;
  --danger-color-rgb: 231, 76, 60;
  --danger-rgb: 231, 76, 60;
  --danger-soft: rgba(231, 76, 60, 0.1);
  --danger-border: rgba(231, 76, 60, 0.3);

  /* Warning */
  --warning-color: #ffc107;
  --warning-color-2: #ff9800;
  --warning-color-rgb: 255, 193, 7;
  --warning-soft: rgba(255, 193, 7, 0.1);
  --warning-soft-bg: #fffbf0;
  --warning-border: rgba(255, 193, 7, 0.3);

  /* Info */
  --info-color: #3498db;
  --info-color-rgb: 52, 152, 219;
  --info-soft: rgba(52, 152, 219, 0.1);
  --info-border: rgba(52, 152, 219, 0.3);

  /* ═════════════════════════════════════════════════════════════
   * 4. SURFACE COLORS (Backgrounds & Cards)
   * ═════════════════════════════════════════════════════════════ */

  --bg-color: #f0f4f8;
  --light-bg: #f0f4f8;
  --dark-bg: #1e1b4b;

  --surface-0: #ffffff;
  --surface-1: rgba(255, 255, 255, 0.85);
  --surface-2: rgba(255, 255, 255, 0.95);
  --surface-3: #fafbfc;
  --surface-muted: #f8f9fa;
  --border-soft: rgba(0, 0, 0, 0.08);

  --overlay-bg: rgba(0, 0, 0, 0.6);
  --overlay-light: rgba(0, 0, 0, 0.3);
  --overlay-dark: rgba(0, 0, 0, 0.8);

  --placeholder-bg: #cbd5e0;

  /* ═════════════════════════════════════════════════════════════
   * 5. TEXT COLORS
   * ═════════════════════════════════════════════════════════════ */

  --text-main: #1e293b;
  --text-primary: #1e293b;
  --text-color: #1e293b;

  --text-light: #64748b;
  --text-secondary: #64748b;
  --text-muted: #64748b;

  --text-strong: #0f172a;
  --text-disabled: #95a5a6;
  --text-subtle: #666666;
  --text-white: #ffffff;
  --text-inverse: #ffffff;

  /* ═════════════════════════════════════════════════════════════
   * 6. BORDER & DIVIDER COLORS
   * ═════════════════════════════════════════════════════════════ */

  --border-color: rgba(0, 0, 0, 0.1);
  --border-color-light: rgba(0, 0, 0, 0.05);
  --border-light: rgba(0, 0, 0, 0.05);
  --border-medium: rgba(0, 0, 0, 0.15);
  --border-dark: rgba(0, 0, 0, 0.25);

  --divider-color: #e2e8f0;

  /* ═════════════════════════════════════════════════════════════
   * 6.5. NAVIGATION & NAVBAR
   * ═════════════════════════════════════════════════════════════ */

  --nav-bg: rgba(255, 255, 255, 0.85);
  --sidebar-bg: rgba(255, 255, 255, 0.95);
  --nav-text: var(--text-main);
  --nav-text-hover: var(--primary-color);

  /* ═════════════════════════════════════════════════════════════
   * 7. SHADOWS (Elevation System)
   * ═════════════════════════════════════════════════════════════ */

  --shadow-0: none;
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-4: 0 12px 32px rgba(0, 0, 0, 0.18);
  --shadow-5: 0 16px 48px rgba(0, 0, 0, 0.2);

  /* Semantic shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);

  --shadow: 0 4px 15px rgba(37, 99, 235, 0.2);
  --accent-shadow: rgba(37, 99, 235, 0.2);
  --accent-shadow-soft: rgba(231, 76, 60, 0.3);

  --shine-1: rgba(255, 255, 255, 0.3);
  --shine-2: rgba(255, 255, 255, 0.5);

  /* ═════════════════════════════════════════════════════════════
   * 8. BRAND COLORS (Social Media)
   * ═════════════════════════════════════════════════════════════ */

  /* Instagram */
  --brand-instagram: #e1306c;
  --brand-instagram-2: #f56040;
  --brand-instagram-3: #f77737;
  --brand-instagram-4: #fcaf45;
  --brand-instagram-5: #ffdc80;
  --brand-instagram-hover: #c13584;
  --brand-instagram-rgb: 225, 48, 108;

  /* X (Twitter) */
  --brand-x: #000000;
  --brand-x-2: #1a1a1a;
  --brand-x-hover: #333333;
  --brand-twitter: #1da1f2;
  --brand-twitter-rgb: 29, 161, 242;

  /* WhatsApp */
  --brand-whatsapp: #25d366;
  --brand-whatsapp-rgb: 37, 211, 102;
  --brand-whatsapp-hover: #1da851;

  /* ═════════════════════════════════════════════════════════════
   * 9. SUBJECT COLORS (Academic Subjects)
   * ═════════════════════════════════════════════════════════════ */

  --subject-arabic-1: #e74c3c;
  --subject-arabic-2: #c0392b;

  --subject-religion-1: #27ae60;
  --subject-religion-2: #229954;

  --subject-math-1: #3498db;
  --subject-math-2: #2980b9;

  --subject-science-1: #9b59b6;
  --subject-science-2: #8e44ad;

  --subject-english-1: #f39c12;
  --subject-english-2: #e67e22;

  --subject-digital-1: #1abc9c;
  --subject-digital-2: #16a085;

  --subject-sports-1: #e67e22;
  --subject-sports-2: #d35400;

  --subject-arts-1: #ff6b6b;
  --subject-arts-2: #ee5a52;

  --subject-music-1: #4ecdc4;
  --subject-music-2: #45b7aa;
  --subject-music-hover: #26d0ce;

  --subject-citizenship-1: #6c5ce7;
  --subject-citizenship-2: #5b4cdb;
  --subject-citizenship-hover: #5f3dc4;

  /* ═════════════════════════════════════════════════════════════
   * 10. ACTIVITY CATEGORY COLORS
   * ═════════════════════════════════════════════════════════════ */

  --activity-science-1: #3498db;
  --activity-science-2: #2980b9;

  --activity-cultural-1: #e74c3c;
  --activity-cultural-2: #c0392b;

  --activity-sports-1: #27ae60;
  --activity-sports-2: #229954;

  --activity-tech-1: #9b59b6;
  --activity-tech-2: #8e44ad;

  --activity-useful-1: #f39c12;
  --activity-useful-2: #e67e22;

  --activity-news-1: #34495e;
  --activity-news-2: #2c3e50;

  /* ═════════════════════════════════════════════════════════════
   * 11. STAFF & SPECIAL COLORS
   * ═════════════════════════════════════════════════════════════ */

  --staff-pink-500: #fd6585;
  --staff-pink-500-rgb: 253, 101, 133;

  --staff-peach-200: #ffd3a5;
  --staff-sky-200: #8ec5fc;
  --staff-lilac-200: #e0c3fc;

  --staff-slate-900: #2c3e50;
  --staff-gray-700: #333333;
  --staff-gray-600: #555555;
  --staff-gray-500: #6c757d;

  --staff-border-light: #f0f0f0;

  --staff-ejada-count: #fbbf24;
  --staff-ejada-count-rgb: 251, 191, 36;

  /* ═════════════════════════════════════════════════════════════
   * 12. GOLD & ACCENT COLORS
   * ═════════════════════════════════════════════════════════════ */

  --gold: #ffd700;
  --gold-rgb: 255, 215, 0;

  --creative-gold: #edb527;
  --creative-gold-rgb: 237, 181, 39;

  --ejada-gold-1: #d4af37;
  --ejada-gold-2: #b8860b;
  --ejada-gold-3: #f4e4bc;
  --ejada-gold-shadow: rgba(212, 175, 55, 0.4);

  --accent-color: #e74c3c;
  --accent-color-hover: #c0392b;
  --accent-color-rgb: 231, 76, 60;
  --accent-soft-bg: rgba(231, 76, 60, 0.1);

  --creative-badge-1: #f39c12;
  --creative-badge-2: #e67e22;
  --creative-badge-shadow: rgba(243, 156, 18, 0.3);

  --star-empty: #dddddd;

  /* Gold text colors for badges */
  --gold-dark: #8b5a00;
  --gold-brown: #8b4513;

  /* ═════════════════════════════════════════════════════════════
   * 13. SLATE COLORS (Additional Grays)
   * ═════════════════════════════════════════════════════════════ */

  --slate-400: #78909c;
  --slate-500: #607d8b;
  --slate-600: #546e7a;
  --slate-700: #455a64;
  --slate-800: #37474f;

  --slate-blue-rgb: 120, 119, 198;

  --ink-900: #000000;

  /* ═════════════════════════════════════════════════════════════
   * 14. NAVIGATION COLORS
   * ═════════════════════════════════════════════════════════════ */

  --nav-bg: rgba(255, 255, 255, 0.85);
  --nav-text: var(--text-main);
  --nav-text-hover: var(--primary-color);
  --nav-bg-hover: rgba(var(--primary-color-rgb), 0.08);
  --nav-active-bg: rgba(var(--primary-color-rgb), 0.12);
  --nav-height: 70px;

  --sidebar-bg: rgba(255, 255, 255, 0.95);

  /* ═════════════════════════════════════════════════════════════
   * 15. GRADIENT COLORS (للتدرجات اللونية)
   * ═════════════════════════════════════════════════════════════ */

  --fire-gradient-color1: #f12711;
  --fire-gradient-color2: #f5af19;

  --purple-gradient-color1: #7f00ff;
  --purple-gradient-color2: #e100ff;

  --sky-gradient-color1: #3f2b96;
  --sky-gradient-color2: #a8c0ff;

  --nature-gradient-color1: #11998e;
  --nature-gradient-color2: #38ef7d;

  /* ═════════════════════════════════════════════════════════════
   * 16. SPACING SCALE (8pt Grid System)
   * ═════════════════════════════════════════════════════════════ */

  --space-0: 0;
  --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 */

  /* ═════════════════════════════════════════════════════════════
   * 17. BORDER RADIUS SCALE
   * ═════════════════════════════════════════════════════════════ */

  --radius-none: 0;
  --radius-sm: 0.25rem;
  /* 4px */
  --radius-base: 0.375rem;
  /* 6px */
  --radius-md: 0.5rem;
  /* 8px */
  --radius-lg: 0.75rem;
  /* 12px */
  --radius-xl: 1rem;
  /* 16px */
  --radius-2xl: 1.5rem;
  /* 24px */
  --radius-3xl: 2rem;
  /* 32px */
  --radius-full: 9999px;

  --border-radius: 15px;
  /* Legacy support */

  /* ═════════════════════════════════════════════════════════════
   * 18. TYPOGRAPHY SCALE
   * ═════════════════════════════════════════════════════════════ */

  --font-size-xs: 0.75rem;
  /* 12px */
  --font-size-sm: 0.875rem;
  /* 14px */
  --font-size-base: 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-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* ═════════════════════════════════════════════════════════════
   * 19. TRANSITIONS & ANIMATIONS
   * ═════════════════════════════════════════════════════════════ */

  --transition-fast: 150ms;
  --transition-base: 300ms;
  --transition-slow: 500ms;

  /* ⚡ PERFORMANCE OPTIMIZATION: Replaced 'all' with specific properties */
  /* REMOVED: height, width, padding, margin to prevent scroll jank/jumping */
  --transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ═════════════════════════════════════════════════════════════
   * 20. Z-INDEX SCALE (Layering System)
   * ═════════════════════════════════════════════════════════════ */

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;

  /* ═════════════════════════════════════════════════════════════
   * 21. HERO SECTION UNIFIED TOKENS
   * ═════════════════════════════════════════════════════════════ */

  /* Hero Container */
  --hero-padding-desktop: 100px 0 80px;
  --hero-padding-tablet: 80px 0 60px;
  --hero-padding-mobile: 60px 0 40px;
  --hero-min-height-desktop: 60vh;
  --hero-min-height-tablet: 50vh;
  --hero-min-height-mobile: 45vh;
  /* هيرو ملء الشاشة: حد أدنى للمحتوى الطويل + حد أعلى على الشاشات الطويلة جداً (يُستخدم في hero-unified) */
  --hero-stack-safe-min: 27.5rem;
  --hero-stack-cap-min: 52rem;
  /* مسافة إضافية تحت النافبار قبل أول عنصر في الهيرو (تجنّب تراكب مع padding الغلاف) */
  --hero-below-nav-gap: 1.75rem;
  --hero-below-nav-gap-sm: 1.125rem;
  --hero-content-max-width: 900px;

  /* Hero Badge */
  --hero-badge-padding: 12px 24px;
  --hero-badge-padding-tablet: 10px 20px;
  --hero-badge-padding-mobile: 8px 18px;
  --hero-badge-font-size: 1rem;
  --hero-badge-font-size-tablet: 0.9rem;
  --hero-badge-font-size-mobile: 0.85rem;
  --hero-badge-font-weight: 600;
  --hero-badge-radius: 50px;
  --hero-badge-margin-bottom: 25px;
  --hero-badge-margin-bottom-tablet: 20px;
  --hero-badge-margin-bottom-mobile: 18px;

  /* Hero Title */
  --hero-title-font-size: 3.2rem;
  --hero-title-font-size-tablet: 2.5rem;
  --hero-title-font-size-mobile: 2rem;
  --hero-title-font-weight: 900;
  --hero-title-line-height: 1.2;
  --hero-title-margin-bottom: 20px;
  --hero-title-margin-bottom-tablet: 18px;
  --hero-title-margin-bottom-mobile: 15px;

  /* Hero Subtitle/Description */
  --hero-subtitle-font-size: 1.2rem;
  --hero-subtitle-font-size-tablet: 1.1rem;
  --hero-subtitle-font-size-mobile: 1rem;
  --hero-subtitle-line-height: 1.6;
  --hero-subtitle-max-width: 600px;
  --hero-subtitle-font-weight: 400;

  /* ═════════════════════════════════════════════════════════════
   * 22. SPECIAL PURPOSE TOKENS
   * ═════════════════════════════════════════════════════════════ */

  /* RGB Values for opacity variations */
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;

  /* SVG Pattern URLs */
  --activities-hero-pattern-url: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="magazine-pattern" width="50" height="50" patternUnits="userSpaceOnUse"><g opacity="0.03"><path d="M10 10h30v30H10z" fill="none" stroke="%23007bff" stroke-width="0.5"/><circle cx="25" cy="25" r="3" fill="%23007bff"/><path d="M15 20h20M15 25h15M15 30h25" stroke="%23007bff" stroke-width="0.3"/><path d="M35 15l5 5-5 5" fill="none" stroke="%23007bff" stroke-width="0.4"/></g></pattern></defs><rect width="100" height="100" fill="url(%23magazine-pattern)"/></svg>');

  --library-pattern-url: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="library-pattern" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1" fill="%23e9ecef"/></pattern></defs><rect width="100" height="100" fill="url(%23library-pattern)"/></svg>');

  /* ═════════════════════════════════════════════════════════════
   * 22. DYNAMIC COLOR SLOTS (for API-driven colors)
   * ═════════════════════════════════════════════════════════════ */

  /* هذه الفتحات مخصصة للألوان التي تأتي من API */
  /* لا تُعرَّف هنا، بل تُطبق من JS عبر setProperty */

  /* Examples:
   * --dynamic-bg
   * --dynamic-color
   * --dynamic-border
   * --dynamic-accent
   * --dynamic-icon-bg
   */
}

/* ═════════════════════════════════════════════════════════════
 * 23. THEME OVERRIDES - body.theme-* selectors
 * ═════════════════════════════════════════════════════════════
 * المصدر الرسمي الوحيد لتعريفات الثيمات
 * JavaScript يضيف class على body لتفعيل الثيم
 */

/* Blue Theme (الثيم الافتراضي - الثلج/الجليد) */
body.theme-blue {
  --primary-color: #2563eb;
  --primary-color-rgb: 37, 99, 235;
  --primary-light: #3b82f6;
  --primary-dark: #1e40af;
  --secondary-color: #06b6d4;
  --secondary-color-rgb: 6, 182, 212;
  --secondary-light: #22d3ee;
  --secondary-dark: #0891b2;
  --primary-grad: var(--primary-color);
  --secondary-grad: var(--secondary-color);
  --bg-color: #f0f4f8;
  --light-bg: #f0f4f8;
  --surface-0: #ffffff;
  --surface-1: rgba(255, 255, 255, 0.85);
  --surface-2: rgba(255, 255, 255, 0.95);
  --surface-3: #f0f4f8;
  --nav-bg: rgba(255, 255, 255, 0.85);
  --sidebar-bg: rgba(255, 255, 255, 0.95);
  --text-main: #1e293b;
  --text-primary: #1e293b;
  --text-light: #64748b;
  --text-secondary: #64748b;
  --accent-shadow: rgba(37, 99, 235, 0.2);
  --shadow: 0 4px 15px var(--accent-shadow);
  --border-color: rgba(37, 99, 235, 0.2);
  --border-color-light: rgba(37, 99, 235, 0.1);
}

/* Nature Theme (ثيم الطبيعة - أخضر) */
body.theme-nature {
  --primary-color: #16a34a;
  --primary-color-rgb: 22, 163, 74;
  --primary-light: #22c55e;
  --primary-dark: #15803d;
  --secondary-color: #84cc16;
  --secondary-color-rgb: 132, 204, 22;
  --secondary-light: #a3e635;
  --secondary-dark: #65a30d;
  --primary-grad: var(--primary-color);
  --secondary-grad: var(--secondary-color);
  --bg-color: #f0fdf4;
  --light-bg: #f0fdf4;
  --surface-0: #ffffff;
  --surface-1: rgba(255, 255, 255, 0.85);
  --surface-2: rgba(255, 255, 255, 0.95);
  --surface-3: #f0fdf4;
  --nav-bg: rgba(255, 255, 255, 0.85);
  --sidebar-bg: rgba(255, 255, 255, 0.95);
  --text-main: #1e293b;
  --text-primary: #1e293b;
  --text-light: #64748b;
  --text-secondary: #64748b;
  --accent-shadow: rgba(22, 163, 74, 0.2);
  --shadow: 0 4px 15px var(--accent-shadow);
  --border-color: rgba(22, 163, 74, 0.2);
  --border-color-light: rgba(22, 163, 74, 0.1);
}

/* Night Theme (ثيم الليل - الوضع الداكن) */
body.theme-night {
  --primary-color: #7c3aed;
  --primary-color-rgb: 124, 58, 237;
  --primary-light: #8b5cf6;
  --primary-dark: #6d28d9;
  --secondary-color: #c026d3;
  --secondary-color-rgb: 192, 38, 211;
  --secondary-light: #d946ef;
  --secondary-dark: #a21caf;
  --primary-grad: var(--primary-color);
  --secondary-grad: var(--secondary-color);
  --bg-color: #1e1b4b;
  --light-bg: #1e1b4b;
  --dark-bg: #1e1b4b;
  --surface-0: #312e81;
  --surface-1: rgba(30, 27, 75, 0.9);
  --surface-2: rgba(30, 27, 75, 0.98);
  --surface-3: #2e2a66;
  --nav-bg: rgba(30, 27, 75, 0.9);
  --sidebar-bg: rgba(30, 27, 75, 0.98);
  --text-main: #e2e8f0;
  --text-primary: #e2e8f0;
  --text-color: #e2e8f0;
  --text-light: #94a3b8;
  --text-secondary: #94a3b8;
  --text-strong: #ffffff;
  --text-muted: #94a3b8;
  --text-subtle: #94a3b8;
  --accent-shadow: rgba(124, 58, 237, 0.4);
  --shadow: 0 4px 15px var(--accent-shadow);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
  --border-color: rgba(226, 232, 240, 0.2);
  --border-color-light: rgba(226, 232, 240, 0.1);
  --overlay-bg: rgba(0, 0, 0, 0.7);
  --overlay-light: rgba(0, 0, 0, 0.5);
  --overlay-dark: rgba(0, 0, 0, 0.9);

  /* Inverted Neutrals for Dark Mode to prevent 'fake dark' issues */
  --neutral-50: #0f172a;
  --neutral-100: #1e293b;
  --neutral-200: #334155;
  --neutral-300: #475569;
  --neutral-400: #64748b;
  --neutral-500: #94a3b8;
  --neutral-600: #cbd5e0;
  --neutral-700: #e2e8f0;
  --neutral-800: #f8f9fa;
  --neutral-900: #f9fafb;
}

/* Sunset Theme (ثيم الغروب - برتقالي) */
body.theme-sunset {
  --primary-color: #ea580c;
  --primary-color-rgb: 234, 88, 12;
  --primary-light: #f97316;
  --primary-dark: #c2410c;
  --secondary-color: #f59e0b;
  --secondary-color-rgb: 245, 158, 11;
  --secondary-light: #fbbf24;
  --secondary-dark: #d97706;
  --primary-grad: var(--primary-color);
  --secondary-grad: var(--secondary-color);
  --bg-color: #fff7ed;
  --light-bg: #fff7ed;
  --surface-0: #ffffff;
  --surface-1: rgba(255, 255, 255, 0.85);
  --surface-2: rgba(255, 255, 255, 0.95);
  --surface-3: #fff7ed;
  --nav-bg: rgba(255, 255, 255, 0.85);
  --sidebar-bg: rgba(255, 255, 255, 0.95);
  --text-main: #1e293b;
  --text-primary: #1e293b;
  --text-light: #64748b;
  --text-secondary: #64748b;
  --accent-shadow: rgba(234, 88, 12, 0.2);
  --shadow: 0 4px 15px var(--accent-shadow);
  --border-color: rgba(234, 88, 12, 0.2);
  --border-color-light: rgba(234, 88, 12, 0.1);
}

/*
 * ═════════════════════════════════════════════════════════════
 * USAGE GUIDELINES
 * ═════════════════════════════════════════════════════════════
 * 
 * ✅ DO:
 * - Always use variables: color: var(--primary-color);
 * - Provide fallbacks: color: var(--custom-color, var(--primary-color));
 * - Override in theme files only
 * 
 * ❌ DON'T:
 * - NEVER use hex/rgb directly: color: #ff0000;
 * - NEVER use !important
 * - NEVER define :root in component files
 * - NEVER modify colors from JavaScript (use setProperty for dynamic slots)
 * 
 * 📝 For dynamic colors from API:
 * JS: element.style.setProperty('--dynamic-bg', apiColor);
 * CSS: background: var(--dynamic-bg, var(--surface-0));
 */