/* ==========================================================================
   Design Tokens — نظام إدارة درجات الطلاب (v3)
   الاتجاه: Minimalism & Swiss (لوحات البيانات)، أزرق للبيانات + كهرماني للتمييز،
   خط IBM Plex Sans Arabic، كثافة متوسطة-عالية، حركة خفيفة.
   المرجع: docs/DESIGN_SYSTEM.md (مستخرج عبر مهارة ui-ux-pro-max)
   كل الألوان النصية على الخلفية البيضاء تحقق تباين 4.5:1 على الأقل.
   ========================================================================== */

:root {
    /* ---- Brand ---- */
    --color-primary: #1e40af;          /* blue-800 */
    --color-primary-hover: #1e3a8a;    /* blue-900 */
    --color-primary-strong: #172554;
    --color-primary-soft: #eff6ff;     /* خلفيات العناصر النشطة */
    --color-primary-subtle: #dbeafe;
    --color-secondary: #3b82f6;
    --color-accent: #d97706;           /* كهرماني للتمييز (يُستخدم بنص داكن) */
    --color-accent-soft: #fffbeb;
    --color-on-primary: #ffffff;
    --color-on-accent: #000000;

    /* ---- Surfaces & text ---- */
    --color-background: #f6f8fb;
    --color-surface: #ffffff;
    --color-surface-muted: #f1f5f9;
    --color-foreground: #0f172a;       /* نص أساسي */
    --color-heading: #0b1f4d;          /* عناوين بلون أزرق داكن */
    --color-muted-foreground: #475569; /* 7.5:1 */
    --color-subtle-foreground: #64748b;/* 4.8:1 — للنصوص الثانوية الصغيرة */
    --color-border: #dce3ee;
    --color-border-strong: #c3cddc;
    --color-ring: #1e40af;

    /* ---- Sidebar (أزرق غامق مائل للأسود؛ كل النصوص ≥ 4.5:1 على الخلفية) ---- */
    --sidebar-bg: #0a1530;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-fg: #cbd5e1;
    --sidebar-fg-strong: #ffffff;
    --sidebar-muted: #8ea0bf;
    --sidebar-icon: #94a3b8;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-active-bg: rgba(59, 130, 246, 0.2);
    --sidebar-active-fg: #ffffff;
    --sidebar-indicator: #60a5fa;
    --sidebar-danger: #fca5a5;

    /* ---- Semantic (نص أبيض على الخلفية المصمتة ≥ 4.5:1) ---- */
    --color-success: #047857;  --color-success-soft: #ecfdf5;  --color-success-border: #a7f3d0;
    --color-warning: #b45309;  --color-warning-soft: #fffbeb;  --color-warning-border: #fde68a;
    --color-danger:  #dc2626;  --color-danger-soft:  #fef2f2;  --color-danger-border:  #fecaca;
    --color-info:    #0369a1;  --color-info-soft:    #f0f9ff;  --color-info-border:    #bae6fd;
    --color-excellent: #6d28d9; --color-excellent-soft: #f5f3ff;
    --color-neutral: #475569;

    /* ---- Typography ---- */
    --font-sans: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.375rem;   /* 22px */
    --text-2xl: 1.75rem;   /* 28px */
    --leading-tight: 1.3;
    --leading-normal: 1.6;

    /* ---- Spacing (مقياس 4px) ---- */
    --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;

    /* ---- Shape & depth ---- */
    --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
    --radius-full: 9999px;
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14);
    --focus-ring: 0 0 0 3px rgba(30, 64, 175, 0.35);

    /* ---- Motion (خفيفة؛ تُلغى مع prefers-reduced-motion) ---- */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --duration-fast: 150ms;
    --duration-normal: 220ms;
    --transition-fast: var(--duration-fast) var(--ease-out);
    --transition-normal: var(--duration-normal) var(--ease-out);
    --transition-slow: 320ms var(--ease-out);

    /* ---- Layering ---- */
    --z-sticky: 20; --z-navbar: 30; --z-overlay: 40; --z-sidebar: 50; --z-toast: 100;

    /* ---- Layout ---- */
    --sidebar-width: 272px;
    --navbar-height: 60px;
    --container-max-width: 1440px;
    --touch-target: 44px;

    /* ---- Aliases (أسماء v2 المستخدمة في القوالب والأنماط القديمة) ---- */
    --primary: var(--color-primary);
    --primary-hover: var(--color-primary-hover);
    --primary-dark: var(--color-primary-strong);
    --primary-light: var(--color-secondary);
    --primary-50: var(--color-primary-soft);
    --primary-100: var(--color-primary-subtle);
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-600: var(--color-primary);
    --primary-700: var(--color-primary-hover);
    --secondary: var(--color-neutral);
    --secondary-light: var(--color-subtle-foreground);
    --secondary-50: #f8fafc;
    --secondary-100: var(--color-surface-muted);
    --secondary-200: #e2e8f0;
    --secondary-300: #cbd5e1;
    --secondary-400: #94a3b8;
    --success: var(--color-success); --success-50: var(--color-success-soft); --success-light: #d1fae5; --success-dark: #065f46;
    --warning: var(--color-warning); --warning-50: var(--color-warning-soft); --warning-light: #fef3c7; --warning-dark: #92400e;
    --danger: var(--color-danger);   --danger-50: var(--color-danger-soft);   --danger-light: #fee2e2;  --danger-dark: #991b1b;
    --info: var(--color-info);       --info-50: var(--color-info-soft);       --info-light: #e0f2fe;    --info-dark: #075985;
    --bg-page: var(--color-background);
    --bg-card: var(--color-surface);
    --bg-subtle: var(--color-surface-muted);
    --text-primary: var(--color-foreground);
    --text-secondary: var(--color-muted-foreground);
    --text-muted: var(--color-subtle-foreground);
    --border-color: var(--color-border);
    --border-subtle: #edf1f7;

    /* ---- Bootstrap 5.3 bridge: أدوات Bootstrap تتبع نفس الرموز ---- */
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--color-foreground);
    --bs-body-bg: var(--color-background);
    --bs-border-color: var(--color-border);
    --bs-primary: #1e40af;   --bs-primary-rgb: 30, 64, 175;
    --bs-success: #047857;   --bs-success-rgb: 4, 120, 87;
    --bs-warning: #b45309;   --bs-warning-rgb: 180, 83, 9;
    --bs-danger: #dc2626;    --bs-danger-rgb: 220, 38, 38;
    --bs-info: #0369a1;      --bs-info-rgb: 3, 105, 161;
    --bs-secondary-color: var(--color-subtle-foreground);
    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: 30, 64, 175;
    --bs-link-hover-color: var(--color-primary-hover);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-focus-ring-color: rgba(30, 64, 175, 0.35);
}