@import "tailwindcss";

:root {
    --color-naturalpina-50: oklch(0.973 0.01 145.3);
  --color-naturalpina-100: oklch(0.937 0.026 145.3);
  --color-naturalpina-200: oklch(0.883 0.052 145.09);
  --color-naturalpina-300: oklch(0.823 0.049 145.08);
  --color-naturalpina-400: oklch(0.771 0.046 145.08);
  --color-naturalpina-500: oklch(0.714 0.042 145.09);
  --color-naturalpina-600: oklch(0.599 0.036 145.08);
  --color-naturalpina-700: oklch(0.48 0.028 145.09);
  --color-naturalpina-800: oklch(0.367 0.021 145.09);
  --color-naturalpina-900: oklch(0.248 0.014 145.1);
  --color-naturalpina-950: oklch(0.197 0.012 145.06);
}
.fi-sidebar {
    background-color: var(--color-naturalpina-50);
    border-right: 1px solid var(--color-naturalpina-100);
}
.fi-topbar {
    background-color: var(--color-naturalpina-50);
    border-bottom: 1px solid var(--color-naturalpina-100);
}

.fi-sidebar-item.fi-active>.fi-sidebar-item-btn, .fi-sidebar-item.fi-active>.fi-sidebar-item-btn>.fi-sidebar-item-label {
    background-color: var(--color-naturalpina-400);
    color: var(--color-naturalpina-50) !important;
}