@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;
}

/* ── Light mode ─────────────────────────────────────── */
.portal-header {
    background: #323946;                    /* gray-80 */
}

.hosted-api-docs {
    height: calc(100vh - 24px);
}

.branding-container .logo p {
    color: #eaedf2;                         /* gray-20 */
}

body,
.apimatic-widget {
    background-color: #ffffff;              /* gray-00 · background-base */
    color: #1d232f;                         /* gray-90 · content-primary */
}

.side-menu,
.sidebar {
    background-color: #f6f8fa;             /* gray-10 · background-on-base */
}

.side-menu a,
.sidebar a {
    color: #777e8b;                         /* gray-60 · content-secondary */
}

.side-menu a:hover,
.sidebar a:hover,
.side-menu a.active,
.sidebar a.active {
    color: #2770ef;                         /* brand-60 · content-brand */
}

.endpoint-container,
.content-area {
    background-color: #ffffff;              /* gray-00 · background-raised */
}

hr,
.divider {
    border-color: #eaedf2;                  /* gray-20 · border-subtle */
}

input,
select,
textarea {
    background-color: #ffffff;              /* gray-00 */
    color: #1d232f;                         /* gray-90 · content-primary */
    border-color: #c0c6cf;                  /* gray-40 · border-bold */
}

input::placeholder,
textarea::placeholder {
    color: #c0c6cf;                         /* gray-40 · content-tertiary */
}

/* success / warning / error */
.success, .status-success { color: #06bf7f; }   /* green-60 */
.warning, .status-warning { color: #fcc838; }   /* yellow-60 */
.error,   .status-error   { color: #e22b3d; }   /* red-60   */

/* code block */
.AppLayoutCodeBox pre {
    background: #1d232f !important;             /* gray-90 · background-inverse */
}

/* ── Dark mode ──────────────────────────────────────── */
[data-color-mode="dark"] .portal-header {
    background: #2f3137;                    /* dark-gray-15 */
}

[data-color-mode="dark"] .branding-container .logo p {
    color: #dfe0e2;                         /* dark-gray-90 */
}

[data-color-mode="dark"] body,
[data-color-mode="dark"] .apimatic-widget {
    background-color: #1f2024;              /* dark-gray-05 · background-base */
    color: #dfe0e2;                         /* dark-gray-90 · content-primary */
}

[data-color-mode="dark"] .side-menu,
[data-color-mode="dark"] .sidebar {
    background-color: #18191b;              /* dark-gray-00 · background-sunken */
}

[data-color-mode="dark"] .side-menu a,
[data-color-mode="dark"] .sidebar a {
    color: #9c9ea5;                         /* dark-gray-60 · content-secondary */
}

[data-color-mode="dark"] .side-menu a:hover,
[data-color-mode="dark"] .sidebar a:hover,
[data-color-mode="dark"] .side-menu a.active,
[data-color-mode="dark"] .sidebar a.active {
    color: #71a1f4;                         /* brand-50 · content-brand */
}

[data-color-mode="dark"] .endpoint-container,
[data-color-mode="dark"] .content-area {
    background-color: #2f3137;              /* dark-gray-15 · background-raised */
}

[data-color-mode="dark"] hr,
[data-color-mode="dark"] .divider {
    border-color: #34363c;                  /* dark-gray-20 · border-subtle */
}

[data-color-mode="dark"] input,
[data-color-mode="dark"] select,
[data-color-mode="dark"] textarea {
    background-color: #26282c;              /* dark-gray-10 · background-on-base */
    color: #dfe0e2;                         /* dark-gray-90 · content-primary */
    border-color: #60656c;                  /* dark-gray-40 · border-bold */
}

[data-color-mode="dark"] input::placeholder,
[data-color-mode="dark"] textarea::placeholder {
    color: #60656c;                         /* dark-gray-40 · content-tertiary */
}

/* success / warning / error */
[data-color-mode="dark"] .success, [data-color-mode="dark"] .status-success { color: #56d3a8; }  /* green-50 */
[data-color-mode="dark"] .warning, [data-color-mode="dark"] .status-warning { color: #fcd977; }  /* yellow-50 */
[data-color-mode="dark"] .error,   [data-color-mode="dark"] .status-error   { color: #f47e89; }  /* red-50   */

/* code block */
[data-color-mode="dark"] .AppLayoutCodeBox pre {
    background: #18191b !important;             /* dark-gray-00 · background-sunken */
}
.since-beta-tag {
    padding: 1px 5px;
    margin: 0 10px 0 0;
    border-radius: 4px;
    border: 1px solid #707070;
    color: white;
    font-size: 0.8em;
    font-weight: normal;
    background: grey;
}