/* ============================================
   UTD Software Solutions - Design Tokens (Single Source of Truth)
   كل الألوان والمتغيرات في مكان واحد
   ============================================ */

:root {
    /* ── UTD Brand Colors (Navy Blue Official) ── */
    --utd-navy:           #0f0c60;
    --utd-navy-dark:      #0a0b4d;
    --utd-navy-light:     #1a1a80;
    --utd-navy-secondary: #2a2a90;
    --utd-navy-accent:    #3a3aa0;
    --utd-navy-rgb:       15, 12, 96;

    /* ── Legacy Brand Colors (Keep for backward compatibility) ── */
    --primary:        #0f0c60;
    --primary-dark:   #0a0b4d;
    --primary-darker: #0a0b4d;
    --primary-light:  #e8e8f8;   /* فاتح جداً - للخلفيات والـ badges */
    --primary-50:     #2a2a90;
    --primary-rgb:    15, 12, 96;

    /* ── Semantic Colors ── */
    --success:        #10b981;
    --success-dark:   #059669;
    --success-light:  #d1fae5;
    --success-rgb:    16, 185, 129;

    --danger:         #ef4444;
    --danger-dark:    #dc2626;
    --danger-light:   #fee2e2;
    --danger-rgb:     239, 68, 68;

    --warning:        #f59e0b;
    --warning-dark:   #d97706;
    --warning-light:  #fef3c7;
    --warning-rgb:    245, 158, 11;

    --info:           #3b82f6;
    --info-dark:      #2563eb;
    --info-light:     #dbeafe;
    --info-rgb:       59, 130, 246;

    /* ── Neutral Colors ── */
    --dark:           #0f172a;
    --dark-2:         #1e293b;
    --dark-3:         #334155;
    --secondary:      #64748b;
    --gray:           #94a3b8;
    --gray-light:     #f1f5f9;
    --light:          #f8fafc;
    --border:         #e2e8f0;
    --border-light:   #f1f5f9;
    --white:          #ffffff;

    /* ── Gradients ── */
    --gradient-primary:  linear-gradient(135deg, #0f0c60, #1a1a80);
    --gradient-brand:    linear-gradient(135deg, #0a0b4d, #0f0c60, #1a1a80);
    --gradient-utd:      linear-gradient(135deg, #0f0c60, #1a1a80, #2a2a90);
    --gradient-success:  linear-gradient(135deg, #059669, #10b981);
    --gradient-danger:   linear-gradient(135deg, #dc2626, #ef4444);
    --gradient-dark:     linear-gradient(135deg, #0f172a, #1e293b);
    --gradient-hero:     linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f0c60 100%);

    /* ── Typography ── */
    --font-ar:        'Cairo', sans-serif;
    --font-en:        'Inter', 'Cairo', sans-serif;
    --font-mono:      'Courier New', 'Consolas', monospace;

    --text-xs:    11px;
    --text-sm:    13px;
    --text-base:  14px;
    --text-md:    15px;
    --text-lg:    16px;
    --text-xl:    18px;
    --text-2xl:   20px;
    --text-3xl:   24px;
    --text-4xl:   32px;

    --weight-normal:  400;
    --weight-medium:  500;
    --weight-semi:    600;
    --weight-bold:    700;
    --weight-black:   800;

    /* ── Spacing ── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;

    /* ── Border Radius ── */
    --radius-sm:  4px;
    --radius:     8px;
    --radius-md:  10px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
    --shadow:     0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-md:  0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-lg:  0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --shadow-xl:  0 25px 50px -12px rgba(0,0,0,0.25);
    --shadow-primary: 0 8px 24px rgba(15,12,96,0.3);
    --shadow-utd:     0 8px 24px rgba(15,12,96,0.4);
    --shadow-success: 0 8px 24px rgba(16,185,129,0.3);
    --shadow-danger:  0 8px 24px rgba(239,68,68,0.3);

    /* ── Layout ── */
    --sidebar-width:     260px;
    --topbar-height:     60px;
    --content-max-width: 1400px;

    /* ── Transitions ── */
    --transition-fast:   all 0.15s ease;
    --transition:        all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-index ── */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;
    --z-loading:   999;
}

/* ============================================
   UTD Global Background (Starfield + Cyber Grid)
   الخلفية الفضائية العالمية للموقع بالكامل
   ============================================ */

/* Animated Starfield - كثافة عالية */
.utd-starfield {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(2px 2px at 20% 30%, white, transparent),
        radial-gradient(2px 2px at 60% 70%, white, transparent),
        radial-gradient(1px 1px at 50% 50%, white, transparent),
        radial-gradient(1px 1px at 80% 10%, white, transparent),
        radial-gradient(2px 2px at 90% 60%, white, transparent),
        radial-gradient(1px 1px at 33% 80%, white, transparent),
        radial-gradient(1px 1px at 15% 90%, white, transparent),
        radial-gradient(2px 2px at 75% 25%, white, transparent),
        radial-gradient(1px 1px at 45% 65%, white, transparent),
        radial-gradient(2px 2px at 10% 40%, white, transparent),
        radial-gradient(1px 1px at 95% 85%, white, transparent),
        radial-gradient(1px 1px at 25% 15%, white, transparent),
        radial-gradient(2px 2px at 65% 45%, white, transparent),
        radial-gradient(1px 1px at 40% 95%, white, transparent),
        radial-gradient(1px 1px at 85% 35%, white, transparent),
        radial-gradient(2px 2px at 55% 75%, white, transparent),
        radial-gradient(1px 1px at 30% 55%, white, transparent),
        radial-gradient(1px 1px at 70% 20%, white, transparent),
        radial-gradient(2px 2px at 12% 68%, white, transparent),
        radial-gradient(1px 1px at 88% 52%, white, transparent);
    background-size: 200% 200%;
    background-color: #0a1929;
    animation: utdStars 60s linear infinite;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

@keyframes utdStars {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* Neon Cyber Grid */
.utd-cyber-grid {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(15, 12, 96, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 12, 96, 0.2) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: utdGridFlow 20s linear infinite;
    transform-origin: center;
    pointer-events: none;
    z-index: 0;
}

@keyframes utdGridFlow {
    0% { transform: perspective(500px) rotateX(60deg) translateY(0); }
    100% { transform: perspective(500px) rotateX(60deg) translateY(50px); }
}