/* ==========================================================================
   SIMPEL-IF Design System - Corporate Blue Theme
   Institut: STIT Ihsanul Fikri
   ========================================================================== */

:root {
  /* Primary Palettes (Modern Refreshing Blue - Soothing & Gentle on the Eyes) */
  --primary-950: #0f2347; /* Gentle midnight slate, not harsh pitch black */
  --primary-900: #163261; /* Soft executive navy */
  --primary-850: #1a3c75;
  --primary-800: #1d4ed8; /* Deep rich sapphire */
  --primary-700: #2563eb; /* Main vibrant & friendly blue (not dark heavy navy) */
  --primary-600: #3b82f6; /* Gentle bright blue */
  --primary-500: #60a5fa;
  --primary-400: #93c5fd;
  --primary-200: #bfdbfe;
  --primary-100: #dbeafe;
  --primary-50:  #eff6ff;

  /* Accent Palettes (Sky Blue & Soft Cyan) */
  --accent-700: #0284c7;
  --accent-600: #0ea5e9; /* Light, cheerful highlight accent */
  --accent-500: #38bdf8;
  --accent-400: #7dd3fc;
  --accent-300: #bae6fd;
  --accent-100: #e0f2fe;
  --accent-50:  #f0f9ff;

  /* Neutral Backgrounds & Surfaces */
  /* Neutral Backgrounds & Surfaces (Ergonomic Blue & Slate UI/UX) */
  --bg-app: #f4f7fb;       /* Soothing slate-blue canvas, very gentle on the eyes */
  --bg-surface: #ffffff;   /* Pure crisp white cards for optimal reading */
  --bg-surface-elevated: #ffffff;
  --bg-surface-subtle: #f8fafc; /* Crisp, clean subtle container */
  --bg-sidebar: #0f2347;   /* Rich, noble sapphire-navy */
  --bg-sidebar-hover: #17366b;
  --bg-sidebar-active: #2563eb;

  /* Text Colors (High-Contrast WCAG AAA Hierarchy) */
  --text-dark: #0f2142;    /* Deep Navy Slate (Headings) */
  --text-main: #1e293b;    /* Slate-800 (Body Text, readable for hours) */
  --text-muted: #475569;   /* Slate-600 (Meta & Descriptions) */
  --text-light: #64748b;   /* Slate-500 (Captions & Breadcrumbs) */
  --text-lighter: #94a3b8;
  --text-white: #ffffff;
  --text-sidebar: #cbdcf8;
  --text-sidebar-bright: #ffffff;

  /* Borders & Dividers (Clean & Crisp) */
  --border-color: #cbd5e1; /* Clear crisp boundary */
  --border-light: #e2e8f0; /* Gentle divider */
  --border-subtle: #f1f5f9;
  --border-focus: #2563eb;

  /* Status Colors & Badges */
  /* Hijau (Lunas / Paid) */
  --status-paid-bg: #dcfce7;
  --status-paid-text: #15803d;
  --status-paid-border: #86efac;
  --status-paid-dot: #22c55e;

  /* Biru (Beasiswa Aktif / Active Scholarship) */
  --status-scholarship-bg: #dbeafe;
  --status-scholarship-text: #1d4ed8;
  --status-scholarship-border: #93c5fd;
  --status-scholarship-dot: #3b82f6;

  /* Kuning / Amber (Menunggu Verifikasi / Pending) */
  --status-pending-bg: #fef3c7;
  --status-pending-text: #b45309;
  --status-pending-border: #fde68a;
  --status-pending-dot: #f59e0b;

  /* Merah (Menunggak / Ditolak / Overdue) */
  --status-unpaid-bg: #fee2e2;
  --status-unpaid-text: #b91c1c;
  --status-unpaid-border: #fca5a5;
  --status-unpaid-dot: #ef4444;

  /* Ungu (Dicicil / Dispensasi) */
  --status-installment-bg: #ede9fe;
  --status-installment-text: #6d28d9;
  --status-installment-border: #c4b5fd;
  --status-installment-dot: #8b5cf6;

  /* Gold / Academic Badge */
  --academic-gold: #d97706;
  --academic-gold-light: #fef3c7;

  /* Shadows & Elevations (Soft Blue-Tinted Depth) */
  --shadow-xs: 0 1px 2px 0 rgba(37, 99, 235, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(37, 99, 235, 0.07), 0 1px 2px -1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 10px -1px rgba(37, 99, 235, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 20px -3px rgba(37, 99, 235, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(37, 99, 235, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 2px 8px -2px rgba(37, 99, 235, 0.06), 0 8px 18px -4px rgba(15, 35, 75, 0.04);
  --shadow-modal: 0 25px 50px -12px rgba(15, 35, 71, 0.28);

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Typography */
  --font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-arabic: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;

  /* Islamic Nuance Palettes (Emerald & Noble Gold Harmony) */
  --islamic-emerald-950: #022c22;
  --islamic-emerald-900: #064e3b;
  --islamic-emerald-800: #065f46;
  --islamic-emerald-700: #047857;
  --islamic-emerald-600: #059669;
  --islamic-emerald-500: #10b981;
  --islamic-emerald-400: #34d399;
  --islamic-emerald-200: #a7f3d0;
  --islamic-emerald-100: #d1fae5;
  --islamic-emerald-50:  #ecfdf5;

  --islamic-gold-700:    #b45309;
  --islamic-gold-600:    #d97706;
  --islamic-gold-500:    #f59e0b;
  --islamic-gold-400:    #fbbf24;
  --islamic-gold-200:    #fde68a;
  --islamic-gold-100:    #fef3c7;
  --islamic-gold-50:     #fffbeb;

  /* Dimensions */
  --sidebar-width: 270px;
  --sidebar-collapsed-width: 78px;
  --header-height: 64px;
  --role-bar-height: 0px;

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}