/* Material Design 3 palette bridged onto Bootstrap 5.3 CSS custom properties.
   --m3-* tokens hold the raw palette; --bs-* remaps make Bootstrap consume them.
   Component blocks below read var(--m3-*) directly so they work unchanged in
   both themes instead of being duplicated per [data-bs-theme]. */

:root,
[data-bs-theme="light"] {
  --m3-primary: #D81F11;
  --m3-primary-rgb: 216, 31, 17;
  --m3-on-primary: #FFFFFF;

  /* Lot 060 (60.2): tonal container pair for the primary role, same M3 tonal-palette algorithm
     (seed = the base --m3-primary above, tons 90/10) already used for --m3-secondary-container at
     lot 058. Declared for model completeness -- no Bootstrap component consumes it yet (YAGNI,
     see the lot 060 ticket's own explicit scope decision), so no -rgb variant either. */
  --m3-primary-container: #FFDAD4;
  --m3-on-primary-container: #410100;

  /* Lot 060 (60.3): Expressive-variant secondary, replacing the taupe/brown default (algorithmically
     correct for a TonalSpot variant on a warm red seed, but disliked by the client). Same seed
     (--m3-primary), different M3 palette variant -- Expressive shifts hue instead of desaturating.
     See docs/tickets/tickets-tdd-lot-060-palette-m3-complete-suppression-dette-couleurs.md 60.0.5. */
  --m3-secondary: #3E6474;
  --m3-secondary-rgb: 62, 100, 116;
  --m3-on-secondary: #F2FAFF;

  /* Lot 058 (58.1): tonal "container" pair for .btn-secondary (fond plein), distinct from
     --m3-secondary above which stays the .btn-outline-secondary/.text-bg-secondary role,
     untouched. Lot 060 (60.3): values recalculated for the new Expressive secondary hue above
     (same role/consumer, same algorithm, only the resulting tone changed) -- contrast re-verified
     >= 6:1 in this (light) theme. */
  --m3-secondary-container: #C4EBFF;
  --m3-secondary-container-rgb: 196, 235, 255;
  --m3-on-secondary-container: #325868;

  /* Lot 060 (60.4): new tertiary role, coordinated with the Expressive secondary above (both
     computed together by the same M3 variant from the same seed, not picked independently). No
     Bootstrap component consumes it yet (YAGNI, same scope decision as the containers below) --
     --m3-tertiary-rgb is kept though, matching --m3-primary-rgb/--m3-secondary-rgb's own pattern of
     the file's "accent" roles always carrying a -rgb variant regardless of a live consumer. */
  --m3-tertiary: #00687F;
  --m3-tertiary-rgb: 0, 104, 127;
  --m3-on-tertiary: #F1FAFF;
  --m3-tertiary-container: #5BD5FA;
  --m3-on-tertiary-container: #004657;

  --m3-success: #2E7D32;
  --m3-success-rgb: 46, 125, 50;
  --m3-on-success: #FFFFFF;

  /* Lot 060 (60.2): tonal container pair, same algorithm as primary-container above. */
  --m3-success-container: #A3F69C;
  --m3-on-success-container: #002204;

  --m3-danger: #BA1A1A;
  --m3-danger-rgb: 186, 26, 26;
  --m3-on-danger: #FFFFFF;

  /* Lot 060 (60.2): tonal container pair, same algorithm as primary-container above. */
  --m3-danger-container: #FFDAD5;
  --m3-on-danger-container: #410002;

  --m3-warning: #ff7518;
  --m3-warning-rgb: 255, 117, 24;
  --m3-on-warning: #000000;

  /* Lot 060 (60.2): tonal container pair, same algorithm as primary-container above. */
  --m3-warning-container: #FFDBCB;
  --m3-on-warning-container: #341100;

  --m3-info: #008c94;
  --m3-info-rgb: 0, 140, 148;
  --m3-on-info: #FFFFFF;

  /* Lot 060 (60.2): tonal container pair, same algorithm as primary-container above. */
  --m3-info-container: #8CF2FB;
  --m3-on-info-container: #002022;

  --m3-background: #FFFBFF;
  --m3-on-background: #201A19;
  --m3-surface: #F5DDDA;
  --m3-surface-rgb: 245, 221, 218;
  --m3-on-surface: var(--m3-on-background);
  --m3-border: #857371;

  /* Client-reported (2026-07-31): the sidebar/nav-menu is styled from these tokens rather than
     consuming --m3-primary/--m3-on-primary directly in MainLayout.razor.css/NavMenu.razor.css --
     this indirection is what lets light and dark theme apply genuinely different treatments (a
     bold brand-color fill vs a near-neutral background, see the dark block below) without
     duplicating every consumer rule per theme. Light theme reproduces the pre-existing brand-
     forward sidebar exactly (identical color-mix formulas -- zero visual change here). */
  --m3-sidebar-bg-start: var(--m3-primary);
  --m3-sidebar-bg-end: color-mix(in srgb, var(--m3-primary) 65%, black);
  --m3-sidebar-fg: var(--m3-on-primary);
  --m3-sidebar-active-bg: color-mix(in srgb, var(--m3-on-primary) 30%, transparent);
  --m3-sidebar-active-fg: var(--m3-on-primary);
  --m3-sidebar-hover-bg: color-mix(in srgb, var(--m3-on-primary) 12%, transparent);

  --bs-primary: var(--m3-primary);
  --bs-primary-rgb: var(--m3-primary-rgb);
  --bs-secondary: var(--m3-secondary);
  --bs-secondary-rgb: var(--m3-secondary-rgb);
  --bs-success: var(--m3-success);
  --bs-success-rgb: var(--m3-success-rgb);
  --bs-danger: var(--m3-danger);
  --bs-danger-rgb: var(--m3-danger-rgb);
  --bs-warning: var(--m3-warning);
  --bs-warning-rgb: var(--m3-warning-rgb);
  --bs-info: var(--m3-info);
  --bs-info-rgb: var(--m3-info-rgb);

  --bs-body-bg: var(--m3-background);
  --bs-body-color: var(--m3-on-background);
  --bs-emphasis-color: var(--m3-on-background);

  --bs-border-color: var(--m3-border);
  --bs-border-color-translucent: var(--m3-border);

  --bs-link-color: var(--m3-primary);
  --bs-link-color-rgb: var(--m3-primary-rgb);
  --bs-link-hover-color: color-mix(in srgb, var(--m3-primary) 80%, black);
  --bs-link-hover-color-rgb: var(--m3-primary-rgb);

  --bs-focus-ring-color: rgba(var(--m3-primary-rgb), 0.25);

  --bs-form-valid-color: var(--m3-success);
  --bs-form-valid-border-color: var(--m3-success);
  --bs-form-invalid-color: var(--m3-danger);
  --bs-form-invalid-border-color: var(--m3-danger);

  --bs-card-bg: var(--m3-surface);
  --bs-card-color: var(--m3-on-surface);
  --bs-card-border-color: var(--m3-border);
  --bs-card-cap-bg: color-mix(in srgb, var(--m3-surface) 92%, black);

  /* `.bg-light`/`.bg-light`'s -rgb Bootstrap tokens are declared once at :root in the vendored
     bootstrap.css and never touched by Bootstrap's own [data-bs-theme=dark] block (only the
     "-subtle"/"-text-emphasis" variants are) -- left unmapped here, `.card.bg-light` (used by
     SheetRuleForm.razor/SheetGenerationRuleForm.razor/Users.razor for nested grouping cards) kept
     a fixed near-white #f8f9fa background in dark theme while its text still read --bs-card-color
     (--m3-on-surface, a *light* color meant for a dark surface) -- light text on a light
     background, reported illegible. Aliased onto --m3-surface (the same tone a plain `.card`
     already uses) rather than a distinct tint: none of these `.bg-light` cards are nested inside a
     second `.card` in this app, so there is no visual-hierarchy need for a different shade, and
     reusing --m3-surface/-on-surface guarantees the same contrast guarantee `.card` already has. */
  --bs-light: var(--m3-surface);
  --bs-light-rgb: var(--m3-surface-rgb);

  --bs-modal-bg: var(--m3-surface);
  --bs-modal-color: var(--m3-on-surface);
  --bs-modal-border-color: var(--m3-border);
  --bs-modal-header-border-color: var(--m3-border);
  --bs-modal-footer-border-color: var(--m3-border);

  --bs-dropdown-bg: var(--m3-surface);
  --bs-dropdown-color: var(--m3-on-surface);
  --bs-dropdown-border-color: var(--m3-border);
  --bs-dropdown-link-color: var(--m3-on-surface);
  --bs-dropdown-link-hover-color: var(--m3-on-surface);
  --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--m3-surface) 85%, black);

  --bs-popover-bg: var(--m3-surface);
  --bs-popover-border-color: var(--m3-border);
  --bs-popover-header-bg: color-mix(in srgb, var(--m3-surface) 92%, black);

  --bs-toast-bg: color-mix(in srgb, var(--m3-surface) 95%, transparent);
  --bs-toast-border-color: var(--m3-border);

  --bs-list-group-bg: var(--m3-surface);
  --bs-list-group-color: var(--m3-on-surface);
  --bs-list-group-border-color: var(--m3-border);
}

[data-bs-theme="dark"] {
  --m3-primary: #FFB4AB;
  --m3-primary-rgb: 255, 180, 171;
  --m3-on-primary: #690100;

  /* Lot 060 (60.2): tonal container pair, dark-theme tons (30/90), same algorithm as the light
     block above. Declared for model completeness -- no live consumer yet. */
  --m3-primary-container: #930200;
  --m3-on-primary-container: #FFDAD4;

  /* Lot 060 (60.3): Expressive-variant secondary, coordinated with the light theme's replacement
     above (same seed, same variant, dark tons of the same computed hue). */
  --m3-secondary: #B4CAD5;
  --m3-secondary-rgb: 180, 202, 213;
  --m3-on-secondary: #2E434C;

  /* Lot 058 (58.1): dark-theme tonal "container" pair, M3 baseline values -- 7.3:1 contrast.
     Deliberate visible change from the pre-058 rendering (fond rosé clair -> fond brun foncé),
     Variante A per the ticket, not a regression: the light theme is the one with the real defect
     (a dull taupe indistinguishable from a disabled field), the dark theme never had that problem
     but keeps the canonical M3 role value rather than a copy of --m3-secondary.
     Lot 060 (60.3): values recalculated for the Expressive secondary hue above (same role/consumer,
     same algorithm, only the resulting tone changed) -- contrast re-verified >= 6:1. */
  --m3-secondary-container: #132831;
  --m3-secondary-container-rgb: 19, 40, 49;
  --m3-on-secondary-container: #91A7B2;

  /* Lot 060 (60.4): new tertiary role, coordinated with the Expressive secondary above. Note:
     tertiary-container/on-tertiary-container compute the *same* value in light and dark for this
     hue/chroma under the Expressive variant -- verified against the reference algorithm, not a
     copy-paste mistake (see the ticket's own 60.0/60.4 note). */
  --m3-tertiary: #88E0FF;
  --m3-tertiary-rgb: 136, 224, 255;
  --m3-on-tertiary: #005063;
  --m3-tertiary-container: #5BD5FA;
  --m3-on-tertiary-container: #004657;

  --m3-success: #81C784;
  --m3-success-rgb: 129, 199, 132;
  --m3-on-success: #1B5E20;

  /* Lot 060 (60.2): tonal container pair, dark-theme tons, same algorithm as the light block. */
  --m3-success-container: #005312;
  --m3-on-success-container: #A3F69C;

  --m3-danger: #FFB4AB;
  --m3-danger-rgb: 255, 180, 171;
  --m3-on-danger: #690002;

  /* Lot 060 (60.2): tonal container pair, dark-theme tons, same algorithm as the light block. */
  --m3-danger-container: #930009;
  --m3-on-danger-container: #FFDAD5;

  --m3-warning: #edb050;
  --m3-warning-rgb: 237, 176, 80;
  --m3-on-warning: #442925;

  /* Lot 060 (60.2): tonal container pair, dark-theme tons, same algorithm as the light block. */
  --m3-warning-container: #783100;
  --m3-on-warning-container: #FFDBCB;

  --m3-info: #13d9e3;
  --m3-info-rgb: 19, 217, 227;
  --m3-on-info: #003333;

  /* Lot 060 (60.2): tonal container pair, dark-theme tons, same algorithm as the light block. */
  --m3-info-container: #004F54;
  --m3-on-info-container: #8CF2FB;

  --m3-background: #201A19;
  --m3-on-background: #EDE0DE;
  --m3-surface: #534341;
  --m3-surface-rgb: 83, 67, 65;
  --m3-on-surface: var(--m3-on-background);
  --m3-border: #A08C8A;

  /* Client-reported (2026-07-31): the sidebar filled with --m3-primary (a *light* salmon in dark
     theme, #FFB4AB -- M3's dark scheme deliberately keeps `primary` light so it reads as a text/
     accent color ON a dark surface, never as a bright fill covering a large area) made the whole
     sidebar the brightest, most attention-grabbing element on the page -- the opposite of dark
     mode's own elevation model (differentiate surfaces via low luminance, not via a saturated or
     bright fill). Dark theme's sidebar marks the active nav item with --m3-primary as a *text*
     accent (M3's own intended dark-theme role for this token) plus a faint background tint,
     rather than a solid fill.
     Follow-up, same day (client-reported): a flat --m3-background fill made the sidebar
     indistinguishable from the page content behind it -- dark mode can't lean on box-shadow for
     depth the way light mode does, so two adjacent surfaces sharing the exact same background
     read as one flat, undifferentiated block. Per M3's own elevation model (surfaces get very
     slightly *lighter*, not shadowed, as they rise), the sidebar now sits on an intermediate tone
     between the page background and the (lighter) card surface -- a subtle 15% step toward
     --m3-surface, not all the way to it, so the sidebar stays visually "behind" a card rather than
     matching its elevation. */
  --m3-sidebar-bg-start: color-mix(in srgb, var(--m3-background) 85%, var(--m3-surface) 15%);
  --m3-sidebar-bg-end: color-mix(in srgb, var(--m3-background) 85%, var(--m3-surface) 15%);
  --m3-sidebar-fg: var(--m3-on-background);
  --m3-sidebar-active-bg: color-mix(in srgb, var(--m3-primary) 16%, transparent);
  --m3-sidebar-active-fg: var(--m3-primary);
  --m3-sidebar-hover-bg: color-mix(in srgb, var(--m3-on-background) 8%, transparent);

  --bs-primary: var(--m3-primary);
  --bs-primary-rgb: var(--m3-primary-rgb);
  --bs-secondary: var(--m3-secondary);
  --bs-secondary-rgb: var(--m3-secondary-rgb);
  --bs-success: var(--m3-success);
  --bs-success-rgb: var(--m3-success-rgb);
  --bs-danger: var(--m3-danger);
  --bs-danger-rgb: var(--m3-danger-rgb);
  --bs-warning: var(--m3-warning);
  --bs-warning-rgb: var(--m3-warning-rgb);
  --bs-info: var(--m3-info);
  --bs-info-rgb: var(--m3-info-rgb);

  --bs-body-bg: var(--m3-background);
  --bs-body-color: var(--m3-on-background);
  --bs-emphasis-color: var(--m3-on-background);

  --bs-border-color: var(--m3-border);
  --bs-border-color-translucent: var(--m3-border);

  --bs-link-color: var(--m3-primary);
  --bs-link-color-rgb: var(--m3-primary-rgb);
  --bs-link-hover-color: color-mix(in srgb, var(--m3-primary) 80%, white);
  --bs-link-hover-color-rgb: var(--m3-primary-rgb);

  --bs-focus-ring-color: rgba(var(--m3-primary-rgb), 0.25);

  --bs-form-valid-color: var(--m3-success);
  --bs-form-valid-border-color: var(--m3-success);
  --bs-form-invalid-color: var(--m3-danger);
  --bs-form-invalid-border-color: var(--m3-danger);

  --bs-card-bg: var(--m3-surface);
  --bs-card-color: var(--m3-on-surface);
  --bs-card-border-color: var(--m3-border);
  --bs-card-cap-bg: color-mix(in srgb, var(--m3-surface) 92%, white);

  /* See the light block's own comment above -- `.bg-light` was fixed to a near-white background
     regardless of theme, making it illegible against --m3-on-surface's light-on-dark text. */
  --bs-light: var(--m3-surface);
  --bs-light-rgb: var(--m3-surface-rgb);

  --bs-modal-bg: var(--m3-surface);
  --bs-modal-color: var(--m3-on-surface);
  --bs-modal-border-color: var(--m3-border);
  --bs-modal-header-border-color: var(--m3-border);
  --bs-modal-footer-border-color: var(--m3-border);

  --bs-dropdown-bg: var(--m3-surface);
  --bs-dropdown-color: var(--m3-on-surface);
  --bs-dropdown-border-color: var(--m3-border);
  --bs-dropdown-link-color: var(--m3-on-surface);
  --bs-dropdown-link-hover-color: var(--m3-on-surface);
  --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--m3-surface) 85%, white);

  --bs-popover-bg: var(--m3-surface);
  --bs-popover-border-color: var(--m3-border);
  --bs-popover-header-bg: color-mix(in srgb, var(--m3-surface) 92%, white);

  --bs-toast-bg: color-mix(in srgb, var(--m3-surface) 95%, transparent);
  --bs-toast-border-color: var(--m3-border);

  --bs-list-group-bg: var(--m3-surface);
  --bs-list-group-color: var(--m3-on-surface);
  --bs-list-group-border-color: var(--m3-border);
}

/* -------------------------------------------------------------------------
   Component-level overrides.
   Bootstrap's compiled CSS bakes some component colors in as literal hex
   rather than deriving them from the --bs-primary/etc. root variables above,
   so those components need an explicit rule. Written once (not duplicated
   per theme) because every value below resolves through var(--m3-*), which
   already carries the correct light/dark value for the active theme.
   ------------------------------------------------------------------------- */

.form-control:focus,
.form-select:focus {
  border-color: var(--m3-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--m3-primary-rgb), 0.25);
}

.form-check-input:focus {
  border-color: var(--m3-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--m3-primary-rgb), 0.25);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--m3-primary);
  border-color: var(--m3-primary);
}

.btn-primary {
  --bs-btn-color: var(--m3-on-primary);
  --bs-btn-bg: var(--m3-primary);
  --bs-btn-border-color: var(--m3-primary);
  --bs-btn-hover-color: var(--m3-on-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--m3-primary) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--m3-primary) 82%, black);
  --bs-btn-focus-shadow-rgb: var(--m3-primary-rgb);
  --bs-btn-active-color: var(--m3-on-primary);
  --bs-btn-active-bg: color-mix(in srgb, var(--m3-primary) 78%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--m3-primary) 72%, black);
  --bs-btn-disabled-color: var(--m3-on-primary);
  --bs-btn-disabled-bg: var(--m3-primary);
  --bs-btn-disabled-border-color: var(--m3-primary);
}

/* Lot 058 (58.1): remapped onto the tonal secondary-container pair -- .btn-outline-secondary and
   .text-bg-secondary below are untouched, still on --m3-secondary/--m3-on-secondary. Structure
   (the color-mix hover/active shape) is unchanged, only the base tokens it reads from. */
.btn-secondary {
  --bs-btn-color: var(--m3-on-secondary-container);
  --bs-btn-bg: var(--m3-secondary-container);
  --bs-btn-border-color: var(--m3-secondary-container);
  --bs-btn-hover-color: var(--m3-on-secondary-container);
  --bs-btn-hover-bg: color-mix(in srgb, var(--m3-secondary-container) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--m3-secondary-container) 82%, black);
  --bs-btn-focus-shadow-rgb: var(--m3-secondary-container-rgb);
  --bs-btn-active-color: var(--m3-on-secondary-container);
  --bs-btn-active-bg: color-mix(in srgb, var(--m3-secondary-container) 78%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--m3-secondary-container) 72%, black);
  --bs-btn-disabled-color: var(--m3-on-secondary-container);
  --bs-btn-disabled-bg: var(--m3-secondary-container);
  --bs-btn-disabled-border-color: var(--m3-secondary-container);
}

.btn-success {
  --bs-btn-color: var(--m3-on-success);
  --bs-btn-bg: var(--m3-success);
  --bs-btn-border-color: var(--m3-success);
  --bs-btn-hover-color: var(--m3-on-success);
  --bs-btn-hover-bg: color-mix(in srgb, var(--m3-success) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--m3-success) 82%, black);
  --bs-btn-focus-shadow-rgb: var(--m3-success-rgb);
  --bs-btn-active-color: var(--m3-on-success);
  --bs-btn-active-bg: color-mix(in srgb, var(--m3-success) 78%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--m3-success) 72%, black);
  --bs-btn-disabled-color: var(--m3-on-success);
  --bs-btn-disabled-bg: var(--m3-success);
  --bs-btn-disabled-border-color: var(--m3-success);
}

.btn-danger {
  --bs-btn-color: var(--m3-on-danger);
  --bs-btn-bg: var(--m3-danger);
  --bs-btn-border-color: var(--m3-danger);
  --bs-btn-hover-color: var(--m3-on-danger);
  --bs-btn-hover-bg: color-mix(in srgb, var(--m3-danger) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--m3-danger) 82%, black);
  --bs-btn-focus-shadow-rgb: var(--m3-danger-rgb);
  --bs-btn-active-color: var(--m3-on-danger);
  --bs-btn-active-bg: color-mix(in srgb, var(--m3-danger) 78%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--m3-danger) 72%, black);
  --bs-btn-disabled-color: var(--m3-on-danger);
  --bs-btn-disabled-bg: var(--m3-danger);
  --bs-btn-disabled-border-color: var(--m3-danger);
}

.btn-warning {
  --bs-btn-color: var(--m3-on-warning);
  --bs-btn-bg: var(--m3-warning);
  --bs-btn-border-color: var(--m3-warning);
  --bs-btn-hover-color: var(--m3-on-warning);
  --bs-btn-hover-bg: color-mix(in srgb, var(--m3-warning) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--m3-warning) 82%, black);
  --bs-btn-focus-shadow-rgb: var(--m3-warning-rgb);
  --bs-btn-active-color: var(--m3-on-warning);
  --bs-btn-active-bg: color-mix(in srgb, var(--m3-warning) 78%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--m3-warning) 72%, black);
  --bs-btn-disabled-color: var(--m3-on-warning);
  --bs-btn-disabled-bg: var(--m3-warning);
  --bs-btn-disabled-border-color: var(--m3-warning);
}

.btn-info {
  --bs-btn-color: var(--m3-on-info);
  --bs-btn-bg: var(--m3-info);
  --bs-btn-border-color: var(--m3-info);
  --bs-btn-hover-color: var(--m3-on-info);
  --bs-btn-hover-bg: color-mix(in srgb, var(--m3-info) 88%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--m3-info) 82%, black);
  --bs-btn-focus-shadow-rgb: var(--m3-info-rgb);
  --bs-btn-active-color: var(--m3-on-info);
  --bs-btn-active-bg: color-mix(in srgb, var(--m3-info) 78%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--m3-info) 72%, black);
  --bs-btn-disabled-color: var(--m3-on-info);
  --bs-btn-disabled-bg: var(--m3-info);
  --bs-btn-disabled-border-color: var(--m3-info);
}

.btn-outline-primary {
  --bs-btn-color: var(--m3-primary);
  --bs-btn-border-color: var(--m3-primary);
  --bs-btn-hover-color: var(--m3-on-primary);
  --bs-btn-hover-bg: var(--m3-primary);
  --bs-btn-hover-border-color: var(--m3-primary);
  --bs-btn-focus-shadow-rgb: var(--m3-primary-rgb);
  --bs-btn-active-color: var(--m3-on-primary);
  --bs-btn-active-bg: var(--m3-primary);
  --bs-btn-active-border-color: var(--m3-primary);
  --bs-btn-disabled-color: var(--m3-primary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--m3-secondary);
  --bs-btn-border-color: var(--m3-secondary);
  --bs-btn-hover-color: var(--m3-on-secondary);
  --bs-btn-hover-bg: var(--m3-secondary);
  --bs-btn-hover-border-color: var(--m3-secondary);
  --bs-btn-focus-shadow-rgb: var(--m3-secondary-rgb);
  --bs-btn-active-color: var(--m3-on-secondary);
  --bs-btn-active-bg: var(--m3-secondary);
  --bs-btn-active-border-color: var(--m3-secondary);
  --bs-btn-disabled-color: var(--m3-secondary);
}

.btn-outline-success {
  --bs-btn-color: var(--m3-success);
  --bs-btn-border-color: var(--m3-success);
  --bs-btn-hover-color: var(--m3-on-success);
  --bs-btn-hover-bg: var(--m3-success);
  --bs-btn-hover-border-color: var(--m3-success);
  --bs-btn-focus-shadow-rgb: var(--m3-success-rgb);
  --bs-btn-active-color: var(--m3-on-success);
  --bs-btn-active-bg: var(--m3-success);
  --bs-btn-active-border-color: var(--m3-success);
  --bs-btn-disabled-color: var(--m3-success);
}

.btn-outline-danger {
  --bs-btn-color: var(--m3-danger);
  --bs-btn-border-color: var(--m3-danger);
  --bs-btn-hover-color: var(--m3-on-danger);
  --bs-btn-hover-bg: var(--m3-danger);
  --bs-btn-hover-border-color: var(--m3-danger);
  --bs-btn-focus-shadow-rgb: var(--m3-danger-rgb);
  --bs-btn-active-color: var(--m3-on-danger);
  --bs-btn-active-bg: var(--m3-danger);
  --bs-btn-active-border-color: var(--m3-danger);
  --bs-btn-disabled-color: var(--m3-danger);
}

.btn-outline-warning {
  --bs-btn-color: var(--m3-warning);
  --bs-btn-border-color: var(--m3-warning);
  --bs-btn-hover-color: var(--m3-on-warning);
  --bs-btn-hover-bg: var(--m3-warning);
  --bs-btn-hover-border-color: var(--m3-warning);
  --bs-btn-focus-shadow-rgb: var(--m3-warning-rgb);
  --bs-btn-active-color: var(--m3-on-warning);
  --bs-btn-active-bg: var(--m3-warning);
  --bs-btn-active-border-color: var(--m3-warning);
  --bs-btn-disabled-color: var(--m3-warning);
}

.btn-outline-info {
  --bs-btn-color: var(--m3-info);
  --bs-btn-border-color: var(--m3-info);
  --bs-btn-hover-color: var(--m3-on-info);
  --bs-btn-hover-bg: var(--m3-info);
  --bs-btn-hover-border-color: var(--m3-info);
  --bs-btn-focus-shadow-rgb: var(--m3-info-rgb);
  --bs-btn-active-color: var(--m3-on-info);
  --bs-btn-active-bg: var(--m3-info);
  --bs-btn-active-border-color: var(--m3-info);
  --bs-btn-disabled-color: var(--m3-info);
}

/* .text-bg-* utilities hardcode #fff/#000 text; the M3 "on-*" colors differ
   per theme (e.g. dark-mode containers are light fills with dark text), so
   text color needs to track var(--m3-on-*) instead. */
.text-bg-primary { color: var(--m3-on-primary) !important; }
.text-bg-secondary { color: var(--m3-on-secondary) !important; }
.text-bg-success { color: var(--m3-on-success) !important; }
.text-bg-danger { color: var(--m3-on-danger) !important; }
.text-bg-warning { color: var(--m3-on-warning) !important; }
.text-bg-info { color: var(--m3-on-info) !important; }