:root {
    --slp-header-bg: #0b0905;
    --slp-header-fg: #ddd0b8;
    --slp-header-fg-strong: #faf6ef;
    --slp-header-height: 5.5rem;
    --slp-header-border: rgba(221, 178, 79, 0.22);
    --slp-nav-hover: rgba(255, 255, 255, 0.08);
    --slp-nav-active: rgba(200, 150, 42, 0.2);
}

.fi-topbar,
.fi-topbar:where(.dark, .dark *),
.fi-sidebar,
.fi-sidebar:where(.dark, .dark *),
.fi-sidebar-header,
.fi-body-has-topbar .fi-sidebar-header,
.fi-body-has-topbar .fi-sidebar-header:where(.dark, .dark *) {
    background-color: var(--slp-header-bg);
}

.fi-topbar {
    min-height: var(--slp-header-height);
    box-shadow: none;
    border-bottom: 1px solid var(--slp-header-border);
}

.fi-sidebar {
    border-inline-end: 1px solid var(--slp-header-border);
}

.fi-sidebar-header {
    height: var(--slp-header-height);
}

@media (min-width: 64rem) {
    .fi-sidebar,
    .fi-sidebar:where(.dark, .dark *) {
        background-color: var(--slp-header-bg);
    }

    .fi-body-has-topbar .fi-sidebar {
        top: var(--slp-header-height);
        height: calc(100dvh - var(--slp-header-height));
    }
}

.fi-topbar .fi-icon-btn,
.fi-sidebar-header .fi-icon-btn {
    color: var(--slp-header-fg);
}

@media (hover: hover) {
    .fi-topbar .fi-icon-btn:hover,
    .fi-sidebar-header .fi-icon-btn:hover {
        color: var(--slp-header-fg-strong);
    }
}

.fi-sidebar-group-label,
.fi-sidebar-group-label:where(.dark, .dark *) {
    color: var(--slp-header-fg);
}

.fi-sidebar-group-btn .fi-icon,
.fi-sidebar-group-btn .fi-icon:where(.dark, .dark *) {
    color: var(--slp-header-fg);
}

.fi-sidebar-item-label,
.fi-sidebar-item-label:where(.dark, .dark *) {
    color: var(--slp-header-fg-strong);
}

.fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item-btn > .fi-icon:where(.dark, .dark *) {
    color: var(--slp-header-fg);
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible {
    background-color: var(--slp-nav-hover);
}

@media (hover: hover) {
    .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover {
        background-color: var(--slp-nav-hover);
    }
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:where(.dark, .dark *) {
    background-color: var(--slp-nav-active);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label:where(.dark, .dark *),
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon:where(.dark, .dark *) {
    color: var(--primary-400, #ddb24f);
}

.fi-simple-header .fi-logo {
    background-color: var(--slp-header-bg);
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
}