/* ============================================================
   1. ROOT VARIABLES & BASE STYLES
   ============================================================ */
:root {
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-light: #eff6ff;
    /* Turunan warna merek untuk gradien. brand.js menimpa semuanya hanya bila warnaUtama diubah. */
    --primary-dark: #1e40af;
    --primary-deep: #1e3a8a;
    --primary-mid: #3b82f6;
    --primary-soft: #dbeafe;
    --primary-soft2: #bfdbfe;
    --primary-soft3: #93c5fd;
    --primary-bright: #60a5fa;
    --primary-rgb: 37, 99, 235;
    --primary-mid-rgb: 59, 130, 246;
    --landing-bg: #0b1329;
    
    /* Role Colors */
    --role-admin: var(--primary-dark);
    --role-guru: #0d9488;
    --role-siswa: #7c3aed;
    
    /* Status Colors */
    --success: #10b981;
    --success-light: #ecfdf5;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --info: #0284c7;
    --info-light: #e0f2fe;

    /* Backgrounds & Neutral Colors */
    --bg-body: #f8fafc;
    --bg-surface: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 8px;
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.03);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.05);
}

* {
    box-sizing: border-box;
}

body { 
    font-family: var(--font-utama, 'Plus Jakarta Sans', Tahoma, sans-serif); 
    background-color: var(--bg-body); 
    margin: 0; 
    padding: 0; 
    color: #334155; 
    overflow-x: hidden; 
}

.app-layout { 
    display: flex; 
    min-height: 100vh; 
    position: relative; 
}

.hidden { 
    display: none !important; 
}