/* ============================================================
   Amity University Dubai — Student Portal v2
   Design System  (Mobile-first → Tablet → Laptop → Desktop)
   Single source of truth for tokens, base styles & components.
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
    /* Official Amity University Dubai palette (navy + signature gold) */
    --brand-900: #002c49;   /* deepest navy */
    --brand-800: #003659;
    --brand-700: #0e244e;   /* primary navy */
    --brand-600: #0056b8;
    --brand-500: #106fc4;
    --brand-400: #53a4ff;
    --brand-300: #8fc4ff;

    --gold:      #feca16;   /* signature accent */
    --gold-2:    #ffd84d;
    --gold-deep: #e0a800;
    --accent:    #feca16;   /* gold is the accent */
    --accent-2:  #53a4ff;   /* bright blue secondary */

    /* Neutrals */
    --ink-900: #0f172a;
    --ink-700: #334155;
    --ink-500: #64748b;
    --ink-300: #cbd5e1;
    --ink-100: #f1f5f9;
    --surface: #ffffff;
    --bg:      #f5f8fc;

    /* Feedback */
    --success: #16a34a;
    --danger:  #dc2626;
    --warning: #f59e0b;
    --info:    #0ea5e9;

    /* Typography — soft, soothing, a little larger */
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fs-xs: .8125rem;   /* 13 */
    --fs-sm: .9375rem;   /* 15 */
    --fs-base: 1.0625rem;/* 17 */
    --fs-lg: 1.1875rem;  /* 19 */
    --fs-xl: 1.5rem;     /* 24 */
    --fs-2xl: 1.875rem;  /* 30 */
    --fs-3xl: 2.5rem;    /* 40 */

    /* Spacing scale */
    --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
    --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --sp-10: 4rem;

    /* Radius & shadow */
    --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.08);
    --shadow-md: 0 8px 24px rgba(15,23,42,.10);
    --shadow-lg: 0 20px 50px rgba(6,34,63,.22);

    /* Motion */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --t-fast: .15s var(--ease);
    --t: .25s var(--ease);

    /* Layout */
    --header-h: 60px;
    --sidebar-w: 270px;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: .002em;
    color: var(--ink-900);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--brand-600); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1,h2,h3,h4 { margin: 0 0 var(--sp-3); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-weight: 600; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
    width: 100%;
    padding: .85rem 1.25rem;
    font-size: var(--fs-base); font-weight: 600;
    border: none; border-radius: var(--r-pill);
    transition: transform var(--t-fast), box-shadow var(--t), background var(--t);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    color: #fff;
    font-weight: 700;
    background: var(--brand-700);
    border-color: var(--brand-700);
    box-shadow: none;
}
.btn-primary:hover { background: var(--brand-800); border-color: var(--brand-800); color: #fff; box-shadow: none; }
.btn-navy {
    color: #fff;
    background: linear-gradient(135deg, var(--brand-700), var(--brand-600));
    box-shadow: 0 8px 18px rgba(14,36,78,.4);
}
.btn-ghost { background: transparent; color: var(--brand-700); box-shadow: none; }

/* ---------- Form fields ---------- */
.field { position: relative; margin-bottom: var(--sp-5); }
.field label {
    display: block; margin-bottom: var(--sp-2);
    font-size: var(--fs-sm); font-weight: 500; color: var(--ink-700);
}
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > i.lead {
    position: absolute; left: 1rem; color: var(--ink-500); font-size: 1rem; pointer-events: none;
}
.input {
    width: 100%;
    padding: .9rem 1rem .9rem 2.75rem;
    font-size: var(--fs-base); color: var(--ink-900);
    background: var(--surface);
    border: 1.5px solid var(--ink-300);
    border-radius: var(--r-md);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input::placeholder { color: var(--ink-500); }
.input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(30,136,229,.15);
}
.input-toggle {
    position: absolute; right: .75rem;
    background: none; border: none; color: var(--ink-500); padding: .4rem;
}
.input-toggle:hover { color: var(--brand-600); }

/* ---------- Alerts ---------- */
.alert { padding: .75rem 1rem; border-radius: var(--r-sm); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.alert-danger  { background: #fef2f2; color: var(--danger);  border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: var(--success); border: 1px solid #bbf7d0; }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.muted { color: var(--ink-500); }
.hide { display: none !important; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    /* Don't use `animation: none` — that drops animation-fill-mode, so entrance
       animations (opacity:0 -> 1) would leave elements stuck invisible (e.g. the
       login form). Instead run animations/transitions instantly: the final state
       (visible) is applied with no perceptible motion. */
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
}