[data-bs-theme="dark"] {
    /* Optional dark tweak */
    --ink: #e2e8f0;
    --muted: #94a3b8;
    --soft: #0f172a;
    --border: rgba(148,163,184,.18);
    --shadow: 0 14px 34px rgba(0,0,0,.35);
}

:root {
    /* Brand + key Bootstrap hooks */
    --brand: #7859ff;
    /* Map Bootstrap primaries to brand */
    --bs-primary: var(--brand);
    --bs-primary-rgb: 120, 89, 255;
    --bs-primary-dark: #6747ff; /* purple hover/pressed */
    --bs-dark: #1a1a1a; /* body text / headings */
    --bs-muted: #6c757d; /* secondary/supporting text */
    --bs-bg-soft: rgba(120,89,255,.07); /* soft purple wash bg */
    --bs-border-soft: #e5e5e5; /* light border for cards/dividers */
    --bs-page-bg: #ffffff; /* page background */
    --bs-deep-bg: #0f0f10; /* dark blocks */
    --bs-link-color: var(--brand);
    --bs-link-hover-color: #5a4d8e;
    --bs-focus-ring-color: rgba(120, 89, 255, 0.25);
    --bs-btn-focus-shadow-rgb: 120, 89, 255;
    /* Headings and Body */
    --bs-heading-color: #322461;
    --bs-body-color: #718096;
    --bs-border-color: #D0D5DD;
    --bs-body-bg: #ffffff;
    /* Light design tokens you’re using */
    --ink: #101828;
    --muted: #667085;
    --soft: #F9FAFB;
    --border: #D0D5DD;
    --shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    --radius: 18px;
    /* Coral just for buttons */
    --btn-coral: #F06449;
}

/* Accordion theme using brand */
.accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: transparent;
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-border-radius: var(--bs-border-radius-lg);
    --bs-accordion-inner-border-radius: calc(var(--bs-border-radius-lg) - 1px);
    --bs-accordion-btn-color: var(--bs-gray-800);
    --bs-accordion-btn-bg: transparent;
    /* brand-tinted background + color when open */
    --bs-accordion-active-color: var(--bs-primary);
    --bs-accordion-active-bg: rgba(120, 89, 255, 0.06);
    /* focus + outline in brand */
    --bs-accordion-btn-focus-border-color: rgba(120, 89, 255, 0.4);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .15rem rgba(120, 89, 255, 0.25);
    /* icon colors (collapsed + active) */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23667085'%3e%3cpath d='M.5 6.3c.6-.6 1.6-.6 2.3 0l9.3 9.3 9.3-9.3c.6-.6 1.6-.6 2.3 0 .6.6.6 1.6 0 2.3L13.3 18.8c-.6.6-1.6.6-2.3 0L.8 8.5c-.9-.8-.9-1.6-.3-2.2z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237859ff'%3e%3cpath d='M.5 6.3c.6-.6 1.6-.6 2.3 0l9.3 9.3 9.3-9.3c.6-.6 1.6-.6 2.3 0 .6.6.6 1.6 0 2.3L13.3 18.8c-.6.6-1.6.6-2.3 0L.8 8.5c-.9-.8-.9-1.6-.3-2.2z'/%3e%3c/svg%3e");
}

/* Dark mode tweak for icons, if you need it */
[data-bs-theme="dark"] .accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b588f4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}

body {
    color: var(--ink);
}

.small-muted {
    color: var(--muted);
}

.section-label {
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .10em;
    color: var(--muted);
    font-weight: 800;
}

.navbar-glass {
    backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--soft) 80%, transparent);
    border-bottom: 1px solid var(--border);
}

.brand-mark {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 38%, transparent);
    color: var(--brand);
}

.btn-primary {
    --bs-btn-bg: var(--btn-coral);
    --bs-btn-border-color: var(--btn-coral);
    --bs-btn-hover-bg: color-mix(in srgb, var(--btn-coral) 86%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--btn-coral) 86%, #000);
}

.btn-outline-primary {
    /* Resting state: white bg, purple text + border */
    --bs-btn-color: var(--btn-coral);
    --bs-btn-border-color: var(--btn-coral);
    --bs-btn-bg: transparent;
    /* Hover: solid purple with white text */
    --bs-btn-hover-bg: color-mix(in srgb, var(--btn-coral) 86%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--btn-coral) 86%, #000);
    --bs-btn-hover-color: #fff;
    /* Active / focus for consistency */
    --bs-btn-active-bg: var(--btn-coral);
    --bs-btn-active-border-color: var(--btn-coral);
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 120, 89, 255;
}

/* Solid coral button */
.btn-coral {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--btn-coral);
    --bs-btn-border-color: var(--btn-coral);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--btn-coral) 86%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--btn-coral) 86%, #000);
    --bs-btn-focus-shadow-rgb: var(--btn-coral-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--btn-coral) 78%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--btn-coral) 78%, #000);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--btn-coral);
    --bs-btn-disabled-border-color: var(--btn-coral);
}

/* Outline coral button */
.btn-outline-coral {
    --bs-btn-color: var(--btn-coral);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--btn-coral);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--btn-coral);
    --bs-btn-hover-border-color: var(--btn-coral);
    --bs-btn-focus-shadow-rgb: var(--btn-coral-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--btn-coral) 86%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--btn-coral) 86%, #000);
    --bs-btn-disabled-color: var(--btn-coral);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--btn-coral);
}

.card-soft {
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--soft) 75%, transparent);
    border-radius: var(--radius);
}

/* Modal inherits the soft card look */
.modal-content.card-soft {
    box-shadow: var(--shadow);
}

.modal-content {
    box-shadow: var(--shadow);
}

.section-label {
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .10em;
    color: var(--muted);
    font-weight: 800;
}

.lift {
    transition: transform .15s ease, box-shadow .15s ease;
}

    .lift:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

/* Dark band used for footer or hero strips */
.section-dark {
    background-color: #020617; /* deep slate */
    color: #e2e8f0; /* light text */
    border-top: 1px solid rgba(148,163,184,.35);
}

    .section-dark .small-muted {
        color: #94A3B8;
    }

    .section-dark .link-secondary,
    .section-dark a.text-decoration-none {
        color: #c4b5fd;
    }

        .section-dark .link-secondary:hover,
        .section-dark a.text-decoration-none:hover {
            color: #e0e7ff;
        }

    /* keep brand-mark readable on dark */
    .section-dark .brand-mark {
        background: color-mix(in srgb, var(--brand) 22%, transparent);
        border-color: color-mix(in srgb, var(--brand) 55%, transparent);
        color: #e0e7ff;
    }

    /* badge-beta still visible on dark */
    .section-dark .badge-beta {
        border-color: color-mix(in srgb, var(--brand) 40%, transparent);
        background: color-mix(in srgb, var(--brand) 18%, transparent);
        color: #e2e8f0;
    }

.icon-pill {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand) 38%, transparent);
    color: var(--brand);
    flex: 0 0 auto;
}

.badge-beta {
    border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    color: var(--ink);
}

[data-bs-theme="dark"] .badge-beta {
    color: #e2e8f0;
}

.kbdish {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .86rem;
    padding: .12rem .45rem;
    border-radius: .55rem;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--soft) 85%, transparent);
}

.divider {
    border-top: 1px solid var(--border);
}

/* Brand text color helpers */
.text-peppermint,
.text-pep,
.text-brand {
    color: var(--brand) !important;
}

/* Eyebrow/section label */
.sm-title {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    display: inline-block;
    margin-bottom: .5rem;
    color: var(--brand);
}

code, pre code {
    font-size: 0.85rem;
}

pre {
    border-radius: 12px;
}

.modal-content {
    border-radius: var(--radius);
}

.card {
    border-radius: var(--radius);
}

/* NAV THEME */

/* Base link color in navbar */
.navbar .nav-link {
    color: var(--bs-gray-700);
}

    /* Hover / focus / active flash color */
    .navbar .nav-link:hover,
    .navbar .nav-link:focus,
    .navbar .nav-link:active {
        color: var(--btn-coral) !important; /* or var(--bs-primary) */
    }

    /* The “current page” link */
    .navbar .nav-link.active,
    .navbar .nav-link.show {
        color: var(--btn-coral) !important; /* or var(--bs-primary) */
    }

    .navbar .nav-link.active {
        background-color: color-mix(in srgb, var(--btn-coral) 12%, transparent);
        border-radius: 999px; /* optional pill */
    }

.navbar .nav-link {
    -webkit-tap-highlight-color: color-mix(in srgb, var(--btn-coral) 25%, transparent);
    /* or: -webkit-tap-highlight-color: transparent; */
}

/* Use brand color for dropdown links (Bootstrap 5.3 variables) */
/* Use coral / brand for dropdown links */
.dropdown-menu {
    --bs-dropdown-link-color: var(--bs-gray-800);
    --bs-dropdown-link-hover-color: var(--btn-coral);
    --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--btn-coral) 8%, #fff);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--btn-coral);
}

/* Fallback / extra safety for the flash on click */
.dropdown-item.active,
.dropdown-item:active {
    color: #fff !important;
    background-color: var(--btn-coral) !important;
}

/* Semantic Coherence Score Styling */
.coherence-gauge {
    position: relative;
    display: inline-block;
}

    .coherence-gauge svg {
        transform: rotate(-90deg);
    }

.coherence-score-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.coherence-interpretation {
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Zone distribution progress bars */
.zone-progress {
    height: 30px;
    font-weight: 600;
}

/* === Placeholder (with optional background image) === */
.img-placeholder {
    border: 1px solid #d6d6d6;
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16/9;
    min-height: 280px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.25rem;
    color: var(--muted, #6c757d);
    background: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--brand, #F06449) 18%, transparent), transparent 45%), linear-gradient(135deg, color-mix(in srgb, var(--soft, #f8f9fa) 85%, transparent), transparent);
}

    /* === Overlay positioning options === */
    .img-placeholder.overlay-top-left {
        place-items: start; /* top-left in grid */
        text-align: left;
    }

    /* Optional: tighter padding if you like in top-left mode */
    .img-placeholder.overlay-top-left {
        padding: 1rem;
    }

    .img-placeholder.overlay-top-center {
        place-items: start center; /* align-items (y) = start, justify-items (x) = center */
        text-align: center;
    }

        /* Optional: if your overlay content shouldn’t stretch */
        .img-placeholder.overlay-top-center > * {
            width: max-content;
            max-width: 100%;
        }

    /* if you want a background image while still keeping text */
    .img-placeholder.has-bg {
        position: relative;
    }

        .img-placeholder.has-bg::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image: var(--bg);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: .90; /* tweak or remove */
        }

        .img-placeholder.has-bg > * {
            position: relative;
            z-index: 1;
        }

        /* Optional: little glass pill style for kbdish on photos */
        .img-placeholder.has-bg .kbdish {
            background: rgba(0,0,0,.35);
            border: 1px solid rgba(255,255,255,.18);
            color: #fff;
        }

/* === Option: pure image (no overlay, no opacity) === */
.img-shot {
    border: 1px solid #d6d6d6;
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16/9;
    min-height: 280px;
    background-image: var(--bg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

    /* Fit modes (override default) */
    .img-shot.is-cover {
        background-size: cover;
    }

    .img-shot.is-contain {
        background-size: contain;
        background-color: #fff;
    }

    .img-shot.ar-16x9 {
        aspect-ratio: 16/9;
    }

    .img-shot.ar-4x3 {
        aspect-ratio: 4/3;
    }

    /* Optional: if you use contain, you may want a taller minimum */
    .img-shot.is-contain {
        min-height: 320px;
    }


/* === Image Rotator (2 images) === */
.img-rotator {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    min-height: 280px;
    overflow: hidden;
    border: 1px solid #d6d6d6;
    border-radius: 14px;
}

    /* optional: slight dark tint for text readability */
    .img-rotator::marker { /* no-op: just to avoid accidental copy issues */
    }

    .img-rotator::before,
    .img-rotator::after {
        content: "";
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* base = image 1 (always present) */
    .img-rotator::before {
        background-image: var(--img1);
        opacity: 1;
    }

    /* image 2 fades over image 1 */
    .img-rotator::after {
        background-image: var(--img2);
        opacity: 0;
        animation: fadeOver 6s infinite;
    }

    /* optional: overlay gradient behind text for readability */
    .img-rotator .rotator-overlay::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.20) );
        z-index: -1;
    }

@keyframes fadeOver {
    0%, 45% {
        opacity: 0;
    }

    55%, 95% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.rotator-overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.25rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* Only this one alert */
.alert.alert-opacity {
    /* keep Bootstrap's alert variables, just change alpha */
    background-color: rgba(from var(--bs-alert-bg) r g b / .78);
    border-color: rgba(from var(--bs-alert-border-color) r g b / .78);
}