/*
 * Academy Design System — CSS Variables
 * نظام التصميم المعتمد للأكاديمية
 * المراجع: PROJECT_DOCS/DESIGN_SYSTEM.md
 */

:root {
  /* ============================================ */
  /* PRIMARY COLORS                                */
  /* ============================================ */

  /* Academy Blue — اللون الأساسي (الثقة، السلطة، المحتوى) */
  --blue-50:  #e6eef7;
  --blue-100: #c2d4ea;
  --blue-200: #94b3da;
  --blue-300: #6692ca;
  --blue-400: #3871ba;
  --blue-500: #0754a2;
  --blue-600: #064a92;
  --blue-700: #054079;
  --blue-800: #043660;
  --blue-900: #032b47;

  /* Growth Green — اللون الثانوي (النمو، التقدم، النجاح) */
  --green-50:  #f0f8e3;
  --green-100: #d8eeb8;
  --green-200: #c0e48d;
  --green-300: #a8da62;
  --green-400: #8dc73d;
  --green-500: #7eb234;
  --green-600: #6e9d2c;
  --green-700: #5e8724;
  --green-800: #4e711c;
  --green-900: #3e5b14;

  /* Aliases */
  --primary:   var(--blue-500);
  --primary-h: var(--blue-600);
  --primary-d: var(--blue-700);
  --primary-l: var(--blue-50);
  --secondary:   var(--green-400);
  --secondary-h: var(--green-500);
  --secondary-d: var(--green-600);
  --secondary-l: var(--green-50);

  /* ============================================ */
  /* SUPPORTING COLORS                             */
  /* ============================================ */

  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --coral-400: #fb7185;
  --coral-500: #f43f5e;
  --purple-500: #7c3aed;

  /* ============================================ */
  /* SEMANTIC COLORS                               */
  /* ============================================ */

  --success: #22c55e;
  --info:    #0ea5e9;
  --warning: #f59e0b;
  --danger:  #ef4444;

  /* ============================================ */
  /* NEUTRALS                                      */
  /* ============================================ */

  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* ============================================ */
  /* BACKGROUNDS                                   */
  /* ============================================ */

  --bg-page:     #f7f9fc;
  --bg-card:     #ffffff;
  --bg-elevated: #ffffff;
  --bg-soft:     #f0f4fa;

  /* ============================================ */
  /* TEXT                                          */
  /* ============================================ */

  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-500);
  --text-inverse:   #ffffff;
  --text-link:      var(--blue-500);
  --text-link-h:    var(--blue-700);

  /* ============================================ */
  /* BORDERS                                       */
  /* ============================================ */

  --border:       var(--gray-200);
  --border-dark:  var(--gray-300);
  --border-focus: var(--blue-500);

  /* ============================================ */
  /* TYPOGRAPHY                                    */
  /* ============================================ */

  --font-ar: 'Tajawal', 'Cairo', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-en: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extra:    800;

  --leading-tight:  1.4;
  --leading-normal: 1.7;
  --leading-loose:  1.9;

  /* ============================================ */
  /* SPACING (4px base)                            */
  /* ============================================ */

  --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-16: 4rem;
  --space-20: 5rem;

  /* ============================================ */
  /* RADIUS                                        */
  /* ============================================ */

  --radius-sm:   0.25rem;
  --radius:      0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* ============================================ */
  /* SHADOWS (ظلال زرقاء ناعمة)                    */
  /* ============================================ */

  --shadow-xs: 0 1px 2px rgba(7, 84, 162, 0.04);
  --shadow-sm: 0 2px 4px rgba(7, 84, 162, 0.06);
  --shadow:    0 4px 12px rgba(7, 84, 162, 0.08);
  --shadow-md: 0 8px 24px rgba(7, 84, 162, 0.10);
  --shadow-lg: 0 16px 40px rgba(7, 84, 162, 0.12);
  --shadow-xl: 0 24px 60px rgba(7, 84, 162, 0.15);
  --shadow-green: 0 8px 24px rgba(141, 199, 61, 0.30);

  /* ============================================ */
  /* MOTION                                        */
  /* ============================================ */

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

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ============================================ */
  /* LAYOUT                                        */
  /* ============================================ */

  --container-sm:   720px;
  --container-md:   960px;
  --container-lg:   1200px;
  --container-xl:   1320px;
  --header-height:  72px;
  --sidebar-width:  260px;
}