/* ==========================================================================
   Safwa College — Admin Tailwind base styles
   - Local Tajawal font registration (Arabic / RTL)
   - Small global resets and helpers that complement Tailwind utilities
   ========================================================================== */

@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/tajawal-400.ttf') format('truetype');
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/tajawal-500.ttf') format('truetype');
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/tajawal-700.ttf') format('truetype');
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/tajawal-800.ttf') format('truetype');
}

html {
    font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
}

/* Custom scrollbar (subtle) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .15); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, .3); }

/* Animated gradient blobs used by the login background */
@keyframes blob-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(30px, -40px) scale(1.05); }
    66%      { transform: translate(-20px, 30px) scale(0.95); }
}
.animate-blob { animation: blob-float 14s ease-in-out infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

/* Subtle fade-in on load */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fade-up .6s ease-out both; }