/* =========================================================
   DESIGN TOKENS — Mr Sherif English Platform
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Tajawal:wght@400;500;700;800;900&family=IBM+Plex+Mono:wght@500;600&display=swap');


:root {

    /* =====================================================
       الألوان الأساسية
    ===================================================== */

    --ink:            #0F172A;   /* نص أساسي */
    --ink-soft:       #64748B;   /* نص ثانوي */

    --paper:          #F4F6FB;   /* خلفية الصفحة */
    --surface:        #FFFFFF;   /* الكروت */
    --surface-soft:   #F8FAFF;   /* خلفيات فاتحة */

    --rule:           #E5EAF2;   /* خطوط فاصلة */


    /* =====================================================
       الأزرق (اللون الأساسي)
    ===================================================== */

    --brand:            #1E50C7;
    --brand-dark:       #163DA0;
    --brand-darker:     #0F2A70;
    --brand-light:      #5B8EF2;
    --brand-tint:       #EEF3FF;
    --brand-tint-deep:  #DCE6FF;


    /* =====================================================
       الأحمر (الـ accent)
    ===================================================== */

    --highlight:        #DC2626;
    --highlight-dark:   #B91C1C;
    --highlight-tint:   #FEF2F2;


    /* =====================================================
       دلالات الحالة
    ===================================================== */

    --good:           #059669;
    --good-dark:      #047857;
    --good-tint:      #ECFDF5;

    --danger:         #DC2626;
    --danger-dark:    #B91C1C;
    --danger-tint:    #FEF2F2;

    --amber:          #B67A1A;
    --amber-dark:     #8A5A0F;
    --amber-tint:     #FEF6E7;


    /* =====================================================
       الخطوط
    ===================================================== */

    --font-display: "Playfair Display", Georgia, serif;
    --font-body:    "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono:    "IBM Plex Mono", "Courier New", monospace;


    /* =====================================================
       القياسات
    ===================================================== */

    --radius-sm:   10px;
    --radius-md:   14px;
    --radius-lg:   20px;
    --radius-xl:   24px;
    --radius-pill: 999px;


    /* =====================================================
       الظلال (Cards)
    ===================================================== */

    --shadow-card:
        0 4px 20px rgba(15, 23, 42, 0.06),
        0 1px 3px rgba(15, 23, 42, 0.04);

    --shadow-lift:
        0 12px 32px rgba(15, 23, 42, 0.10),
        0 2px 6px rgba(15, 23, 42, 0.05);

    --shadow-blue:
        0 8px 24px rgba(30, 80, 199, 0.25);


    /* =====================================================
       ظلال الأزرار 3D (Duolingo Style)
    ===================================================== */

    --shadow-btn-blue:   0 4px 0 var(--brand-dark);
    --shadow-btn-green:  0 4px 0 var(--good-dark);
    --shadow-btn-red:    0 4px 0 var(--danger-dark);
    --shadow-btn-amber:  0 4px 0 var(--amber-dark);
}


/* =========================================================
   إتاحة الوصول
========================================================= */

:focus-visible {
    outline: 2px solid var(--highlight);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

* {
    -webkit-tap-highlight-color: transparent;
}