/*
 * Mapping Material 3 (--md-sys-*) → tokens charte MboloPay.
 * Permet à <md-filled-button> & co. d'adopter automatiquement la palette okoumé/or/bleu
 * sans aucune surcharge composant par composant.
 *
 * @author BANGA Romaric
 */
:root {
  /* === Couleurs système Material 3 === */
  --md-sys-color-primary:                var(--brand-primary-500);
  --md-sys-color-on-primary:             var(--neutral-0);
  --md-sys-color-primary-container:      var(--brand-primary-100);
  --md-sys-color-on-primary-container:   var(--brand-primary-900);

  --md-sys-color-secondary:              var(--brand-secondary-500);
  --md-sys-color-on-secondary:           var(--neutral-0);
  --md-sys-color-secondary-container:    var(--brand-secondary-100);
  --md-sys-color-on-secondary-container: var(--brand-secondary-700);

  --md-sys-color-tertiary:               var(--brand-accent-700);
  --md-sys-color-on-tertiary:            var(--neutral-0);
  --md-sys-color-tertiary-container:     var(--brand-accent-100);
  --md-sys-color-on-tertiary-container:  var(--neutral-900);

  --md-sys-color-error:                  var(--color-danger-500);
  --md-sys-color-on-error:               var(--neutral-0);
  --md-sys-color-error-container:        var(--color-danger-100);
  --md-sys-color-on-error-container:     #5F1313;

  --md-sys-color-background:             var(--color-bg-canvas);
  --md-sys-color-on-background:          var(--color-text-primary);

  --md-sys-color-surface:                var(--color-bg-surface);
  --md-sys-color-on-surface:             var(--color-text-primary);
  --md-sys-color-surface-variant:        var(--color-bg-subtle);
  --md-sys-color-on-surface-variant:     var(--color-text-secondary);

  --md-sys-color-outline:                var(--color-border-strong);
  --md-sys-color-outline-variant:        var(--color-border-subtle);

  --md-sys-color-shadow:                 rgb(0 0 0 / 0.20);
  --md-sys-color-scrim:                  rgb(0 0 0 / 0.40);

  /* === Typographie Material 3 → Inter === */
  --md-ref-typeface-brand: var(--font-family-sans);
  --md-ref-typeface-plain: var(--font-family-sans);

  /* === Formes Material 3 → radii charte === */
  --md-sys-shape-corner-small:       var(--radius-sm);
  --md-sys-shape-corner-medium:      var(--radius-md);
  --md-sys-shape-corner-large:       var(--radius-lg);
  --md-sys-shape-corner-extra-large: var(--radius-xl);
  --md-sys-shape-corner-full:        var(--radius-full);
}