/* =============================================
   UNIFIED DESIGN TOKEN SYSTEM
   Faculty Workflow — NPU Premium SaaS
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Color Palette */
    --color-primary: #ea580c;
    --color-primary-dark: #c2410c;
    --color-primary-light: #ffedd5;
    
    /* Semantic Colors */
    --color-success:        #16a34a;
    --color-success-light:  #dcfce7;
    --color-danger:         #dc2626;
    --color-danger-light:   #fee2e2;
    --color-warning:        #d97706;
    --color-warning-light:  #fef3c7;
    --color-info:           #2563eb;
    --color-info-light:     #dbeafe;

    /* Neutrals */
    --color-text:           #0f172a; /* Slate 900 */
    --color-text-muted:     #334155; /* Slate 700 (Darker) */
    --color-text-faint:     #64748b; /* Slate 500 (Darker) */
    --color-border:         #cbd5e1;
    --color-surface:        #ffffff;
    --color-bg:             #f8fafc;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 8px -2px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 24px -6px rgba(0,0,0,0.12);
    --shadow-xl: 0 20px 40px -8px rgba(0,0,0,0.15);

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Typography */
    --font-heading: 'Sarabun', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-sans: 'Sarabun', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --text-xs:   12px;
    --text-sm:   14px;
    --text-base: 15px;
    --text-md:   17px;
    --text-lg:   20px;
    --text-xl:   26px;
    --text-2xl:  34px;

    /* === SPACING (8px grid) === */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;

    /* === TRANSITIONS === */
    --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;
}

/* =============================================
   BASE RESET
   ============================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0; padding: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
    background-image:
        radial-gradient(ellipse at 0% 0%, hsla(25, 100%, 94%, 0.5) 0px, transparent 60%),
        radial-gradient(ellipse at 100% 0%, hsla(210, 100%, 96%, 0.4) 0px, transparent 60%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text);
    letter-spacing: -0.02em;
}

p  { margin: 0 0 1rem 0; }
a  { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); }

h1, h2, h3, h4, h5, h6, .modal-title, .drawer-title, .stat-value {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
}

img, svg {
    display: block;
    max-width: 100%;
}

/* =============================================
   UTILITY CLASSES
   ============================================= */
.text-muted    { color: var(--color-text-muted); }
.text-faint    { color: var(--color-text-faint); }
.text-primary  { color: var(--color-primary); }
.text-success  { color: var(--color-success); }
.text-danger   { color: var(--color-danger); }
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-sm       { font-size: var(--text-sm); }
.text-xs       { font-size: var(--text-xs); }
.text-lg       { font-size: var(--text-lg); }
.fw-500        { font-weight: 500; }
.fw-600        { font-weight: 600; }
.fw-700        { font-weight: 700; }
.mono          { font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace; }

.mt-1  { margin-top: var(--sp-1); }
.mt-2  { margin-top: var(--sp-2); }
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mb-2  { margin-bottom: var(--sp-2); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-6  { margin-bottom: var(--sp-6); }
.mb-8  { margin-bottom: var(--sp-8); }
.ml-auto { margin-left: auto; }

.flex            { display: flex; }
.flex-col        { display: flex; flex-direction: column; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-1          { flex: 1; }
.flex-wrap       { flex-wrap: wrap; }
.gap-1  { gap: var(--sp-1); }
.gap-2  { gap: var(--sp-2); }
.gap-3  { gap: var(--sp-3); }
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.w-full { width: 100%; }
.h-full { height: 100%; }

.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* =============================================
   PAGE ENTRANCE ANIMATIONS
   ============================================= */
.page-enter {
    animation: pageEnter 0.45s var(--ease-spring) both;
}

.anim-fade-up { animation: fadeUp 0.5s var(--ease-spring) both; }
.anim-stagger-1 { animation-delay: 0.08s; }
.anim-stagger-2 { animation-delay: 0.16s; }
.anim-stagger-3 { animation-delay: 0.24s; }
.anim-stagger-4 { animation-delay: 0.32s; }
.anim-stagger-5 { animation-delay: 0.40s; }

@keyframes pageEnter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =============================================
   CUSTOM SCROLLBAR
   ============================================= */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* =============================================
   GRADIENT TEXT UTILITY
   ============================================= */
.gradient-text {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 50%, #fb923c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}