/* Multi-Theme Design System for EduSaaS */

/* 1. Royal Dark (Default) */
:root, .theme-royal {
    --dark-bg: radial-gradient(circle at top right, #1e293b, #0f172a);
    --sidebar-bg: #0f172a;
    --glass-card: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --accent-color: #6c5ce7;
    --accent-rgb: 108, 92, 231;
    --accent-glow: 0 0 20px rgba(72, 52, 212, 0.3);
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --btn-primary: #4834d4;
}

/* 2. Emerald Night (Green) */
.theme-emerald {
    --dark-bg: radial-gradient(circle at top right, #064e3b, #022c22);
    --sidebar-bg: #022c22;
    --glass-card: rgba(6, 78, 59, 0.7);
    --glass-border: rgba(52, 211, 153, 0.1);
    --accent-color: #10b981;
    --accent-rgb: 16, 185, 129;
    --accent-glow: 0 0 20px rgba(16, 185, 129, 0.3);
    --text-main: #ecfdf5;
    --text-muted: #6ee7b7;
    --btn-primary: #059669;
}

/* 3. Midnight Blue (Deep Blue) */
.theme-midnight {
    --dark-bg: radial-gradient(circle at top right, #1e3a8a, #1e1b4b);
    --sidebar-bg: #1e1b4b;
    --glass-card: rgba(30, 58, 138, 0.7);
    --glass-border: rgba(96, 165, 250, 0.1);
    --accent-color: #3b82f6;
    --accent-rgb: 59, 130, 246;
    --accent-glow: 0 0 20px rgba(59, 130, 246, 0.3);
    --text-main: #eff6ff;
    --text-muted: #93c5fd;
    --btn-primary: #2563eb;
}

/* 4. Luxury Gold/Dark (Maroon) */
.theme-luxury {
    --dark-bg: radial-gradient(circle at top right, #450a0a, #180505);
    --sidebar-bg: #180505;
    --glass-card: rgba(127, 29, 29, 0.7);
    --glass-border: rgba(251, 191, 36, 0.1);
    --accent-color: #f59e0b;
    --accent-rgb: 245, 158, 11;
    --accent-glow: 0 0 20px rgba(245, 158, 11, 0.3);
    --text-main: #fffbeb;
    --text-muted: #fcd34d;
    --btn-primary: #b45309;
}

/* 5. Cyberpunk (Magenta/Purple) */
.theme-cyberpunk {
    --dark-bg: radial-gradient(circle at top right, #4c1d95, #2e1065);
    --sidebar-bg: #2e1065;
    --glass-card: rgba(91, 33, 182, 0.7);
    --glass-border: rgba(232, 121, 249, 0.1);
    --accent-color: #d946ef;
    --accent-rgb: 217, 70, 239;
    --accent-glow: 0 0 20px rgba(217, 70, 239, 0.3);
    --text-main: #fdf4ff;
    --text-muted: #f5d0fe;
    --btn-primary: #c026d3;
}

/* ================================================================
   أسطح البطاقات الموحّدة — تُشتق من ألوان السمة الحالية تلقائياً
   (تعمل مع كل السمات دون تعريف لكل سمة على حدة)
   - البطاقة: عمق السمة (sidebar-bg) ممزوجاً بلمسة من لونها المميز + لمعة علوية خفيفة
   - البطاقة الداخلية: طبقة أفتح قليلاً فوق البطاقة لإبراز التدرج
   ================================================================ */
body, body[class] {
    --card-tint: color-mix(in srgb, var(--sidebar-bg) 64%, #070b14);
    --card-solid: color-mix(in srgb, var(--card-tint) 90%, transparent);
    --glass-bg:
        radial-gradient(130% 100% at 100% 0%, rgba(var(--accent-rgb), .20) 0%, rgba(var(--accent-rgb), .05) 38%, rgba(var(--accent-rgb), 0) 65%),
        linear-gradient(180deg, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, 0) 60%),
        var(--card-solid);
    --glass-border: rgba(var(--accent-rgb), .20);
    --card-inner: linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .02) 100%);
    --card-inner-hover: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .03) 100%);
    --card-shadow: 0 20px 44px -24px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .08);
    /* ترويسات الصفحات والشريط العلوي: نفس سطح البطاقة بتوهّج أوضح يميّزها */
    --header-bg:
        radial-gradient(80% 160% at 100% 0%, rgba(var(--accent-rgb), .28) 0%, rgba(var(--accent-rgb), .07) 45%, rgba(var(--accent-rgb), 0) 72%),
        radial-gradient(50% 120% at 0% 100%, rgba(var(--accent-rgb), .10) 0%, rgba(var(--accent-rgb), 0) 65%),
        linear-gradient(180deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, 0) 60%),
        var(--card-solid);
    /* القائمة الجانبية: نفس العمق (معتم لأنها فوق المحتوى) مع توهّج السمة أعلى الشعار وأسفل القائمة */
    --sidebar-surface:
        radial-gradient(120% 45% at 100% 0%, rgba(var(--accent-rgb), .24) 0%, rgba(var(--accent-rgb), .06) 50%, rgba(var(--accent-rgb), 0) 75%),
        radial-gradient(90% 35% at 0% 100%, rgba(var(--accent-rgb), .12) 0%, rgba(var(--accent-rgb), 0) 70%),
        linear-gradient(180deg, rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, 0) 30%),
        var(--card-tint);
    /* الحقول والجداول: نفس عمق السمة (لون صريح لا تدرّج لأن بعض المكونات تضيف أيقونة خلفية) */
    --ui-field-bg: color-mix(in srgb, color-mix(in srgb, var(--sidebar-bg) 50%, #03060c) 80%, transparent);
    --ui-field-border: rgba(var(--accent-rgb), .18);
    --ui-field-border-hover: rgba(var(--accent-rgb), .34);
    --popup-bg: var(--card-tint);
    --table-head-bg: linear-gradient(180deg, rgba(var(--accent-rgb), .20) 0%, rgba(var(--accent-rgb), .10) 100%);
    --table-line: rgba(var(--accent-rgb), .10);
    --table-row-alt: rgba(255, 255, 255, .022);
    --table-row-hover: rgba(var(--accent-rgb), .10);
    --ui-surface: rgba(255, 255, 255, .045);
    --ui-surface-2: rgba(255, 255, 255, .075);
}