/* Sitefluence brand, Warm Graphite and Amber, mapped onto Bootstrap's color-mode variables. */
:root,
[data-bs-theme="light"] {
    --sf-primary: #b45309;
    --sf-primary-dark: #92400e;
    --sf-primary-light: #d97706;
    --sf-bg: #faf9f7;
    --sf-card: #f3f1ec;
    --sf-elevated: #eae7df;
    --sf-text: #38352f;
    --sf-muted: #7c776c;
    --sf-heading: #1f1d19;
    --sf-border: #e7e3da;
    --sf-border-light: #d5cfc2;
    --sf-raised: #ffffff;
    --sf-border-lift: rgb(180 83 9 / 0.45);
    /* Depth: the elevation a surface rests, lifts, or floats at, the ring a focused control wears, and the scrim under a dialog. */
    --sf-elevation-1: 0 1px 2px rgb(31 29 25 / 0.05), 0 1px 3px rgb(31 29 25 / 0.07);
    --sf-elevation-2: 0 8px 20px rgb(31 29 25 / 0.1), 0 2px 6px rgb(31 29 25 / 0.06);
    --sf-elevation-3: 0 24px 48px rgb(31 29 25 / 0.16), 0 8px 16px rgb(31 29 25 / 0.08);
    --sf-focus-ring: 0 0 0 0.25rem rgb(180 83 9 / 0.2);
    --sf-scrim: rgb(31 29 25 / 0.5);
}

/* Dark elevation is a lighter surface under a top highlight; a heavier shadow would only smear black on black. */
[data-bs-theme="dark"] {
    --sf-bg: #201e1c;
    --sf-card: #292624;
    --sf-elevated: #35312d;
    --sf-text: #e8e5e0;
    --sf-muted: #a39d92;
    --sf-heading: #f5f3ef;
    --sf-border: #35312d;
    --sf-border-light: #46413b;
    --sf-raised: #302d2a;
    --sf-border-lift: rgb(217 119 6 / 0.5);
    --sf-elevation-1: inset 0 1px 0 rgb(255 255 255 / 0.035);
    --sf-elevation-2: 0 8px 20px rgb(0 0 0 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.05);
    --sf-elevation-3: 0 24px 48px rgb(0 0 0 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.06);
    --sf-focus-ring: 0 0 0 0.25rem rgb(217 119 6 / 0.3);
    --sf-scrim: rgb(0 0 0 / 0.6);
}

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sf-font-label: "Nunito Sans", var(--bs-font-sans-serif);
    --bs-primary: var(--sf-primary);
    --bs-primary-rgb: 180, 83, 9;
    --bs-body-bg: var(--sf-bg);
    --bs-body-color: var(--sf-text);
    --bs-emphasis-color: var(--sf-heading);
    --bs-heading-color: var(--sf-heading);
    --bs-secondary-color: var(--sf-muted);
    --bs-secondary-bg: var(--sf-card);
    --bs-tertiary-bg: var(--sf-elevated);
    --bs-border-color: var(--sf-border);
    --bs-link-color: var(--sf-primary);
    --bs-link-color-rgb: 180, 83, 9;
    --bs-link-hover-color: var(--sf-primary-dark);
    --bs-link-hover-color-rgb: 146, 64, 14;
    /* Radius: one per kind of thing, a control you press or type in, a well or alert inside a card, and a card or dialog. */
    --sf-radius-control: 0.375rem;
    --sf-radius-well: 0.5rem;
    --sf-radius-card: 0.75rem;
    /* Motion: hover, focus, and a lift take the quick beat, a dialog entering the slow one, and both share one curve. */
    --sf-motion-quick: 150ms;
    --sf-motion-slow: 300ms;
    --sf-motion-ease: cubic-bezier(0.2, 0, 0, 1);
    --sf-transition: var(--sf-motion-quick) var(--sf-motion-ease);
    --sf-lift: translateY(-2px);
    /* Bootstrap's own steps read the scale, so its components and utilities land on it without a rule each. */
    --bs-border-radius-sm: var(--sf-radius-control);
    --bs-border-radius: var(--sf-radius-control);
    --bs-border-radius-lg: var(--sf-radius-well);
    --bs-border-radius-xl: var(--sf-radius-card);
    --bs-box-shadow-sm: var(--sf-elevation-1);
    --bs-box-shadow: var(--sf-elevation-2);
    --bs-box-shadow-lg: var(--sf-elevation-3);
}

/* Motion is a courtesy, never a requirement: a reader who asked for less gets every end state without the ride. */
@media (prefers-reduced-motion: reduce) {
    :root,
    [data-bs-theme="light"],
    [data-bs-theme="dark"] {
        --sf-motion-quick: 0ms;
        --sf-motion-slow: 0ms;
        --sf-lift: none;
    }
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-4 {
    font-family: var(--sf-font-label);
}

.btn-primary {
    --bs-btn-bg: var(--sf-primary);
    --bs-btn-border-color: var(--sf-primary);
    --bs-btn-hover-bg: var(--sf-primary-dark);
    --bs-btn-hover-border-color: var(--sf-primary-dark);
    --bs-btn-active-bg: var(--sf-primary-dark);
    --bs-btn-active-border-color: var(--sf-primary-dark);
    --bs-btn-disabled-bg: var(--sf-primary-light);
    --bs-btn-disabled-border-color: var(--sf-primary-light);
    --bs-btn-focus-shadow-rgb: 180, 83, 9;
}

.btn-outline-secondary {
    --bs-btn-color: var(--sf-text);
    --bs-btn-border-color: var(--sf-border-light);
    --bs-btn-hover-color: var(--sf-heading);
    --bs-btn-hover-bg: var(--sf-elevated);
    --bs-btn-hover-border-color: var(--sf-border-light);
    --bs-btn-active-color: var(--sf-heading);
    --bs-btn-active-bg: var(--sf-elevated);
    --bs-btn-active-border-color: var(--sf-border-light);
}

/* Every Bootstrap control moves at the scale's beat; Bootstrap's own list is restated so a reader sees what animates. */
.btn,
.form-control,
.form-select,
.form-check-input,
.nav-link,
.btn-close,
.list-group-item-action {
    transition: color var(--sf-transition), background-color var(--sf-transition), border-color var(--sf-transition), box-shadow var(--sf-transition), opacity var(--sf-transition);
}

/* Bootstrap declares a card shadow but never draws one, so the card draws the scale's itself. */
.card {
    --bs-card-bg: var(--sf-card);
    --bs-card-border-color: var(--sf-border);
    --bs-card-border-radius: var(--sf-radius-card);
    --bs-card-inner-border-radius: calc(var(--sf-radius-card) - var(--bs-border-width));
    box-shadow: var(--sf-elevation-1);
}

.site-header {
    background-color: var(--sf-bg);
}

.site-brand {
    display: inline-flex;
    align-items: center;
    transition: opacity var(--sf-transition);
}

.site-brand:hover {
    opacity: 0.85;
}

.brand-logo {
    display: block;
    height: 1.75rem;
    width: auto;
}

/* A header too narrow for the wordmark drops it; the mark alone still reads as fleet. */
.brand-mark {
    display: none;
    height: 1.75rem;
    width: auto;
}

@media (max-width: 575.98px) {
    .site-brand .brand-logo {
        display: none;
    }

    .site-brand .brand-mark {
        display: block;
    }
}


.powered-by {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--sf-muted);
    font-size: 0.75rem;
    text-decoration: none;
    transition: opacity var(--sf-transition);
}

.powered-by:hover {
    color: var(--sf-muted);
    opacity: 0.8;
}

.powered-by img {
    height: 1.25rem;
    width: auto;
}

/* The light logo sits on dark backgrounds and the dark logo on light ones. */
[data-bs-theme="light"] .logo-on-dark,
[data-bs-theme="dark"] .logo-on-light {
    display: none;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.5rem;
}

.theme-toggle .icon-sun,
[data-bs-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

[data-bs-theme="dark"] .theme-toggle .icon-sun {
    display: inline;
}

.eyebrow {
    letter-spacing: 0.08em;
}

.hero {
    padding: 5rem 0 4rem;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--sf-primary);
    color: #fff;
    font-family: var(--sf-font-label);
    font-weight: 700;
}

/* A knowledgebase page is a measure of prose in the brand's faces; code keeps the mono stack and sits in its own well. */
.kb-page {
    --bs-code-color: var(--sf-heading);
    max-width: 44rem;
}

.kb-entry + .kb-entry {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--sf-border);
}

.kb-article :is(h2, h3, h4) {
    margin-top: 2rem;
}

.kb-article pre {
    padding: 1rem;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-well);
    background-color: var(--sf-card);
}

.kb-article :not(pre) > code {
    padding: 0.125rem 0.25rem;
    border-radius: var(--sf-radius-control);
    background-color: var(--sf-card);
}

.kb-article img {
    max-width: 100%;
    height: auto;
}

.kb-article table {
    width: 100%;
    margin-bottom: 1rem;
}

.kb-article th,
.kb-article td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--sf-border);
    text-align: left;
    vertical-align: top;
}

.kb-article blockquote {
    margin: 0 0 1rem;
    padding-left: 1rem;
    border-left: 3px solid var(--sf-primary);
    color: var(--sf-muted);
}

/* Bootstrap hardcodes its own blue on the focus ring; the brand takes it back. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-focus-ring-color: rgb(180 83 9 / 0.25);
}

/* Nunito Sans is the labelling face: headings, buttons, tabs, badges, and the labels over fields.
   It stays out of anything typed into or read as code, where Inter and the mono stack separate better. */
.btn {
    --bs-btn-font-family: var(--sf-font-label);
    --bs-btn-font-weight: 500;
}

.nav-tabs .nav-link,
.badge,
.form-label,
.alert-heading,
legend {
    font-family: var(--sf-font-label);
}

.badge,
.step-number {
    font-variant-numeric: tabular-nums;
}

.eyebrow {
    font-weight: 600;
}