/* ============================================================
   VARIABLES
   ============================================================ */

/* ════════════════════════════════════════════════════════
   variables.css (11.84 KB)
   ════════════════════════════════════════════════════════ */
:root {
  --black: #000000;
  --black-rgb: 0, 0, 0;
  --white: #ffffff;
  --white-rgb: 255, 255, 255;

  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.25rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height: 1.6;

  --transition: all 0.2s ease;
  --transition-fast: all 0.15s ease-out;
  --transition-slow: all 0.5s ease-out;

  --sidebar-width: 280px;
  --sidebar-width-collapsed: 100px;
  --sidebar-gutter: 16px;
  --navbar-height: 64px;
  --content-padding: 1.5rem;
  --sidebar-logo-bg: rgba(var(--color-warning-rgb), 0.12);
  --sidebar-logo-color: var(--white);
  --sidebar-footer-bg: rgba(var(--white-rgb), 0.03);

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 3.2rem;

  --radius: 0.5rem;
  --radius-sm: 0.4rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px 0 rgba(var(--black-rgb), 0.05);
  --shadow-md: 0 4px 6px -1px rgba(var(--black-rgb), 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(var(--black-rgb), 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(var(--black-rgb), 0.1);
  --shadow-navbar: 0 1px 3px rgba(var(--black-rgb), 0.08);

  --color-primary: #2563EB;
  --color-primary-dark: #1D4ED8;
  --color-primary-light: #3B82F6;
  --color-primary-hover: var(--color-primary-dark);
  --color-primary-active: var(--primary-dark);
  --color-primary-rgb: 37, 99, 235;

  --color-success: #10B981;
  --color-success-dark: #059669;
  --color-success-light: #34D399;
  --color-success-hover: var(--color-success-dark);
  --color-success-active: var(--success-dark);
  --color-success-rgb: 16, 185, 129;

  --color-danger: #EF4444;
  --color-danger-dark: #DC2626;
  --color-danger-light: #F87171;
  --color-danger-hover: var(--color-danger-dark);
  --color-danger-active: var(--danger-dark);
  --color-danger-rgb: 239, 68, 68;

  --color-warning: #F59E0B;
  --color-warning-dark: #D97706;
  --color-warning-light: #FBBF24;
  --color-warning-hover: var(--color-warning-dark);
  --color-warning-active: var(--warning-dark);
  --color-warning-rgb: 245, 158, 11;

  --color-info: #0EA5E9;
  --color-info-dark: #0284C7;
  --color-info-light: #38BDF8;
  --color-info-hover: var(--color-info-dark);
  --color-info-active: var(--info-dark);
  --color-info-rgb: 14, 165, 233;

  --color-purple: #8B5CF6;
  --color-purple-dark: #6D28D9;
  --color-purple-light: #C4B5FD;
  --color-purple-rgb: 139, 92, 246;

  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  --color-secondary: #6B7280;
  --color-secondary-dark: #4B5563;
  --color-secondary-light: #F3F4F6;
  --color-secondary-rgb: 107, 114, 128;

  --text-primary-light: #1E293B;
  --text-secondary-light: #64748B;
  --text-muted-light: #94A3B8;
  --text-disabled-light: #CBD5E1;

  --bg-primary-light: #FFFFFF;
  --bg-secondary-light: #F9FAFB;
  --bg-tertiary-light: #F3F4F6;

  --border-light: #E5E7EB;

  --primary: var(--color-primary);
  --primary-dark: var(--color-primary-dark);
  --primary-light: var(--color-primary-light);
  --primary-rgb: var(--color-primary-rgb);

  --success: var(--color-success);
  --success-dark: var(--color-success-dark);
  --success-light: var(--color-success-light);
  --success-rgb: var(--color-success-rgb);

  --danger: var(--color-danger);
  --danger-dark: var(--color-danger-dark);
  --danger-light: var(--color-danger-light);
  --danger-rgb: var(--color-danger-rgb);

  --warning: var(--color-warning);
  --warning-dark: var(--color-warning-dark);
  --warning-light: var(--color-warning-light);
  --warning-rgb: var(--color-warning-rgb);

  --info: var(--color-info);
  --info-dark: var(--color-info-dark);
  --info-light: var(--color-info-light);
  --info-rgb: var(--color-info-rgb);

  --purple: var(--color-purple);
  --purple-dark: var(--color-purple-dark);
  --purple-light: var(--color-purple-light);
  --purple-rgb: var(--color-purple-rgb);

  --secondary: var(--color-secondary);
  --secondary-dark: var(--color-secondary-dark);
  --secondary-light: var(--color-secondary-light);
  --secondary-rgb: var(--color-secondary-rgb);

  --accent-blue: var(--color-primary);
  --accent-blue-dark: var(--color-primary-dark);
  --accent-blue-rgb: var(--color-primary-rgb);

  --color-error: var(--color-danger);

  --bs-primary: var(--color-primary);
  --bs-primary-rgb: var(--color-primary-rgb);
  --bs-secondary: var(--color-secondary);
  --bs-secondary-rgb: var(--color-secondary-rgb);
  --bs-success: var(--color-success);
  --bs-success-rgb: var(--color-success-rgb);
  --bs-info: var(--color-info);
  --bs-info-rgb: var(--color-info-rgb);
  --bs-warning: var(--color-warning);
  --bs-warning-rgb: var(--color-warning-rgb);
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: var(--color-danger-rgb);
  --bs-light: var(--bg-primary-light);
  --bs-light-rgb: var(--white-rgb);
  --bs-dark: var(--color-gray-900);
  --bs-white: var(--white);
  --bs-white-rgb: var(--white-rgb);
  --bs-black: var(--black);
  --bs-black-rgb: var(--black-rgb);
  --bs-body-color: var(--text-primary);
  --bs-body-bg: var(--bg-body);
  --bs-border-color: var(--border-color);
  --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-dark);

  --text-on-primary: var(--white);
  --text-on-dark: var(--white);

  --text-link: var(--color-primary);
  --text-link-hover: var(--color-primary-dark);

  --bg-body: var(--gray-50);
  --bg-navbar: var(--white);
  --bg-sidebar: var(--bg-primary-dark);
  --bg-sidebar-dark: var(--bg-secondary-dark);
  --bg-card: var(--white);
  --bg-overlay: rgba(var(--black-rgb), 0.5);
  --tooltip-bg: rgba(0, 0, 0, 0.8);

  --border-color: var(--border-light);

  --sidebar-item-padding: 12px 14px;
  --sidebar-item-radius: 12px;
  --sidebar-item-color: var(--text-secondary-light);
  --sidebar-item-color-hover: var(--white);
  --sidebar-item-bg-hover: rgba(255, 255, 255, 0.08);
  --sidebar-active-bg: var(--primary);
  --sidebar-item-bg-active: rgba(var(--white-rgb), 0.12);
  --sidebar-item-color-active: var(--text-on-dark);

  --sidebar-text: var(--text-secondary);
  --header-border: var(--border-color);
  --sidebar-bg: var(--bg-sidebar);

  --content-padding: 24px;
  --transition-sidebar: all 0.3s ease;

  --z-navbar: 1000;
  --z-sidebar: 900;
  --z-sidebar-overlay: 1050;
  --z-modal: 1100;
  --z-toast: 1080;
  --z-loading: 1090;

  --card-border-radius: 1rem;
  --card-border: 1px solid var(--border-color);
  --card-shadow: var(--shadow-sm);
  --card-padding: 1.25rem;

  --btn-padding-y: 0.75rem;
  --btn-padding-x: 1rem;
  --btn-padding-y-sm: 0.5rem;
  --btn-padding-x-sm: 0.8rem;
  --btn-padding-y-lg: 1rem;
  --btn-padding-x-lg: 1.25rem;
  --btn-font-size: 0.95rem;
  --btn-font-weight: 500;
  --btn-border-radius: 0.75rem;
  --btn-transition: var(--transition-fast);

  --badge-padding: 0.4rem 0.8rem;
  --badge-font-size: 0.75rem;
  --badge-font-weight: 600;
  --badge-border-radius: 0.75rem;
  --toast-radius: 0.75rem;

  --stat-surat-dinas-color: var(--color-primary);
  --stat-surat-dinas-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --stat-surat-arsip-color: var(--color-success);
  --stat-surat-arsip-gradient: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
  --stat-nota-dinas-color: var(--color-warning);
  --stat-nota-dinas-gradient: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
  --stat-keputusan-color: var(--color-info);
  --stat-keputusan-gradient: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);

  --color-primary-subtle: rgba(var(--color-primary-rgb), 0.08);
  --color-success-subtle: rgba(var(--color-success-rgb), 0.08);
  --color-danger-subtle: rgba(var(--color-danger-rgb), 0.08);
  --color-warning-subtle: rgba(var(--color-warning-rgb), 0.08);
  --color-info-subtle: rgba(var(--color-info-rgb), 0.08);

  --gradient-start: #3b82f6;
  --gradient-end: #0ea5e9;
  --login-form-border-dark: rgba(100, 100, 120, 0.3);
  --login-form-border-dark-hover: rgba(100, 100, 120, 0.5);
  --login-form-control-dark: rgba(60, 60, 80, 0.8);
  --login-form-control-dark-hover: rgba(70, 70, 90, 0.9);
  --login-form-control-dark-focus: rgba(80, 80, 100, 0.95);

  --form-section-gap: var(--space-sm);
  --form-group-margin: var(--space-sm);
  --form-input-padding: 0.7rem 0.875rem;
  --form-input-min-height: 2.5rem;
  --form-label-margin-bottom: 0.25rem;
  --form-label-color: var(--text-primary);
  --form-input-bg: var(--bg-primary);
  --form-input-border: 1px solid var(--border-color);
  --form-input-border-focus: 2px solid var(--primary);
  --form-input-shadow-focus: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
  --form-input-transition: all 0.2s ease;
  --form-textarea-min-height: 120px;

  /* ========== AUTOFILL FORM SYSTEM ========== */
  --autofill-highlight-bg: rgba(var(--color-success-rgb), 0.08);
  --autofill-highlight-border: var(--color-success);
  --autofill-spinner-color: var(--color-primary);
  --autofill-spinner-bg: rgba(var(--color-primary-rgb), 0.2);
  --autofill-notify-success-bg: #EAF3DE;
  --autofill-notify-success-border: #97C459;
  --autofill-notify-success-text: #27500A;
  --autofill-notify-warning-bg: #FAEEDA;
  --autofill-notify-warning-border: #EF9F27;
  --autofill-notify-warning-text: #633806;
  --autofill-upload-loading-border: var(--color-primary);
  --autofill-upload-loading-bg: rgba(var(--color-primary-rgb), 0.05);
  --autofill-upload-success-border: var(--color-success);
  --autofill-upload-success-bg: rgba(var(--color-success-rgb), 0.05);
  --autofill-upload-failed-border: var(--color-warning);
  --autofill-upload-failed-bg: rgba(var(--color-warning-rgb), 0.05);
  --autofill-icon-success-color: #1d9e75;
  --autofill-icon-warning-color: #f59e0b;
}

:root,
[data-theme="light"] {
  --text-primary: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --text-muted: var(--text-muted-light);
  --text-disabled: var(--text-disabled-light);
  --text-color: var(--text-primary);
  --bg-primary: var(--bg-primary-light);
  --bg-secondary: var(--bg-secondary-light);
  --bg-tertiary: var(--bg-tertiary-light);
  --bg-body: var(--gray-50);
  --bg-navbar: var(--white);
  --bg-card: var(--white);
  --border-color: var(--border-light);
  --bs-body-color: var(--text-primary);
  --bs-body-bg: var(--bg-body);
  --bs-border-color: var(--border-color);


  /* Animation Durations */
  --animation-duration-fast: 0.3s;
  --animation-duration-normal: 0.5s;
  --animation-duration-slow: 1s;
  
  /* Animation Timing Functions */
  --animation-timing-ease-out: ease-out;
  --animation-timing-ease-in-out: ease-in-out;
  --animation-timing-linear: linear;
  
  /* Upload Animation */
  --upload-animation-duration: var(--animation-duration-normal);
  --upload-skeleton-color-1: #f0f0f0;
  --upload-skeleton-color-2: #e0e0e0;
  --upload-success-color: #10b981;
  --upload-error-color: #ef4444;
  
  /* PDF Loading */
  --pdf-loading-duration: 2s;
  --pdf-loaded-duration: var(--animation-duration-normal);
  
  /* Pulse Animation */
  --pulse-color: rgba(16, 185, 129, 0.7);
  --pulse-size: 8px;
  
  /* Shake Animation */
  --shake-distance: 5px;
}