/**
 * Flash messages (Phase 87): the look of dgp_training/includes/_messages.html.
 *
 * One modifier per message level; templatetags/message_extras.py says which one a message gets.
 * A modifier sets a single colour, --dgp-message-color, from the brand colours in dgp-colors.css.
 * The box derives its text, background and border from it the way Bootstrap derives its own
 * *-text-emphasis, *-bg-subtle and *-border-subtle:
 *
 *   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
 *
 * Measured on the brand hexes, WCAG contrast of the text on its background (2026-10-20):
 *   light: info 10.50, success 7.41, warning 7.41, error 8.99
 *   dark:  info 7.53, success 10.66, warning 10.68, error 8.58
 * Materio's own alerts put the colour itself on its tint: 1.5 to 3.9 : 1.
 *
 * A new file rather than an edit of dgp-colors.css: production serves static files from S3 under
 * unhashed names, so a browser may hold an old copy of an edited file, but not of a new path.
 * test_web_message_look.py holds every modifier message_extras.py can return to a rule here.
 */

.dgp-message {
  --dgp-message-color: var(--bs-primary);
  --bs-alert-color: color-mix(in srgb, var(--dgp-message-color) 40%, #000);
  --bs-alert-bg: color-mix(in srgb, var(--dgp-message-color) 20%, #fff);
  --bs-alert-border-color: color-mix(in srgb, var(--dgp-message-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"] .dgp-message {
  --bs-alert-color: color-mix(in srgb, var(--dgp-message-color) 60%, #fff);
  --bs-alert-bg: color-mix(in srgb, var(--dgp-message-color) 20%, #000);
  --bs-alert-border-color: color-mix(in srgb, var(--dgp-message-color) 40%, #000);
}

.dgp-message--info { --dgp-message-color: var(--bs-primary); }
.dgp-message--success { --dgp-message-color: var(--bs-success); }
.dgp-message--warning { --dgp-message-color: var(--bs-warning); }
.dgp-message--error { --dgp-message-color: var(--bs-danger); }