/* S3U Gate - brand: fonts, colors and the Bootstrap primary color
 *
 * Loaded right after bootstrap.min.css and before app.css. This is the only place where the brand
 * colors and fonts are set; everything else uses the variables below.
 * Fonts are self-hosted (assets/fonts, SIL Open Font License), nothing is loaded from Google.
 */

/* ---------- Fonts ---------- */
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../fonts/SpaceGrotesk-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../../fonts/SpaceGrotesk-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../../fonts/SpaceGrotesk-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../../fonts/JetBrainsMono-Medium.woff2") format("woff2");
}

/* ---------- Brand colors ---------- */
:root,
[data-bs-theme="light"] {
    --s3u-teal: #0E9F8E;           /* buttons, active menu, focus, the ³ and the corner brackets */
    --s3u-teal-rgb: 14, 159, 142;
    --s3u-teal-hover: #0B8577;
    --s3u-teal-text: #0B7F72;      /* teal for small text (links) on light backgrounds: 4.9:1 contrast */
    --s3u-teal-soft: rgba(14, 159, 142, .10);
    --s3u-ink: #0E1A24;            /* main text, headings, dark surfaces */
    --s3u-ink-rgb: 14, 26, 36;
    --s3u-slate: #4A5560;          /* secondary text, labels */
    --s3u-white: #FFFFFF;
    --s3u-slate-light: #B7C0C8;    /* secondary text on dark backgrounds */

    --s3u-font-sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --s3u-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

[data-bs-theme="dark"] {
    --s3u-teal-hover: #13B7A3;
    --s3u-teal-text: #2CC3AE;      /* lighter teal for text on dark backgrounds */
    --s3u-teal-soft: rgba(14, 159, 142, .16);
}

/* ---------- Bootstrap: primary = teal, fonts ---------- */
[data-bs-theme] {
    --bs-primary: var(--s3u-teal);
    --bs-primary-rgb: var(--s3u-teal-rgb);
    --bs-primary-text-emphasis: var(--s3u-teal-text);
    --bs-primary-bg-subtle: var(--s3u-teal-soft);
    --bs-primary-border-subtle: rgba(var(--s3u-teal-rgb), .35);
    --bs-link-color: var(--s3u-teal-text);
    --bs-link-color-rgb: var(--s3u-teal-rgb);
    --bs-link-hover-color: var(--s3u-teal-hover);
    --bs-focus-ring-color: rgba(var(--s3u-teal-rgb), .35);
    --bs-body-font-family: var(--s3u-font-sans);
    --bs-font-sans-serif: var(--s3u-font-sans);
    --bs-font-monospace: var(--s3u-font-mono);
}

[data-bs-theme="light"] {
    --bs-heading-color: var(--s3u-ink);
}

.btn-primary {
    --bs-btn-color: var(--s3u-white);
    --bs-btn-bg: var(--s3u-teal);
    --bs-btn-border-color: var(--s3u-teal);
    --bs-btn-hover-color: var(--s3u-white);
    --bs-btn-hover-bg: var(--s3u-teal-hover);
    --bs-btn-hover-border-color: var(--s3u-teal-hover);
    --bs-btn-active-color: var(--s3u-white);
    --bs-btn-active-bg: var(--s3u-teal-hover);
    --bs-btn-active-border-color: var(--s3u-teal-hover);
    --bs-btn-disabled-color: var(--s3u-white);
    --bs-btn-disabled-bg: var(--s3u-teal);
    --bs-btn-disabled-border-color: var(--s3u-teal);
    --bs-btn-focus-shadow-rgb: var(--s3u-teal-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--s3u-teal-text);
    --bs-btn-border-color: var(--s3u-teal);
    --bs-btn-hover-color: var(--s3u-white);
    --bs-btn-hover-bg: var(--s3u-teal);
    --bs-btn-hover-border-color: var(--s3u-teal);
    --bs-btn-active-color: var(--s3u-white);
    --bs-btn-active-bg: var(--s3u-teal-hover);
    --bs-btn-active-border-color: var(--s3u-teal-hover);
    --bs-btn-disabled-color: var(--s3u-teal-text);
    --bs-btn-disabled-border-color: var(--s3u-teal);
    --bs-btn-focus-shadow-rgb: var(--s3u-teal-rgb);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--s3u-teal-rgb), .7);
    box-shadow: 0 0 0 .2rem rgba(var(--s3u-teal-rgb), .2);
}

.form-check-input:checked {
    background-color: var(--s3u-teal);
    border-color: var(--s3u-teal);
}

.form-check-input:focus {
    border-color: rgba(var(--s3u-teal-rgb), .7);
    box-shadow: 0 0 0 .2rem rgba(var(--s3u-teal-rgb), .2);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--s3u-teal);
    --bs-nav-pills-link-active-color: var(--s3u-white);
}

.pagination {
    --bs-pagination-color: var(--s3u-teal-text);
    --bs-pagination-hover-color: var(--s3u-teal-hover);
    --bs-pagination-focus-color: var(--s3u-teal-hover);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--s3u-teal-rgb), .25);
    --bs-pagination-active-bg: var(--s3u-teal);
    --bs-pagination-active-border-color: var(--s3u-teal);
}

.progress {
    --bs-progress-bar-bg: var(--s3u-teal);
}

/* a visible teal outline for keyboard users, on every focusable element */
:focus-visible {
    outline: 2px solid var(--s3u-teal);
    outline-offset: 2px;
}

/* ---------- Typography ---------- */
body {
    font-family: var(--s3u-font-sans);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--s3u-font-sans);
    font-weight: 700;
    letter-spacing: -.01em;
}

/* IP addresses, serials, fingerprints, keys, ports, log output, CLI examples */
code,
kbd,
pre,
samp,
.font-mono {
    font-family: var(--s3u-font-mono);
}

/* the logos: light version on light backgrounds, white version in dark mode */
[data-bs-theme] .brand-logo-dark,
[data-bs-theme="dark"] .brand-logo-light {
    display: none;
}

[data-bs-theme="dark"] .brand-logo-dark {
    display: inline-block;
}