@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --font-family: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --primary-50: 236 252 250;
  --primary-100: 205 250 245;
  --primary-200: 153 246 228;
  --primary-300: 94 234 212;
  --primary-400: 45 212 191;
  --primary-500: 20 184 166;
  --primary-600: 13 148 136;
  --primary-700: 15 118 110;
  --primary-800: 17 94 89;
  --primary-900: 19 78 74;
  --gray-50: 247 246 242;
  --gray-100: 238 236 230;
  --gray-200: 226 222 214;
  --gray-300: 197 191 179;
  --gray-400: 150 144 135;
  --gray-500: 112 106 99;
  --gray-600: 80 76 71;
  --gray-700: 57 54 50;
  --gray-800: 36 34 32;
  --gray-900: 22 20 19;
}

body {
  background:
    radial-gradient(1200px 600px at 12% -10%, #f5efe2 0%, transparent 70%),
    radial-gradient(800px 500px at 90% 0%, #eaf6f2 0%, transparent 65%),
    #f6f3ec;
}

h1, h2, h3, h4, h5, h6,
.fi-header-heading,
.fi-ta-header-heading,
.fi-section-header-heading {
  font-family: "Fraunces", "Space Grotesk", serif;
  letter-spacing: -0.01em;
}

.fi-topbar {
  background: rgba(246, 243, 236, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* ============================================
   SIDEBAR - Pure Black with High Readability
   ============================================ */

.fi-sidebar,
.dark .fi-sidebar,
.fi-sidebar-nav {
  background: #000000 !important;
  background-color: #000000 !important;
}

/* Remove any gradients or overlays */
.fi-sidebar::before,
.fi-sidebar::after {
  display: none !important;
}

.fi-sidebar-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: #000000 !important;
}

/* Navigation group labels - uppercase headers */
.fi-sidebar-group-label,
.dark .fi-sidebar-group-label,
.fi-sidebar-group > button > span {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Navigation item labels - clear white text */
.fi-sidebar-item-label,
.dark .fi-sidebar-item-label {
  color: #ffffff !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
}

/* Navigation icons - bright and visible */
.fi-sidebar-item-icon,
.dark .fi-sidebar-item-icon {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Navigation item button background */
.fi-sidebar-item > a,
.fi-sidebar-item > button {
  background: transparent !important;
}

/* Hover state - visible highlight */
.fi-sidebar-item:hover > a,
.fi-sidebar-item:hover > button,
.dark .fi-sidebar-item:hover > a,
.dark .fi-sidebar-item:hover > button {
  background: rgba(255, 255, 255, 0.12) !important;
}

.fi-sidebar-item:hover .fi-sidebar-item-label,
.fi-sidebar-item:hover .fi-sidebar-item-icon {
  color: #ffffff !important;
}

/* Active state - teal accent with left border */
.fi-sidebar-item.fi-active > a,
.fi-sidebar-item.fi-active > button,
.dark .fi-sidebar-item.fi-active > a,
.dark .fi-sidebar-item.fi-active > button {
  background: rgba(99, 102, 241, 0.2) !important;
  box-shadow: inset 3px 0 0 0 #6366f1 !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
  color: #818cf8 !important;
}

/* Group collapse button */
.fi-sidebar-group > button {
  background: transparent !important;
}

.fi-sidebar-group > button:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* Chevron icons in groups */
.fi-sidebar-group-button svg,
.fi-sidebar-group > button svg {
  color: rgba(255, 255, 255, 0.5) !important;
}

.fi-section,
.fi-widget,
.fi-card,
.fi-ta,
.fi-fo-section {
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 28px rgba(32, 28, 20, 0.08);
}

.fi-ta-header,
.fi-section-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.fi-btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.fi-btn-color-primary {
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
  box-shadow: 0 10px 22px rgba(20, 184, 166, 0.24);
}

.fi-input,
.fi-select-input,
.fi-textarea,
.fi-fo-field-wrp {
  border-radius: 12px;
}

.fi-simple-layout {
  background:
    radial-gradient(800px 420px at 10% -10%, #efe7da 0%, transparent 70%),
    radial-gradient(520px 380px at 85% 0%, #e2f3ef 0%, transparent 65%),
    #f6f3ec;
}

.fi-simple-layout .fi-card {
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.fi-logo {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .fi-topbar,
  .fi-section,
  .fi-widget,
  .fi-card,
  .fi-ta,
  .fi-fo-section {
    border-radius: 14px;
  }
}