/* askMI color system — from Brand foundation, July 2026 */
:root {
  /* ---- Base palette (exact brand values, do not round) ---- */
  --mi-midnight:    #132238; /* primary */
  --mi-emerald:     #10B981; /* accent */
  --mi-red:         #EF4444; /* semantic: risk / negative */
  --mi-amber:       #F59E0B; /* semantic: unusual / attention */
  --mi-slate:       #475569; /* neutral */
  --mi-light-gray:  #E2E8F0; /* neutral */
  --mi-fog:         #F8FAFC; /* neutral, near-white */
  --mi-white:       #FFFFFF;

  /* ---- Semantic aliases ---- */
  --color-primary:        var(--mi-midnight);
  --color-primary-hover:  #0D1A2B; /* midnight, ~12% darker */
  --color-primary-active: #0A1420;
  --color-accent:         var(--mi-emerald);
  --color-accent-hover:   #0EA271;
  --color-accent-active:  #0B8A5F;

  --color-danger:  var(--mi-red);
  --color-warning: var(--mi-amber);
  --color-success: var(--mi-emerald);
  /* "Only the selected chart is blue" — blue in askMI's agent language IS the primary
     midnight, reserved for the one selected/active data series. There is no separate blue. */
  --color-selected: var(--mi-midnight);

  --surface-app:      var(--mi-fog);
  --surface-card:      var(--mi-white);
  --surface-sunken:    var(--mi-fog);
  --surface-inverse:   var(--mi-midnight);
  --surface-overlay:   rgba(19, 34, 56, 0.48);

  --border-subtle:  var(--mi-light-gray);
  --border-strong:  var(--mi-slate);

  --text-primary:    var(--mi-midnight);
  --text-secondary:  var(--mi-slate);
  --text-tertiary:   #8695A8; /* tint between slate and light-gray for placeholders */
  --text-inverse:    var(--mi-white);
  --text-inverse-secondary: #AEB9C7;
  --text-link:       var(--mi-midnight);
  --text-link-hover: var(--mi-emerald);

  --focus-ring: 0 0 0 3px rgba(16, 185, 129, 0.35);
}