/*
 * bs5-overrides.css
 */


/* ============================================================
   1. BOOTSTRAP GLOBAL ROOT VARS
   Remaps every --bs-* token Bootstrap sets in _root.scss
   ============================================================ */

:root,
[data-bs-theme="light"] {
    /* ── Named palette swatches ─────────────────────────────── */
    --bs-blue: var(--color-blue);
    --bs-indigo: var(--color-indigo);
    --bs-purple: var(--color-purple);
    --bs-pink: var(--color-pink);
    --bs-red: var(--color-red);
    --bs-orange: var(--color-orange);
    --bs-yellow: var(--brand-warning-600);
    --bs-green: var(--color-green);
    --bs-teal: var(--color-teal);
    --bs-cyan: var(--color-cyan);
    --bs-white: var(--color-on-accent);
    --bs-black: var(--color-black);
    /* ── Theme colors ───────────────────────────────────────── */
    --bs-primary: var(--color-accent);
    --bs-secondary: var(--brand-secondary-700);
  /*  --bs-success: var(--brand-success-600);
    --bs-info: var(--brand-info-600);
    --bs-warning: var(--brand-warning-600);
    --bs-danger: var(--brand-danger-600);*/
    --bs-light: var(--color-bg-subtle);
    --bs-dark: var(--brand-dark-600);
    /* ── Theme emphasis (darker text on subtle bg) ──────────── */
    --bs-primary-text-emphasis: var(--brand-primary-900);
    --bs-secondary-text-emphasis: var(--brand-secondary-900);
 /*   --bs-success-text-emphasis: var(--brand-success-800);
    --bs-info-text-emphasis: var(--brand-info-800);
    --bs-warning-text-emphasis: var(--brand-warning-800);
    --bs-danger-text-emphasis: var(--brand-danger-800);*/
    --bs-light-text-emphasis: var(--brand-secondary-700);
    --bs-dark-text-emphasis: var(--brand-dark-800);
    /* ── Subtle backgrounds ─────────────────────────────────── */
    --bs-primary-bg-subtle: var(--brand-primary-50);
    --bs-secondary-bg-subtle: var(--brand-secondary-50);
  /*  --bs-success-bg-subtle: var(--brand-success-50);
    --bs-info-bg-subtle: var(--brand-info-50);
    --bs-warning-bg-subtle: var(--brand-warning-50);
    --bs-danger-bg-subtle: var(--brand-danger-50);*/
    --bs-light-bg-subtle: var(--color-surface);
    --bs-dark-bg-subtle: var(--brand-dark-100);
    /* ── Subtle borders ─────────────────────────────────────── */
    --bs-primary-border-subtle: var(--brand-primary-200);
    --bs-secondary-border-subtle: var(--brand-secondary-200);
  /*  --bs-success-border-subtle: var(--brand-success-200);
    --bs-info-border-subtle: var(--brand-info-200);
    --bs-warning-border-subtle: var(--brand-warning-200);
    --bs-danger-border-subtle: var(--brand-danger-200);*/
    --bs-light-border-subtle: var(--color-border-subtle);
    --bs-dark-border-subtle: var(--brand-dark-200);
    /* ── Body ───────────────────────────────────────────────── */
    --bs-body-color: var(--color-text);
    --bs-body-bg: var(--color-bg);
/*    --bs-body-font-family: var(--font-primary);
    --bs-body-font-size: var(--font-size-body);*/
/*    --bs-body-font-weight: 400;*/
    --bs-body-line-height: var(--leading-relaxed);
    /* ── Secondary & tertiary text ──────────────────────────── */
    --bs-secondary-color: var(--color-text-muted);
    --bs-secondary-bg: var(--brand-secondary-50);
    --bs-tertiary-color: var(--color-text-muted);
    --bs-tertiary-bg: var(--color-bg-subtle);
    /* ── Headings & emphasis ────────────────────────────────── */
    --bs-heading-color: var(--color-heading);
    --bs-emphasis-color: var(--color-black);
    /* ── Links ──────────────────────────────────────────────── */
    --bs-link-color: var(--color-accent);
    --bs-link-decoration: underline;
    --bs-link-hover-color: var(--color-accent-dark);
    /* ── Borders ────────────────────────────────────────────── */
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: var(--color-border);
    --bs-border-color-translucent: var(--brand-secondary-a20);
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.875rem;
    --bs-border-radius-xl: 1.25rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-pill: 50rem;
    /* ── Shadows ────────────────────────────────────────────── */
    --bs-box-shadow: var(--shadow-md);
    --bs-box-shadow-sm: var(--shadow-sm);
    --bs-box-shadow-lg: var(--shadow-lg);
    --bs-box-shadow-inset: var(--shadow-inner);
    /* ── Focus ring ─────────────────────────────────────────── */
    --bs-focus-ring-width: 3px;
    --bs-focus-ring-opacity: 0.25;
    --bs-focus-ring-color: var(--brand-primary-a30);
    /* ── Font stacks ────────────────────────────────────────── */
/*    --bs-font-sans-serif: var(--font-primary);
    --bs-font-monospace: var(--font-mono);*/
}


/* ============================================================
   2. DARK MODE  —  [data-bs-theme="dark"]
   ============================================================ */

[data-bs-theme="dark"] {
    --bs-body-color: var(--brand-secondary-200);
    --bs-body-bg: var(--brand-secondary-950);
    --bs-secondary-color: var(--brand-secondary-300);
    /* FIX: was missing — inheriting light-mode muted value */
    --bs-tertiary-color: var(--brand-secondary-400);
    --bs-secondary-bg: var(--brand-secondary-900);
    --bs-tertiary-bg: var(--brand-secondary-800);
    --bs-emphasis-color: var(--color-heading);
    --bs-primary: var(--brand-primary-400);
    --bs-secondary: var(--brand-secondary-400);
  /*  --bs-info: var(--brand-secondary-400);
    --bs-warning: var(--brand-warning-600);
    --bs-danger: var(--brand-danger-400);*/
    --bs-primary-text-emphasis: var(--brand-primary-200);
    --bs-secondary-text-emphasis: var(--brand-secondary-200);
 /*   --bs-info-text-emphasis: var(--brand-secondary-200);
    --bs-warning-text-emphasis: var(--brand-warning-200);
    --bs-danger-text-emphasis: var(--brand-danger-200);*/
    --bs-primary-bg-subtle: var(--brand-primary-950);
    --bs-secondary-bg-subtle: var(--brand-secondary-950);
  /*  --bs-info-bg-subtle: var(--brand-secondary-950);
    --bs-warning-bg-subtle: var(--brand-warning-950);
    --bs-danger-bg-subtle: var(--brand-danger-950);*/
    --bs-primary-border-subtle: var(--brand-primary-800);
    --bs-secondary-border-subtle: var(--brand-secondary-700);
 /*   --bs-info-border-subtle: var(--brand-secondary-700);
    --bs-warning-border-subtle: var(--brand-warning-800);
    --bs-danger-border-subtle: var(--brand-danger-800);*/
    --bs-heading-color: var(--color-heading);
    --bs-link-color: var(--brand-primary-300);
    --bs-link-hover-color: var(--brand-primary-200);
    --bs-border-color: var(--brand-secondary-600);
    --bs-border-color-translucent: var(--brand-secondary-a50);
    --bs-box-shadow: var(--shadow-lg);
    --bs-box-shadow-sm: var(--shadow-md);
    --bs-box-shadow-lg: var(--shadow-xl);
    --bs-box-shadow-inset: var(--shadow-inner);
}


/* ============================================================
   3. BUTTONS
   ============================================================ */

.btn {
/*    --bs-btn-font-family: var(--font-primary);
    --bs-btn-font-size: var(--font-size-button);
    --bs-btn-font-weight: 500;*/
    --bs-btn-border-radius: var(--bs-border-radius);
    --bs-btn-transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.btn-sm {
/*    --bs-btn-font-size: var(--fs-xs);*/
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.btn-lg {
/*    --bs-btn-font-size: var(--fs-lg);*/
    --bs-btn-border-radius: var(--bs-border-radius-lg);
}

/* Solid */
.btn-primary {
    --bs-btn-color: var(--color-on-accent);
    --bs-btn-bg: var(--color-accent);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-hover-color: var(--color-on-accent);
    --bs-btn-hover-bg: var(--brand-primary-700);
    --bs-btn-hover-border-color: var(--brand-primary-800);
    --bs-btn-active-color: var(--color-on-accent);
    --bs-btn-active-bg: var(--brand-primary-900);
    --bs-btn-active-border-color: var(--brand-primary-950);
    --bs-btn-disabled-bg: var(--color-accent);
    --bs-btn-disabled-border-color: var(--color-accent);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-primary-a30);
}

.btn-secondary {
    --bs-btn-color: var(--color-on-accent);
    --bs-btn-bg: var(--brand-secondary-700);
    --bs-btn-border-color: var(--brand-secondary-700);
    --bs-btn-hover-color: var(--color-on-accent);
    --bs-btn-hover-bg: var(--brand-secondary-800);
    --bs-btn-hover-border-color: var(--brand-secondary-900);
    --bs-btn-active-color: var(--color-on-accent);
    --bs-btn-active-bg: var(--brand-secondary-950);
    --bs-btn-active-border-color: var(--brand-secondary-950);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-secondary-a30);
}

.btn-success {
    --bs-btn-color: var(--color-on-accent);
    --bs-btn-bg: var(--brand-success-600);
    --bs-btn-border-color: var(--brand-success-600);
    --bs-btn-hover-color: var(--color-on-accent);
    --bs-btn-hover-bg: var(--brand-success-700);
    --bs-btn-hover-border-color: var(--brand-success-800);
    --bs-btn-active-color: var(--color-on-accent);
    --bs-btn-active-bg: var(--brand-success-900);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-success-a20);
}

.btn-info {
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: var(--brand-info-600);
    --bs-btn-border-color: var(--brand-info-600);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-bg: var(--brand-info-700);
    --bs-btn-hover-border-color: var(--brand-info-800);
    --bs-btn-active-color: var(--color-text);
    --bs-btn-active-bg: var(--brand-info-900);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-info-a20);
}

.btn-warning {
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: var(--brand-warning-600);
    --bs-btn-border-color: var(--brand-warning-600);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-bg: var(--brand-warning-700);
    --bs-btn-hover-border-color: var(--brand-warning-800);
    --bs-btn-active-color: var(--color-text);
    --bs-btn-active-bg: var(--brand-warning-900);
    --bs-btn-active-border-color: var(--brand-warning-950);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-warning-a30);
}

.btn-danger {
    --bs-btn-color: var(--color-on-accent);
    --bs-btn-bg: var(--brand-danger-600);
    --bs-btn-border-color: var(--brand-danger-600);
    --bs-btn-hover-color: var(--color-on-accent);
    --bs-btn-hover-bg: var(--brand-danger-700);
    --bs-btn-hover-border-color: var(--brand-danger-800);
    --bs-btn-active-color: var(--color-on-accent);
    --bs-btn-active-bg: var(--brand-danger-900);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-danger-a30);
}

.btn-light {
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: var(--color-bg-subtle);
    --bs-btn-border-color: var(--color-border-subtle);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-bg: var(--brand-primary-100);
    --bs-btn-hover-border-color: var(--color-border);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-secondary-a20);
}

.btn-dark {
    --bs-btn-color: var(--color-on-accent);
    --bs-btn-bg: var(--brand-dark-600);
    --bs-btn-border-color: var(--brand-dark-600);
    --bs-btn-hover-color: var(--color-on-accent);
    --bs-btn-hover-bg: var(--brand-dark-700);
    --bs-btn-hover-border-color: var(--brand-dark-800);
    --bs-btn-active-color: var(--color-on-accent);
    --bs-btn-active-bg: var(--brand-dark-900);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-dark-a20);
}

/* Outline */
.btn-outline-primary {
    --bs-btn-color: var(--color-accent);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-hover-color: var(--color-on-accent);
    --bs-btn-hover-bg: var(--color-accent);
    --bs-btn-hover-border-color: var(--color-accent);
    --bs-btn-active-color: var(--color-on-accent);
    --bs-btn-active-bg: var(--color-accent);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-primary-a30);
}

.btn-outline-secondary {
    --bs-btn-color: var(--color-heading);
    --bs-btn-border-color: var(--color-heading);
    --bs-btn-hover-color: var(--color-on-accent);
    --bs-btn-hover-bg: var(--color-heading);
    --bs-btn-hover-border-color: var(--color-heading);
    --bs-btn-active-color: var(--color-on-accent);
    --bs-btn-active-bg: var(--color-heading);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-secondary-a30);
}

.btn-outline-warning {
    --bs-btn-color: var(--brand-warning-700);
    --bs-btn-border-color: var(--brand-warning-600);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-bg: var(--brand-warning-600);
    --bs-btn-hover-border-color: var(--brand-warning-600);
    --bs-btn-active-color: var(--color-text);
    --bs-btn-active-bg: var(--brand-warning-600);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-warning-a30);
}

.btn-outline-danger {
    --bs-btn-color: var(--brand-danger-600);
    --bs-btn-border-color: var(--brand-danger-600);
    --bs-btn-hover-color: var(--color-on-accent);
    --bs-btn-hover-bg: var(--brand-danger-600);
    --bs-btn-active-color: var(--color-on-accent);
    --bs-btn-active-bg: var(--brand-danger-700);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-danger-a30);
}

/* Soft (non-BS, custom variants) */
.btn-soft-primary {
    --bs-btn-color: var(--brand-primary-900);
    --bs-btn-bg: var(--brand-primary-50);
    --bs-btn-border-color: var(--brand-primary-200);
    --bs-btn-hover-color: var(--brand-primary-950);
    --bs-btn-hover-bg: var(--brand-primary-100);
    --bs-btn-hover-border-color: var(--brand-primary-300);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-primary-a20);
}

.btn-soft-secondary {
    --bs-btn-color: var(--brand-secondary-900);
    --bs-btn-bg: var(--brand-secondary-50);
    --bs-btn-border-color: var(--brand-secondary-200);
    --bs-btn-hover-color: var(--brand-secondary-950);
    --bs-btn-hover-bg: var(--brand-secondary-100);
    --bs-btn-hover-border-color: var(--brand-secondary-300);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-secondary-a20);
}

.btn-soft-warning {
    --bs-btn-color: var(--brand-warning-800);
    --bs-btn-bg: var(--brand-warning-50);
    --bs-btn-border-color: var(--brand-warning-200);
    --bs-btn-hover-color: var(--brand-warning-900);
    --bs-btn-hover-bg: var(--brand-warning-100);
    --bs-btn-hover-border-color: var(--brand-warning-300);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-warning-a20);
}

.btn-soft-danger {
    --bs-btn-color: var(--brand-danger-900);
    --bs-btn-bg: var(--brand-danger-50);
    --bs-btn-border-color: var(--brand-danger-200);
    --bs-btn-hover-color: var(--brand-danger-950);
    --bs-btn-hover-bg: var(--brand-danger-100);
    --bs-btn-hover-border-color: var(--brand-danger-300);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-danger-a20);
}

.btn-soft-info {
    --bs-btn-color: var(--brand-info-900);
    --bs-btn-bg: var(--brand-info-50);
    --bs-btn-border-color: var(--brand-info-200);
    --bs-btn-hover-color: var(--brand-info-950);
    --bs-btn-hover-bg: var(--brand-info-100);
    --bs-btn-hover-border-color: var(--brand-info-300);
    --bs-btn-focus-box-shadow: 0 0 0 3px var(--brand-info-a20);
}


/* ============================================================
   4. CARDS
   ============================================================ */

.card {
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-border-color: var(--brand-secondary-a20);
    --bs-card-box-shadow: var(--shadow-sm);
    --bs-card-cap-bg: var(--brand-secondary-a05);
    --bs-card-color: var(--color-text);
    --bs-card-bg: var(--color-surface);
    --bs-card-title-color: var(--color-heading);
    --bs-card-subtitle-color: var(--color-text-muted);
}


/* ============================================================
   5. NAVBAR
   ============================================================ */

.navbar {
    --bs-navbar-padding-y: 0.75rem;
/*    --bs-navbar-brand-font-size: var(--fs-xl);*/
    --bs-navbar-brand-color: var(--color-heading);
    --bs-navbar-brand-hover-color: var(--color-accent);
    --bs-navbar-color: var(--color-text-muted);
    --bs-navbar-hover-color: var(--color-accent);
    --bs-navbar-active-color: var(--color-accent);
    --bs-navbar-disabled-color: var(--brand-secondary-a30);
    --bs-navbar-toggler-border-color: var(--brand-secondary-a20);
    --bs-navbar-toggler-border-radius: var(--bs-border-radius);
    --bs-navbar-nav-link-padding-x: 0.75rem;
}

    .navbar-dark,
    .navbar[data-bs-theme="dark"] {
        --bs-navbar-brand-color: var(--color-on-accent);
        --bs-navbar-brand-hover-color: var(--color-secondary);
        --bs-navbar-color: var(--brand-secondary-200);
        --bs-navbar-hover-color: var(--color-secondary);
        --bs-navbar-active-color: var(--color-secondary);
        --bs-navbar-toggler-border-color: var(--brand-secondary-a30);
    }


/* ============================================================
   6. DROPDOWNS
   ============================================================ */

.dropdown-menu {
/*    --bs-dropdown-font-size: var(--fs-sm);*/
    --bs-dropdown-color: var(--color-text);
    --bs-dropdown-bg: var(--color-surface);
    --bs-dropdown-border-color: var(--brand-secondary-a20);
    --bs-dropdown-border-radius: var(--bs-border-radius-lg);
    --bs-dropdown-box-shadow: var(--shadow-md);
    --bs-dropdown-link-color: var(--color-text);
    --bs-dropdown-link-hover-color: var(--color-accent);
    --bs-dropdown-link-hover-bg: var(--brand-primary-50);
    --bs-dropdown-link-active-color: var(--color-on-accent);
    --bs-dropdown-link-active-bg: var(--color-accent);
    --bs-dropdown-link-disabled-color: var(--color-text-muted);
    --bs-dropdown-divider-bg: var(--brand-secondary-a10);
    --bs-dropdown-header-color: var(--color-text-muted);
    --bs-dropdown-item-border-radius: var(--bs-border-radius-sm);
}


/* ============================================================
   7. FORMS
   ============================================================ */

.form-label {
    color: var(--color-text);
/*    font-size: var(--fs-sm);
    font-weight: 500;*/
}

.form-control,
.form-select,
.form-control-plaintext {
    --bs-form-control-bg: var(--color-surface);
    --bs-form-control-disabled-bg: var(--color-bg-subtle);
    color: var(--color-text);
    border-color: var(--color-border);
/*    font-size: var(--font-size-body);
    font-family: var(--font-primary);*/
}

    .form-control::placeholder,
    .form-select::placeholder {
        color: var(--color-text-muted);
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px var(--brand-primary-a20);
        outline: none;
    }

/* FIX: unchecked state now fully branded — was inheriting BS gray defaults */
.form-check-input {
    border-color: var(--color-border);
    background-color: var(--color-surface);
}

.form-check-input:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    /* checkmark / dot color inside the input */
    --bs-form-check-bg-image-checked-color: var(--color-on-accent);
}

.form-check-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--brand-primary-a20);
}

/* FIX: switch unchecked track was inheriting BS default gray */
.form-switch .form-check-input {
    border-color: var(--color-border);
    background-color: var(--brand-secondary-200);
}

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

/* FIX: dark-mode checked state — uses lighter primary stop */
[data-bs-theme="dark"] .form-check-input {
    border-color: var(--brand-secondary-600);
    background-color: var(--brand-secondary-800);
}

[data-bs-theme="dark"] .form-check-input:checked {
    background-color: var(--brand-primary-400);
    border-color: var(--brand-primary-400);
}

[data-bs-theme="dark"] .form-switch .form-check-input {
    border-color: var(--brand-secondary-600);
    background-color: var(--brand-secondary-700);
}

[data-bs-theme="dark"] .form-switch .form-check-input:checked {
    background-color: var(--brand-primary-400);
    border-color: var(--brand-primary-400);
}

.form-range::-webkit-slider-thumb {
    background: var(--color-accent);
}

.form-range::-moz-range-thumb {
    background: var(--color-accent);
}

.input-group-text {
    color: var(--color-text-muted);
    background-color: var(--color-bg-subtle);
    border-color: var(--color-border);
/*    font-size: var(--font-size-body);*/
}

.form-floating > label {
    color: var(--color-text-muted);
}

.invalid-feedback {
    color: var(--color-accent-dark);
}

.valid-feedback {
    color: var(--color-green);
}


/* ============================================================
   8. BADGES
   ============================================================ */

.badge {
/*    --bs-badge-font-size: var(--fs-xs);
    --bs-badge-font-weight: 700;*/
    --bs-badge-border-radius: var(--bs-border-radius-pill);
    --bs-badge-padding-x: 0.65em;
    --bs-badge-padding-y: 0.35em;
}

    .badge.bg-primary {
        background-color: var(--color-accent) !important;
    }

    .badge.bg-secondary {
        background-color: var(--color-heading) !important;
    }

    .badge.bg-warning {
        background-color: var(--color-secondary) !important;
        color: var(--color-text) !important;
    }

    .badge.bg-danger {
        background-color: var(--color-accent-dark) !important;
    }

    .badge.bg-light {
        background-color: var(--color-bg-subtle) !important;
        color: var(--color-text) !important;
    }

    .badge.bg-dark {
        background-color: var(--brand-dark-700) !important;
    }


/* ============================================================
   9. ALERTS
   ============================================================ */

.alert {
    --bs-alert-border-radius: var(--bs-border-radius-lg);
/*    --bs-alert-font-size: var(--fs-sm);*/
}

.alert-primary {
    --bs-alert-color: var(--brand-primary-900);
    --bs-alert-bg: var(--brand-primary-50);
    --bs-alert-border-color: var(--brand-primary-200);
    --bs-alert-link-color: var(--brand-primary-950);
}

.alert-secondary {
    --bs-alert-color: var(--brand-secondary-900);
    --bs-alert-bg: var(--brand-secondary-50);
    --bs-alert-border-color: var(--brand-secondary-200);
    --bs-alert-link-color: var(--brand-secondary-950);
}

.alert-success {
    --bs-alert-color: var(--brand-success-900);
    --bs-alert-bg: var(--brand-success-50);
    --bs-alert-border-color: var(--brand-success-200);
    --bs-alert-link-color: var(--brand-success-950);
}

.alert-info {
    --bs-alert-color: var(--brand-info-900);
    --bs-alert-bg: var(--brand-info-50);
    --bs-alert-border-color: var(--brand-info-200);
    --bs-alert-link-color: var(--brand-info-950);
}

.alert-warning {
    --bs-alert-color: var(--brand-warning-800);
    --bs-alert-bg: var(--brand-warning-50);
    --bs-alert-border-color: var(--brand-warning-200);
    --bs-alert-link-color: var(--brand-warning-900);
}

.alert-danger {
    --bs-alert-color: var(--brand-danger-900);
    --bs-alert-bg: var(--brand-danger-50);
    --bs-alert-border-color: var(--brand-danger-200);
    --bs-alert-link-color: var(--brand-danger-950);
}

.alert-light {
    --bs-alert-color: var(--color-text);
    --bs-alert-bg: var(--color-bg-subtle);
    --bs-alert-border-color: var(--color-border-subtle);
    --bs-alert-link-color: var(--color-accent);
}

.alert-dark {
    --bs-alert-color: var(--color-on-accent);
    --bs-alert-bg: var(--brand-dark-700);
    --bs-alert-border-color: var(--brand-dark-600);
    --bs-alert-link-color: var(--brand-warning-400);
}


/* ============================================================
   10. PAGINATION
   ============================================================ */

.pagination {
/*    --bs-pagination-font-size: var(--fs-sm);*/
    --bs-pagination-color: var(--color-text);
    --bs-pagination-bg: var(--color-surface);
    --bs-pagination-border-color: var(--color-border);
    --bs-pagination-hover-color: var(--color-accent);
    --bs-pagination-hover-bg: var(--brand-primary-50);
    --bs-pagination-hover-border-color: var(--color-border);
    --bs-pagination-focus-color: var(--color-accent);
    --bs-pagination-focus-bg: var(--brand-primary-50);
    --bs-pagination-focus-box-shadow: 0 0 0 3px var(--brand-primary-a30);
    --bs-pagination-active-color: var(--color-on-accent);
    --bs-pagination-active-bg: var(--color-accent);
    --bs-pagination-active-border-color: var(--color-accent);
    --bs-pagination-disabled-color: var(--color-text-muted);
    --bs-pagination-disabled-bg: var(--color-surface);
    --bs-pagination-disabled-border-color: var(--color-border);
    --bs-pagination-border-radius: var(--bs-border-radius);
}


/* ============================================================
   11. ACCORDION
   ============================================================ */

.accordion {
    --bs-accordion-color: var(--color-text);
    --bs-accordion-bg: var(--color-surface);
    --bs-accordion-border-color: var(--brand-secondary-a20);
    --bs-accordion-border-radius: var(--bs-border-radius-lg);
    --bs-accordion-inner-border-radius: var(--bs-border-radius);
    --bs-accordion-btn-color: var(--color-text);
    --bs-accordion-btn-bg: var(--color-surface);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--brand-primary-a30);
    --bs-accordion-btn-icon-color: var(--color-text-muted);
    --bs-accordion-active-color: var(--color-accent);
    --bs-accordion-active-bg: var(--brand-primary-50);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
}


/* ============================================================
   12. PROGRESS
   ============================================================ */

.progress {
    --bs-progress-height: 0.75rem;
    --bs-progress-bg: var(--brand-secondary-50);
    --bs-progress-border-radius: var(--bs-border-radius-pill);
    --bs-progress-bar-color: var(--color-on-accent);
    --bs-progress-bar-bg: var(--color-accent);
    --bs-progress-bar-transition: width .6s ease;
}


/* ============================================================
   13. TOOLTIPS
   ============================================================ */

.tooltip {
    --bs-tooltip-bg: var(--brand-secondary-800);
    --bs-tooltip-color: var(--color-on-accent);
/*    --bs-tooltip-font-size: var(--fs-xs);*/
    --bs-tooltip-border-radius: var(--bs-border-radius);
    --bs-tooltip-opacity: 0.95;
    --bs-tooltip-padding-x: 0.75rem;
    --bs-tooltip-padding-y: 0.4rem;
}


/* ============================================================
   14. POPOVERS
   ============================================================ */

.popover {
/*    --bs-popover-font-size: var(--fs-sm);*/
    --bs-popover-bg: var(--color-surface);
    --bs-popover-border-color: var(--brand-secondary-a20);
    --bs-popover-border-radius: var(--bs-border-radius-lg);
    --bs-popover-box-shadow: var(--shadow-md);
    --bs-popover-header-bg: var(--brand-secondary-50);
    --bs-popover-header-color: var(--color-heading);
    --bs-popover-header-padding-x: 1rem;
    --bs-popover-header-padding-y: 0.75rem;
    --bs-popover-body-color: var(--color-text);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: 0.75rem;
}


/* ============================================================
   15. MODALS
   ============================================================ */

.modal {
    --bs-modal-color: var(--color-text);
    --bs-modal-bg: var(--color-surface);
    --bs-modal-border-color: var(--brand-secondary-a20);
    --bs-modal-border-radius: var(--bs-border-radius-lg);
    --bs-modal-box-shadow: var(--shadow-lg);
    --bs-modal-header-border-color: var(--brand-secondary-a20);
    --bs-modal-footer-border-color: var(--brand-secondary-a20);
    --bs-modal-header-padding: 1.25rem;
    --bs-modal-title-line-height: var(--leading-tight);
    --bs-modal-title-color: var(--color-heading);
    --bs-modal-footer-bg: transparent;
}

.modal-backdrop {
    --bs-backdrop-bg: var(--brand-secondary-950);
    --bs-backdrop-opacity: 0.5;
}


/* ============================================================
   16. LIST GROUPS
   ============================================================ */

.list-group {
    --bs-list-group-color: var(--color-text);
    --bs-list-group-bg: var(--color-surface);
    --bs-list-group-border-color: var(--brand-secondary-a20);
    --bs-list-group-border-radius: var(--bs-border-radius-lg);
    --bs-list-group-action-color: var(--color-text);
    --bs-list-group-action-hover-color: var(--color-accent);
    --bs-list-group-action-hover-bg: var(--brand-primary-50);
    --bs-list-group-action-active-color: var(--color-text);
    --bs-list-group-action-active-bg: var(--brand-primary-50);
    --bs-list-group-disabled-color: var(--color-text-muted);
    --bs-list-group-disabled-bg: var(--color-surface);
    --bs-list-group-active-color: var(--color-on-accent);
    --bs-list-group-active-bg: var(--color-accent);
    --bs-list-group-active-border-color: var(--color-accent);
}


/* ============================================================
   17. NAVS & TABS
   ============================================================ */

.nav {
/*    --bs-nav-link-font-size: var(--font-size-nav);
    --bs-nav-link-font-weight: 500;*/
    --bs-nav-link-color: var(--color-text);
    --bs-nav-link-hover-color: var(--color-accent);
    --bs-nav-link-disabled-color: var(--color-text-muted);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--brand-secondary-a20);
    --bs-nav-tabs-border-radius: var(--bs-border-radius);
    --bs-nav-tabs-link-color: var(--color-text-muted);
    --bs-nav-tabs-link-hover-border-color: var(--brand-secondary-a10);
    --bs-nav-tabs-link-active-color: var(--color-accent);
    --bs-nav-tabs-link-active-bg: var(--color-surface);
    --bs-nav-tabs-link-active-border-color: var(--color-border);
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: var(--color-on-accent);
    --bs-nav-pills-link-active-bg: var(--color-accent);
}


/* ============================================================
   18. OFFCANVAS
   ============================================================ */

.offcanvas,
.offcanvas-sm,
.offcanvas-md,
.offcanvas-lg,
.offcanvas-xl,
.offcanvas-xxl {
    --bs-offcanvas-bg: var(--color-surface);
    --bs-offcanvas-color: var(--color-text);
    --bs-offcanvas-border-color: var(--brand-secondary-a20);
    --bs-offcanvas-box-shadow: var(--shadow-lg);
    --bs-offcanvas-padding-x: 1.25rem;
    --bs-offcanvas-padding-y: 1.25rem;
    --bs-offcanvas-title-color: var(--color-heading);
}


/* ============================================================
   19. BREADCRUMB
   ============================================================ */

.breadcrumb {
/*    --bs-breadcrumb-font-size: var(--fs-sm);*/
    --bs-breadcrumb-item-padding-x: 0.5rem;
    --bs-breadcrumb-margin-bottom: 1rem;
    --bs-breadcrumb-divider-color: var(--color-text-muted);
    --bs-breadcrumb-active-color: var(--color-accent);
    --bs-breadcrumb-bg: transparent;
}


/* ============================================================
   20. TOASTS
   ============================================================ */

.toast {
/*    --bs-toast-font-size: var(--fs-sm);*/
    --bs-toast-color: var(--color-text);
    --bs-toast-background-color: var(--color-surface);
    --bs-toast-border-color: var(--brand-secondary-a20);
    --bs-toast-border-radius: var(--bs-border-radius-lg);
    --bs-toast-box-shadow: var(--shadow-md);
    --bs-toast-header-color: var(--color-heading);
    --bs-toast-header-bg: var(--brand-secondary-50);
    --bs-toast-header-border-color: var(--brand-secondary-a10);
    --bs-toast-padding-x: 0.75rem;
    --bs-toast-padding-y: 0.5rem;
}


/* ============================================================
   21. TABLES
   ============================================================ */

.table {
    --bs-table-color: var(--color-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--brand-secondary-a20);
  /*  --bs-table-accent-bg: var(--brand-secondary-a05);*/
    --bs-table-striped-color: var(--color-text);
    --bs-table-striped-bg: var(--brand-secondary-a05);
    --bs-table-active-color: var(--color-text);
    --bs-table-active-bg: var(--brand-primary-a10);
    --bs-table-hover-color: var(--color-text);
    --bs-table-hover-bg: var(--brand-secondary-a05);
}

/* FIX: dark-mode — alpha - that work against dark backgrounds */
[data-bs-theme="dark"] .table {
    --bs-table-color: var(--brand-secondary-200);
    --bs-table-border-color: var(--brand-secondary-a30);
    --bs-table-accent-bg: var(--brand-secondary-a15);
    --bs-table-striped-color: var(--brand-secondary-200);
    --bs-table-striped-bg: var(--brand-secondary-a15);
    --bs-table-active-color: var(--brand-secondary-200);
    --bs-table-active-bg: var(--brand-primary-a20);
    --bs-table-hover-color: var(--brand-secondary-200);
    --bs-table-hover-bg: var(--brand-secondary-a15);
}

.table-primary {
    --bs-table-bg: var(--brand-primary-50);
    --bs-table-border-color: var(--brand-primary-200);
    --bs-table-striped-bg: var(--brand-primary-100);
    --bs-table-hover-bg: var(--brand-primary-100);
    --bs-table-active-bg: var(--brand-primary-200);
}

.table-secondary {
    --bs-table-bg: var(--brand-secondary-50);
    --bs-table-border-color: var(--brand-secondary-200);
    --bs-table-striped-bg: var(--brand-secondary-100);
    --bs-table-hover-bg: var(--brand-secondary-100);
    --bs-table-active-bg: var(--brand-secondary-200);
}

.table-warning {
    --bs-table-color: var(--brand-warning-900);
    --bs-table-bg: var(--brand-warning-50);
    --bs-table-border-color: var(--brand-warning-200);
    --bs-table-striped-color: var(--brand-warning-900);
    --bs-table-striped-bg: var(--brand-warning-100);
    --bs-table-hover-color: var(--brand-warning-900);
    --bs-table-hover-bg: var(--brand-warning-100);
    --bs-table-active-color: var(--brand-warning-900);
    --bs-table-active-bg: var(--brand-warning-200);
}

.table-danger {
    --bs-table-color: var(--brand-danger-900);
    --bs-table-bg: var(--brand-danger-50);
    --bs-table-border-color: var(--brand-danger-200);
    --bs-table-striped-color: var(--brand-danger-900);
    --bs-table-striped-bg: var(--brand-danger-100);
    --bs-table-hover-color: var(--brand-danger-900);
    --bs-table-hover-bg: var(--brand-danger-100);
    --bs-table-active-color: var(--brand-danger-900);
    --bs-table-active-bg: var(--brand-danger-200);
}

/* NEW: previously missing variants — mapped to scale - from tokens.css */
.table-success {
    --bs-table-color: var(--brand-success-900);
    --bs-table-bg: var(--brand-success-50);
    --bs-table-border-color: var(--brand-success-200);
    --bs-table-striped-color: var(--brand-success-900);
    --bs-table-striped-bg: var(--brand-success-100);
    --bs-table-hover-color: var(--brand-success-900);
    --bs-table-hover-bg: var(--brand-success-100);
    --bs-table-active-color: var(--brand-success-900);
    --bs-table-active-bg: var(--brand-success-200);
}

.table-info {
    --bs-table-color: var(--brand-info-900);
    --bs-table-bg: var(--brand-info-50);
    --bs-table-border-color: var(--brand-info-200);
    --bs-table-striped-color: var(--brand-info-900);
    --bs-table-striped-bg: var(--brand-info-100);
    --bs-table-hover-color: var(--brand-info-900);
    --bs-table-hover-bg: var(--brand-info-100);
    --bs-table-active-color: var(--brand-info-900);
    --bs-table-active-bg: var(--brand-info-200);
}

.table-light {
    --bs-table-color: var(--color-text);
    --bs-table-bg: var(--color-bg-subtle);
    --bs-table-border-color: var(--color-border-subtle);
    --bs-table-striped-color: var(--color-text);
    --bs-table-striped-bg: var(--brand-secondary-a05);
    --bs-table-hover-color: var(--color-text);
    --bs-table-hover-bg: var(--brand-secondary-a10);
    --bs-table-active-color: var(--color-text);
    --bs-table-active-bg: var(--brand-secondary-a15);
}

.table-dark {
    --bs-table-color: var(--brand-dark-100);
    --bs-table-bg: var(--brand-dark-700);
    --bs-table-border-color: var(--brand-dark-500);
    --bs-table-striped-color: var(--brand-dark-100);
    --bs-table-striped-bg: var(--brand-dark-a15);
    --bs-table-hover-color: var(--brand-dark-100);
    --bs-table-hover-bg: var(--brand-dark-a20);
    --bs-table-active-color: var(--brand-dark-100);
    --bs-table-active-bg: var(--brand-dark-a30);
}


/* ============================================================
   22. CLOSE BUTTON
   ============================================================ */

.btn-close {
    --bs-btn-close-color: var(--color-heading);
    --bs-btn-close-opacity: 0.5;
    --bs-btn-close-hover-opacity: 0.85;
    --bs-btn-close-focus-shadow: 0 0 0 3px var(--brand-primary-a30);
}


/* ============================================================
   23. SPINNERS
   ============================================================ */

.spinner-border,
.spinner-grow {
    color: var(--color-accent);
}

[data-bs-theme="dark"] .spinner-border,
[data-bs-theme="dark"] .spinner-grow {
    color: var(--brand-primary-300);
}


/* ============================================================
   24. PLACEHOLDERS
   ============================================================ */

.placeholder {
    background-color: var(--brand-secondary-200);
}

/* FIX: was too dark on dark backgrounds */
[data-bs-theme="dark"] .placeholder {
    background-color: var(--brand-secondary-700);
}


/* ============================================================
   25. THEME SECTION CLASSES
   Maps semantic vars from tokens.css onto BS heading/link colors
   within each section background class.
   These vars (--default-color, --background-color, etc.) are
   locally scoped inside each .X-background selector in tokens.css
   and are correctly inherited here — do NOT move them to :root.
   ============================================================ */

.dark-background,
.light-background,
.accent-background,
.navy-background,
.warning-background {
    color: var(--default-color);
    background-color: var(--background-color);
}

    .dark-background h1, .dark-background h2, .dark-background h3,
    .dark-background h4, .dark-background h5, .dark-background h6,
    .light-background h1, .light-background h2, .light-background h3,
    .light-background h4, .light-background h5, .light-background h6,
    .accent-background h1, .accent-background h2, .accent-background h3,
    .accent-background h4, .accent-background h5, .accent-background h6,
    .navy-background h1, .navy-background h2, .navy-background h3,
    .navy-background h4, .navy-background h5, .navy-background h6,
    .warning-background h1, .warning-background h2, .warning-background h3,
    .warning-background h4, .warning-background h5, .warning-background h6 {
        color: var(--heading-color);
    }

    .dark-background a, .accent-background a, .navy-background a {
        color: var(--accent-color);
    }

        .dark-background a:hover, .accent-background a:hover, .navy-background a:hover {
            color: var(--accent-light);
        }


/* ============================================================
   26. GRADIENT UTILITIES
   All values come from --grad-* tokens in tokens.css
   ============================================================ */

.bg-grad-cr-navy {
    background: var(--grad-cr-navy) !important;
}

.bg-grad-navy-cr {
    background: var(--grad-navy-cr) !important;
}

.bg-grad-navy-gold {
    background: var(--grad-navy-gold) !important;
}

.bg-grad-gold-cr {
    background: var(--grad-gold-cr) !important;
}

.bg-grad-cr-gold {
    background: var(--grad-cr-gold) !important;
}

.bg-grad-tricolor {
    background: var(--grad-tricolor) !important;
}

.bg-grad-tricolor-rev {
    background: var(--grad-tricolor-rev) !important;
}

.bg-grad-cr-soft {
    background: var(--grad-cr-soft) !important;
}

.bg-grad-navy-soft {
    background: var(--grad-navy-soft) !important;
}

.bg-grad-gold-soft {
    background: var(--grad-gold-soft) !important;
}

.bg-grad-pale-warm {
    background: var(--grad-pale-warm) !important;
}

.bg-grad-pale-cool {
    background: var(--grad-pale-cool) !important;
}

.bg-grad-pale-tri {
    background: var(--grad-pale-tri) !important;
}

.bg-grad-blue-indigo {
    background: var(--grad-blue-indigo) !important;
}

.bg-grad-purple-fuchsia {
    background: var(--grad-purple-fuchsia) !important;
}

.bg-grad-teal-cyan {
    background: var(--grad-teal-cyan) !important;
}

.bg-grad-green-teal {
    background: var(--grad-green-teal) !important;
}

.bg-grad-amber-orange {
    background: var(--grad-amber-orange) !important;
}

.bg-grad-rose-cr {
    background: var(--grad-rose-cr) !important;
}

.bg-grad-violet-purple {
    background: var(--grad-violet-purple) !important;
}

.text-grad-cr-navy {
    background: var(--grad-cr-navy);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.text-grad-navy-gold {
    background: var(--grad-navy-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.text-grad-cr-gold {
    background: var(--grad-cr-gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.text-grad-tricolor {
    background: var(--grad-tricolor);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}