:root {
    /* background */
    --rd-sys-color-background-base:             #ffffff;
    --rd-sys-color-background-on-base:          #f6f8fa;
    --rd-sys-color-background-inverse:          #1d232f;
    --rd-sys-color-background-secondary-action: #eaedf2;
    --rd-sys-color-background-secondary-hover:  #dbdfe7;
    --rd-sys-color-background-ghost-hover:      rgba(192, 198, 207, 0.12);
    --rd-sys-color-background-ghost-highlight:  rgba(113, 161, 244, 0.12);

    /* content */
    --rd-sys-color-content-primary:   #1d232f;
    --rd-sys-color-content-secondary: #777e8b;
    --rd-sys-color-content-tertiary:  #c0c6cf;
    --rd-sys-color-content-inverse:   #ffffff;
    --rd-sys-color-content-brand:     #2770ef;
    --rd-sys-color-content-failure:   #e22b3d;

    /* border */
    --rd-sys-color-border-subtle:     #eaedf2;
    --rd-sys-color-border-bold:       #c0c6cf;
    --rd-sys-color-border-focus:      #71a1f4;
}

[data-theme='dark'] {
    /* background */
    --rd-sys-color-background-base:             #1F2024;
    --rd-sys-color-background-on-base:          #26282C;
    --rd-sys-color-background-inverse:          #dfe0e2;
    --rd-sys-color-background-secondary-action: #34363C;
    --rd-sys-color-background-secondary-hover:  #464A4E;
    --rd-sys-color-background-ghost-hover:      rgba(192, 198, 207, 0.12);
    --rd-sys-color-background-ghost-highlight:  rgba(113, 161, 244, 0.12);

    /* content */
    --rd-sys-color-content-primary:   #dfe0e2;
    --rd-sys-color-content-secondary: #9C9EA5;
    --rd-sys-color-content-tertiary:  #60656c;
    --rd-sys-color-content-inverse:   #1F2024;
    --rd-sys-color-content-brand:     #71a1f4;
    --rd-sys-color-content-failure:   #f47e89;

    /* border */
    --rd-sys-color-border-subtle:     #34363C;
    --rd-sys-color-border-bold:       #60656c;
    --rd-sys-color-border-focus:      #2770ef;
}

/* ============================================================ */

@font-face {
    font-family: Optimo-Plain;
    src: url('../fonts/optimo/Plain-Light.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Optimo-Plain;
    src: url('../fonts/optimo/Plain-LightIta.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: Optimo-Plain;
    src: url('../fonts/optimo/Plain-Regular.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Optimo-Plain;
    src: url('../fonts/optimo/Plain-RegularIta.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: Optimo-Plain;
    src: url('../fonts/optimo/Plain-Medium.ttf') format('truetype'); /* [1] */
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Optimo-Plain;
    src: url('../fonts/optimo/Plain-MediumIta.ttf') format('truetype'); /* [1] */
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: BB-Roller-Regular;
    src: url('../fonts/bb-roller/BB-Roller-Mono-Regular-fontlab.ttf')
        format('truetype'); /* [1] */
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: BB-Roller-Mono-semibold;
    src: url('../fonts/bb-roller/BB-Roller-Mono-ProTx-semibold.otf')
        format('truetype'); /* [1] */
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

*:not(pre):not(pre *):not(.body-response):not(.body-response *) {
    font-family: Optimo-Plain, sans-serif !important;
}

strong {
    font-weight: 700 !important;
}

/* ── Portal header & branding ───────────────────────────────────────────── */

.portal-header {
    background: var(--rd-sys-color-background-inverse);
}

.branding-container,
.branding-container.apimatic-background-color {
    background: var(--rd-sys-color-background-inverse);
}

.branding-container .logo p,
.apimatic-text-color {
    color: var(--rd-sys-color-content-inverse);
}

/* ── Main docs container ────────────────────────────────────────────────── */

.hosted-api-docs {
    height: calc(100vh - 24px);
    background: var(--rd-sys-color-background-base);
    color: var(--rd-sys-color-content-primary);
}

/* ── Left navigation sidebar ────────────────────────────────────────────── */

#left-navbar-parent {
    background: var(--rd-sys-color-background-on-base);
    border-right: 1px solid var(--rd-sys-color-border-subtle);
}

/* ── Navigation menu (rc-menu) ──────────────────────────────────────────── */

.rc-menu {
    background: var(--rd-sys-color-background-on-base);
    color: var(--rd-sys-color-content-primary);
    border-color: var(--rd-sys-color-border-subtle);
}

.rc-menu-item-group-title {
    color: var(--rd-sys-color-content-tertiary);
}

.rc-menu-item {
    color: var(--rd-sys-color-content-secondary);
}

.rc-menu-item:hover,
.rc-menu-submenu-title:hover {
    background: var(--rd-sys-color-background-ghost-hover);
    color: var(--rd-sys-color-content-primary);
}

.rc-menu-item-selected {
    background: var(--rd-sys-color-background-ghost-highlight);
    color: var(--rd-sys-color-content-brand);
}

.rc-menu-submenu-title {
    color: var(--rd-sys-color-content-secondary);
}

/* ── Content headings ───────────────────────────────────────────────────── */

.heading-markdown {
    color: var(--rd-sys-color-content-primary);
    border-bottom: 1px solid var(--rd-sys-color-border-subtle);
}

.heading-link {
    color: var(--rd-sys-color-content-primary);
}

/* ── Form elements (rjsf) ───────────────────────────────────────────────── */

.label-text {
    color: var(--rd-sys-color-content-primary);
}

.rjsf-field-description {
    color: var(--rd-sys-color-content-secondary);
}

.rjsf-param-type,
.rjsf-base-type,
.rjsf-object-type {
    color: var(--rd-sys-color-content-tertiary);
}

.rjsf-form-control {
    background: var(--rd-sys-color-background-base);
    color: var(--rd-sys-color-content-primary);
    border: 1px solid var(--rd-sys-color-border-subtle);
}

.rjsf-form-control:focus {
    border-color: var(--rd-sys-color-border-focus);
    outline: none;
}

.rjsf-element-required {
    color: var(--rd-sys-color-content-failure);
}

.rjsf-odd {
    background: var(--rd-sys-color-background-base);
}

.rjsf-even,
.rjsf-even-bg {
    background: var(--rd-sys-color-background-on-base);
}

.rjsf-odd-bg {
    background: var(--rd-sys-color-background-base);
}

.rjsf-btn.rjsf-btn-default {
    background: var(--rd-sys-color-background-secondary-action);
    color: var(--rd-sys-color-content-primary);
    border: 1px solid var(--rd-sys-color-border-subtle);
}

.rjsf-btn.rjsf-btn-default:hover {
    background: var(--rd-sys-color-background-secondary-hover);
}

/* ── Beta / since tag ───────────────────────────────────────────────────── */

.since-beta-tag {
    padding: 1px 5px;
    margin: 0 10px 0 0;
    border-radius: 4px;
    border: 1px solid var(--rd-sys-color-border-bold);
    color: var(--rd-sys-color-content-secondary);
    font-size: 0.8em;
    font-weight: normal;
    background: var(--rd-sys-color-background-on-base);
}

/* ── Portal footer ──────────────────────────────────────────────────────── */

.portal-footer {
    background: var(--rd-sys-color-background-on-base);
    border-top: 1px solid var(--rd-sys-color-border-subtle);
}

/* ── Page root ──────────────────────────────────────────────────────────── */

body,
html {
    background-color: var(--rd-sys-color-background-base);
    color: var(--rd-sys-color-content-primary);
}

/* ── Top navigation bar ─────────────────────────────────────────────────── */

.NavBar-Wrapper,
.Sub-NavBar-Wrapper {
    background: var(--rd-sys-color-background-on-base);
    border-bottom: 1px solid var(--rd-sys-color-border-subtle);
}

.platform-selector-wrapper {
    background: var(--rd-sys-color-background-on-base);
}

/* ── "Built with APIMatic" attribution link ─────────────────────────────── */

.apimatic-attribute,
.apimatic-attribute strong {
    color: var(--rd-sys-color-content-tertiary);
}

/* ── Code blocks (override inline hljs styles) ──────────────────────────── */

/* Light-theme code blocks (response examples, HTTP URL) */
pre {
    background: var(--rd-sys-color-background-on-base) !important;
    color: var(--rd-sys-color-content-primary) !important;
    border: 1px solid var(--rd-sys-color-border-subtle);
}

/* Dark terminal/bash blocks always stay dark */
.code-block-code pre {
    background: var(--rd-sys-color-background-inverse) !important;
    color: var(--rd-sys-color-content-inverse) !important;
    border: none;
}

/* ── Config section (inline white bg) ───────────────────────────────────── */

[data-testid="config-section"] {
    background-color: var(--rd-sys-color-background-base) !important;
}

/* ── Theme toggle & Select dropdowns (theme_select__ + react-select__) ───── */

.theme_select__control,
.react-select__control {
    background: var(--rd-sys-color-background-base) !important;
    border-color: var(--rd-sys-color-border-subtle) !important;
    color: var(--rd-sys-color-content-primary) !important;
}

.theme_select__control:hover,
.react-select__control:hover {
    border-color: var(--rd-sys-color-border-bold) !important;
}

.theme_select__single-value,
.react-select__single-value {
    color: var(--rd-sys-color-content-primary) !important;
}

.theme_select__value-container,
.react-select__value-container {
    color: var(--rd-sys-color-content-primary);
}

.theme_select__placeholder,
.react-select__placeholder {
    color: var(--rd-sys-color-content-tertiary) !important;
}

.theme_select__indicator,
.react-select__indicator,
.theme_select__indicator-separator,
.react-select__indicator-separator {
    color: var(--rd-sys-color-content-secondary) !important;
    background-color: var(--rd-sys-color-border-subtle);
}

.theme_select__menu,
.react-select__menu {
    background: var(--rd-sys-color-background-base) !important;
    border: 1px solid var(--rd-sys-color-border-subtle) !important;
    color: var(--rd-sys-color-content-primary) !important;
}

.theme_select__option,
.react-select__option {
    background: var(--rd-sys-color-background-base);
    color: var(--rd-sys-color-content-primary);
}

.theme_select__option:hover,
.react-select__option:hover,
.theme_select__option--is-focused,
.react-select__option--is-focused {
    background: var(--rd-sys-color-background-ghost-hover) !important;
}

.theme_select__option--is-selected,
.react-select__option--is-selected {
    background: var(--rd-sys-color-background-ghost-highlight) !important;
    color: var(--rd-sys-color-content-brand) !important;
}

/* ── rjsf additional elements ───────────────────────────────────────────── */

.rjsf-content {
    background: var(--rd-sys-color-background-base);
    color: var(--rd-sys-color-content-primary);
}

.rjsf-object-header {
    border-bottom: 1px solid var(--rd-sys-color-border-subtle);
}

.rjsf-hand,
.rjsf-no-checkbox {
    color: var(--rd-sys-color-content-primary);
}

.rjsf-info-tooltip-description {
    color: var(--rd-sys-color-content-secondary);
}

.rjsf-tooltip {
    background: var(--rd-sys-color-background-inverse);
    color: var(--rd-sys-color-content-inverse);
    border-radius: 4px;
}

.view-json-icon {
    color: var(--rd-sys-color-content-secondary);
}

.nullable-checkbox {
    color: var(--rd-sys-color-content-primary);
}

.unchecked {
    color: var(--rd-sys-color-content-tertiary);
}

.checked {
    color: var(--rd-sys-color-content-brand);
}