/* =============================================================
   نظام المتغيرات الأساسية - One Teacher Platform
   5 قوالب لونية ديناميكية
   ============================================================= */

/* ===== القالب الافتراضي: Ocean Night ===== */
:root {
    /* === الألوان الأساسية === */
    --color-bg: #060d1a;
    --color-bg-2: #0a1628;
    --color-bg-3: #0d1e36;
    --color-surface: rgba(10, 22, 40, 0.85);
    --color-surface-2: rgba(16, 30, 55, 0.90);
    --color-primary: #00d4ff;
    --color-primary-rgb: 0, 212, 255;
    --color-primary-dark: #0098cc;
    --color-secondary: #0066ff;
    --color-secondary-rgb: 0, 102, 255;
    --color-accent: #7b42f6;
    --color-accent-2: #d946ef;
    --color-neon: #00ffcc;
    --color-gold: #ffd700;

    /* === ألوان النصوص === */
    --color-text: #e8f4ff;
    --color-text-muted: #7da8cc;
    --color-text-light: #ffffff;
    --color-text-dark: #0a1628;

    /* === حالات الواجهة === */
    --color-success: #10b981;
    --color-success-rgb: 16, 185, 129;
    --color-warning: #f59e0b;
    --color-warning-rgb: 245, 158, 11;
    --color-danger: #ef4444;
    --color-danger-rgb: 239, 68, 68;
    --color-info: #06b6d4;

    /* === الخطوط والظلال والحدود === */
    --border-color: rgba(0, 212, 255, 0.2);
    --border-color-hover: rgba(0, 212, 255, 0.5);
    --border-radius-sm: 8px;
    --border-radius: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 30px;
    --border-radius-full: 9999px;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(0, 212, 255, 0.3);
    --shadow-glow-lg: 0 0 40px rgba(0, 212, 255, 0.4);

    /* === التدرجات === */
    --gradient-primary: linear-gradient(135deg, #00d4ff 0%, #0066ff 100%);
    --gradient-accent: linear-gradient(135deg, #7b42f6 0%, #d946ef 100%);
    --gradient-gold: linear-gradient(135deg, #ffd700 0%, #ff8f00 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --gradient-bg: linear-gradient(160deg, #060d1a 0%, #0a1628 50%, #0d1e36 100%);
    --gradient-card: linear-gradient(135deg, rgba(10, 22, 40, 0.9) 0%, rgba(16, 30, 55, 0.85) 100%);
    --gradient-header: linear-gradient(135deg, rgba(6, 13, 26, 0.98) 0%, rgba(10, 22, 40, 0.98) 100%);

    /* === التحولات والحركة === */
    --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* === أبعاد الـ Layout === */
    --header-height: 65px;
    --sidebar-width: 260px;
    --sidebar-collapsed: 70px;
    --container-max: 1400px;

    /* === خطوط === */
    --font-arabic: 'Tajawal', 'Cairo', 'Segoe UI', Tahoma, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* === متغيرات Admin === */
    --admin-bg: #0f1520;
    --admin-sidebar-bg: #0a1020;
    --admin-card-bg: rgba(15, 21, 32, 0.9);
    --admin-header-bg: rgba(10, 16, 32, 0.98);

    /* اسم القالب الحالي */
    --theme-name: 'ocean-night';
}

/* ===== القالب 2: Royal Purple ===== */
[data-theme="royal-purple"] {
    --color-bg: #0d0618;
    --color-bg-2: #1a0a2e;
    --color-bg-3: #220d3d;
    --color-surface: rgba(26, 10, 46, 0.85);
    --color-surface-2: rgba(34, 13, 61, 0.90);
    --color-primary: #a78bfa;
    --color-primary-rgb: 167, 139, 250;
    --color-primary-dark: #7c5af0;
    --color-secondary: #d946ef;
    --color-secondary-rgb: 217, 70, 239;
    --color-accent: #f472b6;
    --color-accent-2: #fb7185;
    --color-neon: #e879f9;
    --color-gold: #fbbf24;

    --color-text: #f3e8ff;
    --color-text-muted: #c4a8e0;

    --border-color: rgba(167, 139, 250, 0.25);
    --border-color-hover: rgba(167, 139, 250, 0.55);

    --shadow-glow: 0 0 20px rgba(167, 139, 250, 0.3);
    --shadow-glow-lg: 0 0 40px rgba(167, 139, 250, 0.4);

    --gradient-primary: linear-gradient(135deg, #a78bfa 0%, #d946ef 100%);
    --gradient-accent: linear-gradient(135deg, #f472b6 0%, #fb7185 100%);
    --gradient-bg: linear-gradient(160deg, #0d0618 0%, #1a0a2e 50%, #220d3d 100%);
    --gradient-card: linear-gradient(135deg, rgba(26, 10, 46, 0.9) 0%, rgba(34, 13, 61, 0.85) 100%);
    --gradient-header: linear-gradient(135deg, rgba(13, 6, 24, 0.98) 0%, rgba(26, 10, 46, 0.98) 100%);

    --admin-bg: #100818;
    --admin-sidebar-bg: #0b0514;
    --admin-card-bg: rgba(22, 10, 40, 0.9);
    --admin-header-bg: rgba(13, 6, 24, 0.98);
    --theme-name: 'royal-purple';
}

/* ===== القالب 3: Emerald Forest ===== */
[data-theme="emerald-forest"] {
    --color-bg: #030f09;
    --color-bg-2: #071a0e;
    --color-bg-3: #0a2515;
    --color-surface: rgba(7, 26, 14, 0.85);
    --color-surface-2: rgba(10, 37, 21, 0.90);
    --color-primary: #10b981;
    --color-primary-rgb: 16, 185, 129;
    --color-primary-dark: #059669;
    --color-secondary: #34d399;
    --color-secondary-rgb: 52, 211, 153;
    --color-accent: #6ee7b7;
    --color-accent-2: #a7f3d0;
    --color-neon: #00ff9f;
    --color-gold: #fcd34d;

    --color-text: #ecfdf5;
    --color-text-muted: #6ee7b7;

    --border-color: rgba(16, 185, 129, 0.25);
    --border-color-hover: rgba(16, 185, 129, 0.55);

    --shadow-glow: 0 0 20px rgba(16, 185, 129, 0.3);
    --shadow-glow-lg: 0 0 40px rgba(16, 185, 129, 0.4);

    --gradient-primary: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-accent: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    --gradient-bg: linear-gradient(160deg, #030f09 0%, #071a0e 50%, #0a2515 100%);
    --gradient-card: linear-gradient(135deg, rgba(7, 26, 14, 0.9) 0%, rgba(10, 37, 21, 0.85) 100%);
    --gradient-header: linear-gradient(135deg, rgba(3, 15, 9, 0.98) 0%, rgba(7, 26, 14, 0.98) 100%);

    --admin-bg: #040f07;
    --admin-sidebar-bg: #020a04;
    --admin-card-bg: rgba(7, 22, 12, 0.9);
    --admin-header-bg: rgba(3, 10, 6, 0.98);
    --theme-name: 'emerald-forest';
}

/* ===== القالب 4: Sunset Gold ===== */
[data-theme="sunset-gold"] {
    --color-bg: #150900;
    --color-bg-2: #1f1000;
    --color-bg-3: #2a1600;
    --color-surface: rgba(31, 16, 0, 0.85);
    --color-surface-2: rgba(42, 22, 0, 0.90);
    --color-primary: #f59e0b;
    --color-primary-rgb: 245, 158, 11;
    --color-primary-dark: #d97706;
    --color-secondary: #ef4444;
    --color-secondary-rgb: 239, 68, 68;
    --color-accent: #fb923c;
    --color-accent-2: #fbbf24;
    --color-neon: #fde68a;
    --color-gold: #f59e0b;

    --color-text: #fffbeb;
    --color-text-muted: #fcd34d;

    --border-color: rgba(245, 158, 11, 0.25);
    --border-color-hover: rgba(245, 158, 11, 0.55);

    --shadow-glow: 0 0 20px rgba(245, 158, 11, 0.3);
    --shadow-glow-lg: 0 0 40px rgba(245, 158, 11, 0.4);

    --gradient-primary: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    --gradient-accent: linear-gradient(135deg, #fb923c 0%, #f59e0b 100%);
    --gradient-bg: linear-gradient(160deg, #150900 0%, #1f1000 50%, #2a1600 100%);
    --gradient-card: linear-gradient(135deg, rgba(31, 16, 0, 0.9) 0%, rgba(42, 22, 0, 0.85) 100%);
    --gradient-header: linear-gradient(135deg, rgba(21, 9, 0, 0.98) 0%, rgba(31, 16, 0, 0.98) 100%);

    --admin-bg: #130800;
    --admin-sidebar-bg: #0e0600;
    --admin-card-bg: rgba(28, 14, 0, 0.9);
    --admin-header-bg: rgba(15, 8, 0, 0.98);
    --theme-name: 'sunset-gold';
}

/* ===== القالب 5: Arctic Light ===== */
[data-theme="arctic-light"] {
    --color-bg: #f0f5ff;
    --color-bg-2: #e8eeff;
    --color-bg-3: #dce6ff;
    --color-surface: rgba(255, 255, 255, 0.92);
    --color-surface-2: rgba(248, 250, 255, 0.96);
    --color-primary: #3b82f6;
    --color-primary-rgb: 59, 130, 246;
    --color-primary-dark: #2563eb;
    --color-secondary: #6366f1;
    --color-secondary-rgb: 99, 102, 241;
    --color-accent: #8b5cf6;
    --color-accent-2: #06b6d4;
    --color-neon: #3b82f6;
    --color-gold: #f59e0b;

    --color-text: #1e293b;
    --color-text-muted: #64748b;
    --color-text-light: #ffffff;

    --border-color: rgba(59, 130, 246, 0.2);
    --border-color-hover: rgba(59, 130, 246, 0.45);

    --shadow-sm: 0 2px 8px rgba(59, 130, 246, 0.08);
    --shadow: 0 4px 20px rgba(59, 130, 246, 0.12);
    --shadow-lg: 0 8px 40px rgba(59, 130, 246, 0.16);
    --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.2);
    --shadow-glow-lg: 0 0 40px rgba(59, 130, 246, 0.25);

    --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    --gradient-accent: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
    --gradient-bg: linear-gradient(160deg, #f0f5ff 0%, #e8eeff 50%, #dce6ff 100%);
    --gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 255, 0.9) 100%);
    --gradient-header: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 245, 255, 0.98) 100%);

    --admin-bg: #edf2ff;
    --admin-sidebar-bg: #e4ebff;
    --admin-card-bg: rgba(255, 255, 255, 0.95);
    --admin-header-bg: rgba(255, 255, 255, 0.98);
    --theme-name: 'arctic-light';
}

/* ===== القالب 6: Classic Dark ===== */
[data-theme="classic-dark"] {
    --color-bg: #111111;
    --color-bg-2: #1a1a1a;
    --color-bg-3: #222222;
    --color-surface: rgba(26, 26, 26, 0.95);
    --color-surface-2: rgba(34, 34, 34, 0.98);
    --color-primary: #e2e2e2;
    --color-primary-rgb: 226, 226, 226;
    --color-primary-dark: #bfbfbf;
    --color-secondary: #999999;
    --color-secondary-rgb: 153, 153, 153;
    --color-accent: #cccccc;
    --color-accent-2: #888888;
    --color-neon: #e2e2e2;
    --color-gold: #d4af37;
    --color-text: #e8e8e8;
    --color-text-muted: #888888;
    --color-text-light: #ffffff;
    --color-text-dark: #111111;
    --border-color: rgba(255, 255, 255, 0.12);
    --border-color-hover: rgba(255, 255, 255, 0.3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 20px rgba(226, 226, 226, 0.1);
    --shadow-glow-lg: 0 0 40px rgba(226, 226, 226, 0.15);
    --gradient-primary: linear-gradient(135deg, #333333 0%, #555555 100%);
    --gradient-accent: linear-gradient(135deg, #444444 0%, #666666 100%);
    --gradient-bg: linear-gradient(160deg, #0a0a0a 0%, #111111 50%, #1a1a1a 100%);
    --gradient-card: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(34, 34, 34, 0.9) 100%);
    --gradient-header: linear-gradient(135deg, rgba(10, 10, 10, 0.98) 0%, rgba(20, 20, 20, 0.98) 100%);
    --admin-bg: #0d0d0d;
    --admin-sidebar-bg: #0a0a0a;
    --admin-card-bg: rgba(22, 22, 22, 0.95);
    --admin-header-bg: rgba(10, 10, 10, 0.98);
    --theme-name: 'classic-dark';
}

/* ===== القالب 7: Navy Blue ===== */
[data-theme="navy-blue"] {
    --color-bg: #0a0f2e;
    --color-bg-2: #0d1340;
    --color-bg-3: #111852;
    --color-surface: rgba(13, 19, 64, 0.90);
    --color-surface-2: rgba(17, 24, 82, 0.95);
    --color-primary: #4f8ef7;
    --color-primary-rgb: 79, 142, 247;
    --color-primary-dark: #3070d4;
    --color-secondary: #2563eb;
    --color-secondary-rgb: 37, 99, 235;
    --color-accent: #60a5fa;
    --color-accent-2: #93c5fd;
    --color-neon: #bfdbfe;
    --color-gold: #fbbf24;
    --color-text: #dbeafe;
    --color-text-muted: #93c5fd;
    --color-text-light: #ffffff;
    --color-text-dark: #1e3a8a;
    --border-color: rgba(79, 142, 247, 0.25);
    --border-color-hover: rgba(79, 142, 247, 0.55);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 20px rgba(79, 142, 247, 0.25);
    --shadow-glow-lg: 0 0 40px rgba(79, 142, 247, 0.35);
    --gradient-primary: linear-gradient(135deg, #4f8ef7 0%, #2563eb 100%);
    --gradient-accent: linear-gradient(135deg, #60a5fa 0%, #4f8ef7 100%);
    --gradient-bg: linear-gradient(160deg, #060917 0%, #0a0f2e 50%, #0d1340 100%);
    --gradient-card: linear-gradient(135deg, rgba(13, 19, 64, 0.92) 0%, rgba(17, 24, 82, 0.88) 100%);
    --gradient-header: linear-gradient(135deg, rgba(6, 9, 23, 0.98) 0%, rgba(10, 15, 46, 0.98) 100%);
    --admin-bg: #070b20;
    --admin-sidebar-bg: #050817;
    --admin-card-bg: rgba(13, 19, 60, 0.92);
    --admin-header-bg: rgba(5, 8, 23, 0.98);
    --theme-name: 'navy-blue';
}

/* ===== القالب 8: Forest Green ===== */
[data-theme="forest-green"] {
    --color-bg: #f0fdf4;
    --color-bg-2: #dcfce7;
    --color-bg-3: #bbf7d0;
    --color-surface: rgba(255, 255, 255, 0.92);
    --color-surface-2: rgba(240, 253, 244, 0.96);
    --color-primary: #16a34a;
    --color-primary-rgb: 22, 163, 74;
    --color-primary-dark: #15803d;
    --color-secondary: #166534;
    --color-secondary-rgb: 22, 101, 52;
    --color-accent: #22c55e;
    --color-accent-2: #4ade80;
    --color-neon: #16a34a;
    --color-gold: #ca8a04;
    --color-text: #14532d;
    --color-text-muted: #166534;
    --color-text-light: #ffffff;
    --color-text-dark: #052e16;
    --border-color: rgba(22, 163, 74, 0.2);
    --border-color-hover: rgba(22, 163, 74, 0.45);
    --shadow-sm: 0 2px 8px rgba(22, 163, 74, 0.08);
    --shadow: 0 4px 20px rgba(22, 163, 74, 0.12);
    --shadow-lg: 0 8px 40px rgba(22, 163, 74, 0.18);
    --shadow-glow: 0 0 20px rgba(22, 163, 74, 0.2);
    --shadow-glow-lg: 0 0 40px rgba(22, 163, 74, 0.28);
    --gradient-primary: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    --gradient-accent: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    --gradient-bg: linear-gradient(160deg, #f0fdf4 0%, #dcfce7 50%, #bbf7d0 100%);
    --gradient-card: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 253, 244, 0.9) 100%);
    --gradient-header: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 253, 244, 0.98) 100%);
    --admin-bg: #ecfdf5;
    --admin-sidebar-bg: #d1fae5;
    --admin-card-bg: rgba(255, 255, 255, 0.95);
    --admin-header-bg: rgba(255, 255, 255, 0.98);
    --theme-name: 'forest-green';
}

/* ===== القالب 9: Rose Gold ===== */
[data-theme="rose-gold"] {
    --color-bg: #1a0a0e;
    --color-bg-2: #250f14;
    --color-bg-3: #30141a;
    --color-surface: rgba(37, 15, 20, 0.90);
    --color-surface-2: rgba(48, 20, 26, 0.95);
    --color-primary: #f9a8c0;
    --color-primary-rgb: 249, 168, 192;
    --color-primary-dark: #f472a0;
    --color-secondary: #e879a0;
    --color-secondary-rgb: 232, 121, 160;
    --color-accent: #daa0b8;
    --color-accent-2: #f4c1ce;
    --color-neon: #fecdd3;
    --color-gold: #c9a348;
    --color-text: #fce7f3;
    --color-text-muted: #f9a8c0;
    --color-text-light: #ffffff;
    --color-text-dark: #1a0a0e;
    --border-color: rgba(249, 168, 192, 0.22);
    --border-color-hover: rgba(249, 168, 192, 0.5);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 20px rgba(249, 168, 192, 0.2);
    --shadow-glow-lg: 0 0 40px rgba(249, 168, 192, 0.3);
    --gradient-primary: linear-gradient(135deg, #f9a8c0 0%, #e879a0 100%);
    --gradient-accent: linear-gradient(135deg, #f4c1ce 0%, #f9a8c0 100%);
    --gradient-bg: linear-gradient(160deg, #0f0508 0%, #1a0a0e 50%, #250f14 100%);
    --gradient-card: linear-gradient(135deg, rgba(37, 15, 20, 0.92) 0%, rgba(48, 20, 26, 0.88) 100%);
    --gradient-header: linear-gradient(135deg, rgba(15, 5, 8, 0.98) 0%, rgba(26, 10, 14, 0.98) 100%);
    --admin-bg: #120609;
    --admin-sidebar-bg: #0e0407;
    --admin-card-bg: rgba(37, 15, 20, 0.92);
    --admin-header-bg: rgba(14, 4, 7, 0.98);
    --theme-name: 'rose-gold';
}

/* ===== القالب 10: Midnight Red ===== */
[data-theme="midnight-red"] {
    --color-bg: #0f0505;
    --color-bg-2: #1a0808;
    --color-bg-3: #220b0b;
    --color-surface: rgba(26, 8, 8, 0.90);
    --color-surface-2: rgba(34, 11, 11, 0.95);
    --color-primary: #f87171;
    --color-primary-rgb: 248, 113, 113;
    --color-primary-dark: #ef4444;
    --color-secondary: #dc2626;
    --color-secondary-rgb: 220, 38, 38;
    --color-accent: #fca5a5;
    --color-accent-2: #fecaca;
    --color-neon: #ff6b6b;
    --color-gold: #f59e0b;
    --color-text: #fee2e2;
    --color-text-muted: #fca5a5;
    --color-text-light: #ffffff;
    --color-text-dark: #0f0505;
    --border-color: rgba(248, 113, 113, 0.22);
    --border-color-hover: rgba(248, 113, 113, 0.5);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 20px rgba(248, 113, 113, 0.2);
    --shadow-glow-lg: 0 0 40px rgba(248, 113, 113, 0.3);
    --gradient-primary: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    --gradient-accent: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);
    --gradient-bg: linear-gradient(160deg, #070202 0%, #0f0505 50%, #1a0808 100%);
    --gradient-card: linear-gradient(135deg, rgba(26, 8, 8, 0.92) 0%, rgba(34, 11, 11, 0.88) 100%);
    --gradient-header: linear-gradient(135deg, rgba(7, 2, 2, 0.98) 0%, rgba(15, 5, 5, 0.98) 100%);
    --admin-bg: #080202;
    --admin-sidebar-bg: #060101;
    --admin-card-bg: rgba(26, 8, 8, 0.92);
    --admin-header-bg: rgba(6, 1, 1, 0.98);
    --theme-name: 'midnight-red';
}

/* ===== Legacy Student Variables Mapping ===== */
/* This maps the old hardcoded variables in the student interface to the modern, dynamic theme variables */
:root {
    --primary: var(--color-primary);
    --primary-dark: var(--color-primary-dark);
    --secondary: var(--color-secondary);
    --accent: var(--color-accent);
    --neon: var(--color-neon);
    --gold: var(--color-gold);

    --text-dark: var(--color-text-dark);
    --text-light: var(--color-text);
    --text-muted: var(--color-text-muted);

    --bg-light: var(--color-bg);
    --bg-dark: var(--color-bg-2);

    --card-light: var(--color-surface);
    --card-dark: var(--color-surface-2);

    --border-light: var(--border-color);
    --border-dark: var(--border-color-hover);

    --shadow: var(--shadow-sm);
    --shadow-dark: var(--shadow-lg);
}