/*
 * Sovrency brand theme for Dokka HTML
 *
 * Overrides Dokka's default JetBrains purple/blue palette
 * with Sovrency orange (#FF5320 / #D4552A), black (#080602),
 * and warm white (#F7F6F5).
 */

/* ==================== Light Theme ==================== */

:root {
    /* --- Primary accent (links, active states) --- */
    --active-section-color: #D4552A;
    --sidemenu-section-active-color: #D4552A;
    --hover-link-color: #D4552A;

    /* --- Key blue → Sovrency orange (used for tabs, filters, focus rings) --- */
    --color-key-blue: #D4552A;
    --color-key-blue-hover: #BF4D26;
    --color-key-blue-50: rgba(212, 85, 42, 0.5);

    /* --- Backgrounds --- */
    --background-color: #F7F6F5;
    --default-white: #F7F6F5;
    --default-gray: #E8E3DD;
    --blockquote-background: rgba(8, 6, 2, 0.04);
    --navigation-highlight-color: rgba(212, 85, 42, 0.08);
    --color-scrollbar-track: #E8E3DD;

    /* --- Text --- */
    --color-dark: #1a1814;

    /* --- Borders --- */
    --active-tab-border-color: #D4552A;
    --inactive-tab-border-color: rgba(8, 6, 2, 0.25);

    /* --- Font --- */
    --default-font-family: 'Inter Tight', Inter, system-ui, -apple-system, sans-serif;
}

/* --- Navigation bar: Sovrency black --- */
.navigation-wrapper {
    background-color: #080602 !important;
}

.navigation-wrapper .library-name {
    color: #F7F6F5 !important;
}

.navigation-wrapper .library-name a,
.navigation-wrapper .library-name--link {
    color: #F7F6F5 !important;
}

.navigation-wrapper .library-version {
    color: rgba(247, 246, 245, 0.6) !important;
}

/* Search bar in dark nav */
.navigation-wrapper .search-wrapper input,
.navigation-wrapper [data-test="searchBar"] input {
    background-color: rgba(247, 246, 245, 0.1) !important;
    color: #F7F6F5 !important;
    border-color: rgba(247, 246, 245, 0.2) !important;
}

.navigation-wrapper .search-wrapper input::placeholder {
    color: rgba(247, 246, 245, 0.5) !important;
}

/* Dark mode toggle icon in nav */
.navigation-wrapper .theme-toggle svg,
.navigation-wrapper [data-test="theme-switcher"] svg {
    fill: #F7F6F5 !important;
    color: #F7F6F5 !important;
}

/* --- Sidebar active link highlight --- */
.sideMenuPart > .overview a[href].active {
    color: #D4552A !important;
    font-weight: 600;
}

.sideMenuPart > .overview:hover {
    background-color: rgba(212, 85, 42, 0.06);
}

/* --- Platform filter tags: orange active state --- */
.platform-selector .platform-tag.active,
.filter-section .platform-tag[data-active="true"],
[data-filterable-current] .platform-tag {
    background-color: #D4552A !important;
    color: #fff !important;
}

/* --- Tab active borders --- */
.tabs-section .tabs-section-body .tab.active {
    border-bottom-color: #D4552A !important;
}

/* --- Links --- */
a:hover {
    color: #D4552A;
}

.main-content a {
    color: #D4552A;
}

.main-content a:hover {
    color: #BF4D26;
}

/* --- Footer --- */
.footer {
    background-color: #080602 !important;
    color: rgba(247, 246, 245, 0.7) !important;
}

.footer a {
    color: #F7F6F5 !important;
}

/* --- Selection color --- */
::selection {
    background-color: rgba(255, 83, 32, 0.2);
}


/* ==================== Dark Theme ==================== */

:root.theme-dark {
    /* --- Primary accent --- */
    --active-section-color: #FF5320;
    --sidemenu-section-active-color: #FF5320;
    --hover-link-color: #FF5320;

    /* --- Key blue → orange --- */
    --color-key-blue: #FF5320;
    --color-key-blue-hover: #FF6B3D;
    --color-key-blue-50: rgba(255, 83, 32, 0.5);

    /* --- Backgrounds --- */
    --background-color: #0d0b08;
    --color-dark: #2a2620;
    --blockquote-background: rgba(255, 255, 255, 0.04);
    --navigation-highlight-color: rgba(255, 83, 32, 0.08);

    /* --- Borders --- */
    --active-tab-border-color: #FF5320;
    --border-color: rgba(255, 255, 255, 0.12);

    /* --- Scrollbar --- */
    --color-scrollbar: rgba(255, 255, 255, 0.25);
    --color-scrollbar-track: #1a1814;
}

/* Dark mode sidebar active */
:root.theme-dark .sideMenuPart > .overview a[href].active {
    color: #FF5320 !important;
}

/* Dark mode links */
:root.theme-dark .main-content a {
    color: #FF5320;
}

:root.theme-dark .main-content a:hover {
    color: #FF6B3D;
}

/* Dark mode platform tags */
:root.theme-dark .platform-selector .platform-tag.active,
:root.theme-dark .filter-section .platform-tag[data-active="true"] {
    background-color: #FF5320 !important;
    color: #fff !important;
}

/* Dark mode footer */
:root.theme-dark .footer {
    background-color: #080602 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Dark mode selection */
:root.theme-dark ::selection {
    background-color: rgba(255, 83, 32, 0.3);
}

/* Dark mode nav (stays the same black) */
:root.theme-dark .navigation-wrapper {
    background-color: #080602 !important;
}