/* LocalPref Design Tokens — Light Mode (default) */
:root {
  /* Blue ramp — primary actions, links, highlights */
  --lp-blue-50:  #E8F4FD;
  --lp-blue-100: #BAD9F7;
  --lp-blue-200: #8BBEF0;
  --lp-blue-400: #3D8EE8;
  --lp-blue-600: #1A5FB4;
  --lp-blue-800: #0D3D7A;

  /* Gray ramp — surfaces, text, borders */
  --lp-gray-50:  #F5F6F8;
  --lp-gray-100: #E4E6EB;
  --lp-gray-200: #C8CBD3;
  --lp-gray-400: #878C97;
  --lp-gray-600: #555A65;
  --lp-gray-800: #2A2D33;

  /* Semantic */
  --lp-white:         #FFFFFF;
  --lp-success:       #2E7D32;
  --lp-success-bg:    #EAF3DE;
  --lp-warning:       #B45309;
  --lp-warning-bg:    #FEF3C7;
  --lp-danger:        #B91C1C;
  --lp-danger-bg:     #FEF2F2;
  --lp-info-text:     var(--lp-blue-600);
  --lp-info-bg:       var(--lp-blue-50);
}

/* Dark Mode */
[data-theme="dark"] {
  --lp-white:         #1A1C20;
  --lp-gray-50:       #22252C;
  --lp-gray-100:      #2E323A;
  --lp-gray-200:      #3D424E;
  --lp-gray-400:      #7A8090;
  --lp-gray-600:      #A8AEBB;
  --lp-gray-800:      #E4E6EB;

  --lp-blue-50:       #0D2540;
  --lp-blue-100:      #1A3D6A;
  --lp-blue-200:      #2558A0;
  --lp-blue-400:      #5AA3F0;
  --lp-blue-600:      #8EC4F7;
  --lp-blue-800:      #BAD9F7;

  --lp-success:       #4CAF50;
  --lp-success-bg:    #14301A;
  --lp-warning:       #F59E0B;
  --lp-warning-bg:    #2D1F06;
  --lp-danger:        #EF4444;
  --lp-danger-bg:     #2D0A0A;

  --lp-info-text:     var(--lp-blue-600);
  --lp-info-bg:       var(--lp-blue-50);
}

/* Badge utility */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
}

.badge-success {
  background: var(--lp-success-bg);
  color: var(--lp-success);
}

.badge-warning {
  background: var(--lp-warning-bg);
  color: var(--lp-warning);
}

.badge-danger {
  background: var(--lp-danger-bg);
  color: var(--lp-danger);
}

.badge-info {
  background: var(--lp-info-bg);
  color: var(--lp-info-text);
}

.badge-gray {
  background: var(--lp-gray-100);
  color: var(--lp-gray-600);
}

/* Loading overlay */
.loading-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  align-items: center;
  justify-content: center;
  background: var(--lp-gray-50);
  opacity: 0.8;
  border-radius: 10px;
  transition: opacity 0.15s ease;
}
.loading-overlay.active {
  display: flex;
}

/* Sidebar nav states */
.nav-active {
  background: var(--lp-blue-50) !important;
  color: var(--lp-blue-600) !important;
  font-weight: 500;
}

.nav-inactive {
  background: transparent !important;
  color: var(--lp-gray-600) !important;
  font-weight: 400;
}
.nav-inactive:hover {
  background: var(--lp-gray-50) !important;
  color: var(--lp-gray-800) !important;
}

/* Mobile nav states */
.mobile-active {
  color: var(--lp-blue-600) !important;
}
.mobile-inactive {
  color: var(--lp-gray-400) !important;
}

/* Theme-aware images */
[data-theme-img="dark"] { display: none; }
[data-theme-img="light"] { display: block; }
[data-theme="dark"] [data-theme-img="dark"] { display: block; }
[data-theme="dark"] [data-theme-img="light"] { display: none; }

/* Toast notification */
.lp-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 9999;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.lp-toast.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.lp-toast-error {
  background: var(--lp-danger-bg);
  color: var(--lp-danger);
  border: 1px solid var(--lp-danger);
}