/* Font declarations */
@font-face {
    font-family: 'Suisse Intl';
    src: url('../images/SuisseIntl-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse Intl';
    src: url('../images/SuisseIntl-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse Intl';
    src: url('../images/SuisseIntl-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PT Mono';
    src: url('../images/PTMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PT Mono';
    src: url('../images/PTMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Root variables */
:root,
html.js,
html.js.theme-dark {
    --common-ff: 'Suisse Intl', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif;
    --code-ff: 'PT Mono', monospace;
    --color-dark: #f2f2f2 !important;
    --background-color: #ffffff !important;
    --color-text: #262626 !important;
    --link: #0070cc;
    --link-hover: #038eff;
}

/* Override the dark theme background color */
.theme-dark,
html.js.theme-dark,
html.js.theme-dark body {
    --color-background-nav: #f2f2f2 !important;
    --color-background-nav-dt: #f2f2f2 !important;
    --color-text-dt: #262626 !important;
    --color-text: #262626 !important;
    background-color: var(--background-color) !important;
}

/* Target the specific navigation wrapper */
nav#navigation-wrapper {
    background-color: #f2f2f2 !important;
    border-bottom: 1px solid #e6e6e6 !important;
}

/* Apply fonts to elements */
body,
.root,
.content,
.library-name,
.brief,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--common-ff) !important;
}

/* Code elements */
code,
pre,
.symbol,
.token,
[class*="source"],
.parameter code {
    font-family: var(--code-ff) !important;
}

/* Specific text styles */
h1 {
    font-weight: 600 !important;
    font-size: 38px !important;
    line-height: 40px !important;
}

h2 {
    font-weight: 600 !important;
    font-size: 31px !important;
    line-height: 40px !important;
}

.brief {
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 24px !important;
}

.symbol {
    font-size: 13px !important;
    line-height: 16px !important;
}

/* Library name and version */
.library-name {
    color: var(--color-text) !important;
    font-family: var(--common-ff) !important;
    font-weight: 400 !important;
}

/* Platform tags (ANDROID/JVM) */
.platform-hinted[data-platform-hinted=true] {
    background-color: #57A64A !important;
    color: white !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
}

.platform-hinted[data-platform-hinted=true] * {
    background-color: transparent !important;
    color: white !important;
}

/* Search icon and other controls */
.navigation-controls--btn {
    color: var(--color-text) !important;
}

/* Theme toggle */
.theme-toggle {
    color: var(--color-text) !important;
}

/* Override any remaining dark theme elements */
[class*="theme-dark"],
html.js.theme-dark [class*="theme-dark"] {
    background-color: var(--color-dark) !important;
    color: var(--color-text) !important;
}

/* Fix flex container */
.navigation-wrapper > div {
    display: flex;
    align-items: center;
}

/* Version number */
.library-version {
    color: var(--color-text) !important;
    opacity: 0.7;
}

/* Footer styles */
.footer {
    background-color: var(--color-dark) !important;
}

.footer * {
    color: #262626 !important;
}

.footer a {
    color: var(--link) !important;
}

.footer a:hover {
    color: var(--link-hover) !important;
}

/* Copyright text */
.footer > span {
    color: #262626 !important;
}

/* Generated by dokka text */
.footer > div {
    color: #262626 !important;
}

/* Dokka link in footer */
.footer > div > a {
    color: #0070cc !important;
}

.footer > div > a:hover {
    color: #038eff !important;
}

.symbol.monospace {
    color: #262626 !important;
    background-color: #fafafa !important;
}

/* Sidebar navigation buttons */
.toc--button {
    color: #262626 !important;
    background-color: transparent !important;
    border: none !important;
    padding: 8px 16px !important;
    width: 100% !important;
    text-align: left !important;
    cursor: pointer !important;
}

/* Current selection */
.current {
    color: #0070cc !important;
    background-color: #f2f2f2 !important;
}

/* Token styles - consistent across themes */
.token {
    background: transparent !important;
}

.token.function {
    color: #00627a !important;
}

.token.annotation {
    color: #0033b3 !important;
}

.token.builtin {
    color: #067d17 !important;
}

/* Additional token types */
.token.keyword {
    color: #0033b3 !important;
}

.token.string {
    color: #067d17 !important;
}

.token.number {
    color: #871094 !important;
}

.token.comment {
    color: #8c8c8c !important;
}

.token.property {
    color: #871094 !important;
}

.token.operator {
    color: #9a6e3a !important;
}

.token.punctuation {
    color: #999999 !important;
}

/* Ensure token styles persist in dark theme */
html.js.theme-dark .token,
.theme-dark .token {
    background: transparent !important;
}

html.js.theme-dark .token.function,
.theme-dark .token.function {
    color: #00627a !important;
}

html.js.theme-dark .token.annotation,
.theme-dark .token.annotation {
    color: #0033b3 !important;
}

html.js.theme-dark .token.builtin,
.theme-dark .token.builtin {
    color: #067d17 !important;
}

html.js.theme-dark .symbol.monospace,
.theme-dark .symbol.monospace {
    color: #262626 !important;
    background-color: #fafafa !important;
}

.filter-section {
    display: none !important;
}
.navigation-controls--btn_theme {
	display: none !important;
}