/* =====================================================
   Imperial University College - Learning Platform
   Design Tokens
   ===================================================== */

/* =====================================================
   Google Fonts
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* =====================================================
   Root Variables
   ===================================================== */

:root {

    /* ---- Primary Colors ---- */
    --c-primary:        #1E40AF;
    --c-primary-hover:  #1E3A8A;
    --c-primary-active: #172554;
    --c-primary-light:  #EFF6FF;
    --c-primary-border: #BFDBFE;

    /* ---- Dark / Navy ---- */
    --c-dark:           #0F172A;
    --c-dark-hover:     #020617;
    --c-dark-soft:      #1E293B;
    --c-dark-muted:     #334155;

    /* ---- Neutrals (Slate scale) ---- */
    --c-slate-50:       #F8FAFC;
    --c-slate-100:      #F1F5F9;
    --c-slate-200:      #E2E8F0;
    --c-slate-300:      #CBD5E1;
    --c-slate-400:      #94A3B8;
    --c-slate-500:      #64748B;
    --c-slate-600:      #475569;
    --c-slate-700:      #334155;
    --c-slate-800:      #1E293B;
    --c-slate-900:      #0F172A;

    /* ---- Surfaces ---- */
    --c-bg:             #F8F7F5;      /* Off-white دافئ */
    --c-surface:        #FFFFFF;      /* Cards */
    --c-surface-alt:    #FBFAF8;      /* Alternate rows */
    --c-surface-muted:  #F2F0EC;      /* Muted backgrounds */

    /* ---- Borders ---- */
    --c-border:         #EBE9E5;
    --c-border-soft:    #F1EFEB;
    --c-border-dark:    #DDDAD3;
    --c-border-strong:  #C7C3BA;

    /* ---- Text ---- */
    --c-text:           #0F172A;      /* Primary */
    --c-text-secondary: #475569;      /* Secondary */
    --c-text-tertiary:  #64748B;      /* Tertiary */
    --c-text-muted:     #94A3B8;      /* Muted */
    --c-text-inverse:   #FFFFFF;

    /* ---- Status ---- */
    --c-success:        #059669;
    --c-success-hover:  #047857;
    --c-success-light:  #ECFDF5;
    --c-success-border: #A7F3D0;
    --c-success-text:   #065F46;

    --c-warning:        #D97706;
    --c-warning-light:  #FFFBEB;
    --c-warning-border: #FDE68A;
    --c-warning-text:   #92400E;

    --c-error:          #DC2626;
    --c-error-hover:    #B91C1C;
    --c-error-light:    #FEF2F2;
    --c-error-border:   #FECACA;
    --c-error-text:     #991B1B;

    --c-info:           #0284C7;
    --c-info-light:     #F0F9FF;
    --c-info-border:    #BAE6FD;
    --c-info-text:      #075985;

    /* ---- Typography ---- */
    --font-ar:          'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
    --font-en:          'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:        'JetBrains Mono', ui-monospace, monospace;

    /* Font Sizes */
    --fs-xs:            12px;
    --fs-sm:            13px;
    --fs-base:          14px;
    --fs-md:            15px;
    --fs-lg:            16px;
    --fs-xl:            18px;
    --fs-2xl:           22px;
    --fs-3xl:           28px;
    --fs-4xl:           34px;
    --fs-5xl:           42px;

    /* Font Weights */
    --fw-light:         300;
    --fw-normal:        400;
    --fw-medium:        500;
    --fw-semibold:      600;
    --fw-bold:          700;

    /* Line Heights */
    --lh-tight:         1.25;
    --lh-snug:          1.375;
    --lh-normal:        1.5;
    --lh-relaxed:       1.65;
    --lh-loose:         1.8;

    /* Letter Spacing */
    --ls-tight:        -0.015em;
    --ls-normal:        0;
    --ls-wide:          0.025em;
    --ls-wider:         0.05em;

    /* ---- Spacing (4px scale) ---- */
    --sp-0:             0;
    --sp-1:             4px;
    --sp-2:             8px;
    --sp-3:             12px;
    --sp-4:             16px;
    --sp-5:             20px;
    --sp-6:             24px;
    --sp-7:             28px;
    --sp-8:             32px;
    --sp-9:             36px;
    --sp-10:            40px;
    --sp-12:            48px;
    --sp-14:            56px;
    --sp-16:            64px;
    --sp-20:            80px;

    /* ---- Border Radius ---- */
    --r-xs:             4px;
    --r-sm:             6px;
    --r-md:             8px;
    --r-lg:             10px;
    --r-xl:             12px;
    --r-2xl:            16px;
    --r-3xl:            20px;
    --r-full:           9999px;

    /* ---- Shadows (خفيفة جداً) ---- */
    --sh-xs:            0 1px 2px rgba(15, 23, 42, 0.04);
    --sh-sm:            0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --sh-md:            0 4px 6px rgba(15, 23, 42, 0.05), 0 2px 4px rgba(15, 23, 42, 0.03);
    --sh-lg:            0 10px 15px rgba(15, 23, 42, 0.06), 0 4px 6px rgba(15, 23, 42, 0.04);
    --sh-xl:            0 20px 25px rgba(15, 23, 42, 0.08), 0 10px 10px rgba(15, 23, 42, 0.04);
    --sh-2xl:           0 25px 50px rgba(15, 23, 42, 0.12);
    --sh-focus:         0 0 0 3px rgba(30, 64, 175, 0.12);
    --sh-focus-error:   0 0 0 3px rgba(220, 38, 38, 0.12);

    /* ---- Transitions ---- */
    --t-fast:           100ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-base:           150ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-slow:           200ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-slower:         300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- Layout ---- */
    --sidebar-width:    260px;
    --sidebar-collapsed: 76px;
    --topbar-height:    64px;
    --content-max:      1440px;
    --content-padding:  var(--sp-8);

    /* ---- Z-Index ---- */
    --z-base:           1;
    --z-sidebar:        40;
    --z-topbar:         50;
    --z-dropdown:       100;
    --z-modal:          500;
    --z-overlay:        400;
    --z-toast:          1000;
    --z-tooltip:        1100;

    /* ---- Component Specific ---- */
    --btn-height-sm:    32px;
    --btn-height:       38px;
    --btn-height-lg:    44px;
    --input-height:     38px;
    --input-height-sm:  32px;
    --avatar-sm:        32px;
    --avatar-md:        40px;
    --avatar-lg:        56px;
    --avatar-xl:        80px;
}

/* =====================================================
   Responsive Adjustments
   ===================================================== */

@media (max-width: 1440px) {
    :root {
        --sidebar-width: 240px;
        --content-padding: var(--sp-6);
    }
}

@media (max-width: 1024px) {
    :root {
        --content-padding: var(--sp-5);
        --topbar-height: 60px;
    }
}

@media (max-width: 640px) {
    :root {
        --content-padding: var(--sp-4);
        --topbar-height: 56px;
        --fs-3xl: 24px;
        --fs-4xl: 28px;
        --fs-5xl: 32px;
    }
}