/**
 * معهد بلاغة آية - نظام متغيرات التصميم الموحد (Design Tokens)
 * المسار: assets/css/common/design_tokens.css
 */

:root {
    /* 1. التدرجات البنفسجية المعتمدة للمنصة */
    --primary-purple: #2D0854;
    --primary-purple-deep: #1A0330;
    --primary-dark: #1A0330;
    --primary-soft: #380F6E;
    --primary-purple-light: #4A148C;
    --light-purple: #FAF5FF;
    --gradient-hero: linear-gradient(135deg, #2D0854 0%, #1A0330 100%);
    --gradient-card-dark: linear-gradient(180deg, #2D0E54 0%, #1C0536 100%);

    /* 2. اللون الذهبي المعتمد للمنصة */
    --secondary-gold: #FBC02D;
    --secondary-gold-hover: #F59E0B;
    --gold-hover: #E5A800;
    --secondary-gold-dark: #D97706;
    --accent-gold: #D4AF37;
    --gradient-gold: linear-gradient(135deg, #FBC02D 0%, #F59E0B 100%);

    /* 3. ألوان حالات النظام والعمليات الموحدة */
    --state-success: #10B981;
    --state-success-dark: #059669;
    --state-danger: #DC2626;
    --state-danger-light: #EF4444;
    --state-warning: #D97706;
    --state-warning-light: #F59E0B;
    --state-info: #0284C7;
    --whatsapp-green: #25D366;
    --whatsapp-dark: #1EBE5D;
    --female-pink: #D81B60;

    /* 4. الخلفيات والأسطح والحدود */
    --bg-light: #F8FAFC;
    --light-bg: #F8FAFC;
    --bg-calm-light: #F8F5FC;
    --bg-white: #FFFFFF;
    --border-light: #E2E8F0;
    --card-border-glow: rgba(251, 192, 45, 0.4);

    /* 5. ألوان النصوص المتدرجة لراحة العين */
    --text-dark: #0F172A;
    --text-main: #1E293B;
    --text-muted: #475569;
    --text-subtle: #64748B;
    --text-white: #FFFFFF;

    /* 6. القياسات والانحناءات القياسية */
    --radius-pill: 50px;
    --radius-card: 22px;
    --radius-md: 14px;
    --radius-sm: 10px;

    /* 7. الظلال الموحدة */
    --shadow-gold-glow: 0 8px 24px rgba(251, 192, 45, 0.32);
    --shadow-purple-glow: 0 10px 30px rgba(26, 3, 48, 0.35);
    --shadow-card: 0 8px 24px rgba(15, 23, 42, 0.06);
    --shadow-card-hover: 0 16px 36px rgba(45, 8, 84, 0.12);

    /* 8. خطوط الطباعة المعتمدة */
    --font-main: 'Tajawal', 'Cairo', sans-serif;
    --font-heading: 'Cairo', 'Tajawal', sans-serif;
    --font-quran: 'Amiri Quran', 'Amiri', serif;
}

/* الأزرار القياسية المشتركة */
.btn-gold-pill {
    background: var(--gradient-gold);
    color: var(--primary-purple) !important;
    font-weight: 800;
    font-family: var(--font-heading);
    padding: 12px 30px;
    border-radius: var(--radius-pill);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: var(--shadow-gold-glow);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.btn-gold-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(251, 192, 45, 0.45);
    background: #FFFFFF;
    color: var(--primary-purple-deep) !important;
}

.btn-outline-pill {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF !important;
    font-weight: 700;
    font-family: var(--font-heading);
    padding: 11px 28px;
    border-radius: var(--radius-pill);
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: all 0.25s ease;
    cursor: pointer;
}

.btn-outline-pill:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #FFFFFF;
    transform: translateY(-2px);
}

/* شارة العناوين العلوية */
.top-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(251, 192, 45, 0.4);
    padding: 6px 20px;
    border-radius: var(--radius-pill);
    color: var(--secondary-gold);
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 16px;
    backdrop-filter: blur(5px);
}

/* الترويسة البنفسجية المشتركة للصفحات الداخلية */
.royal-hero-section {
    background: radial-gradient(circle at 100% 0%, #4A148C 0%, var(--primary-purple) 60%, var(--primary-purple-deep) 100%);
    color: #FFFFFF;
    padding: 64px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.royal-hero-section::before,
.royal-hero-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(251, 192, 45, 0.05);
    pointer-events: none;
}

.royal-hero-section::before {
    width: 420px;
    height: 420px;
    top: -120px;
    right: -100px;
}

.royal-hero-section::after {
    width: 340px;
    height: 340px;
    bottom: -100px;
    left: -80px;
}

/* رسائل التنبيه الموحدة */
.alert-success {
    background: #ECFDF5;
    color: #065F46;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-weight: 700;
    border: 1px solid #A7F3D0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-warning {
    background: #FFFBEB;
    color: #92400E;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-weight: 700;
    border: 1px solid #FDE68A;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-danger {
    background: #FEF2F2;
    color: #991B1B;
    padding: 14px 18px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-weight: 700;
    border: 1px solid #FECACA;
    display: flex;
    align-items: center;
    gap: 10px;
}