/**
 * Notes (Phase 89, FOLLOW_UPS row 75): the alert-* boxes a template writes to explain a page.
 *
 * Until Phase 89 they kept Materio's look, the colour itself on its tint: 1.5 to 3.9 : 1 in the light
 * theme and 2.3 to 5.7 : 1 in the dark one, where WCAG AA asks 4.5. By the owner's decision of
 * 2026-10-21 they take the flash messages' recipe (dgp-messages.css), without the icon and the close
 * button, so a page's notes stay distinct from its feedback while reading as well:
 *
 *   light: text 40% colour + black, background 20% colour + white, border 40% colour + white
 *   dark:  text 60% colour + white, background 20% colour + black, border 40% colour + black
 *
 * Info takes the brand blue, as the flash messages' info does. Measured on the brand hexes, WCAG
 * contrast of the text on its background (2026-10-21):
 *   light: primary and info 10.50, secondary 9.31, success 7.41, warning 7.41, danger 8.99
 *   dark:  primary and info 7.53, secondary 8.99, success 10.66, warning 10.68, danger 8.58
 *
 * Single-class rules that load after core.css, so they win on source order, as dgp-messages.css does.
 * A new file, for the reason dgp-messages.css gives. test_web_notes_and_notices.py holds every variant a
 * template or a script uses to a rule here.
 */

.alert-primary,
.alert-secondary,
.alert-success,
.alert-info,
.alert-warning,
.alert-danger {
  --bs-alert-color: color-mix(in srgb, var(--dgp-note-color) 40%, #000);
  --bs-alert-bg: color-mix(in srgb, var(--dgp-note-color) 20%, #fff);
  --bs-alert-border-color: color-mix(in srgb, var(--dgp-note-color) 40%, #fff);
  --bs-alert-link-color: var(--bs-alert-color);
  --bs-alert-link-hover-color: var(--bs-alert-color);
  --bs-alert-close-icon: var(--bs-alert-color);
}

[data-bs-theme="dark"] :is(.alert-primary, .alert-secondary, .alert-success, .alert-info, .alert-warning, .alert-danger) {
  --bs-alert-color: color-mix(in srgb, var(--dgp-note-color) 60%, #fff);
  --bs-alert-bg: color-mix(in srgb, var(--dgp-note-color) 20%, #000);
  --bs-alert-border-color: color-mix(in srgb, var(--dgp-note-color) 40%, #000);
}

.alert-primary { --dgp-note-color: var(--bs-primary); }
.alert-secondary { --dgp-note-color: var(--bs-secondary); }
.alert-success { --dgp-note-color: var(--bs-success); }
.alert-info { --dgp-note-color: var(--bs-primary); }
.alert-warning { --dgp-note-color: var(--bs-warning); }
.alert-danger { --dgp-note-color: var(--bs-danger); }