/* ============================================================
   MEF · Color tokens  (calibrated to the live theme variables)
   Brand primary is a deep INDIGO (#23296e): buttons, links,
   kickers/categories. A muted brick RED (#b13630) is used only
   for banners/alerts — never as the default action color.
   Token ramp keeps the `navy` name but carries indigo values.
   ============================================================ */
:root {
  /* ---- Indigo : primary brand / actions / links / kickers ---- */
  --mef-navy-900: #080733;   /* footer / deepest */
  --mef-navy-850: #141a52;   /* button hover */
  --mef-navy-800: #23296e;   /* PRIMARY brand indigo */
  --mef-navy-700: #343a86;
  --mef-navy-600: #474da0;
  --mef-navy-500: #6970c0;
  --mef-navy-300: #a6abdb;

  /* ---- Brick red : banners / alerts only (used sparingly) ---- */
  --mef-crimson-800: #6f201c;
  --mef-crimson-700: #8f2a25;
  --mef-crimson-600: #b13630;   /* banner background */
  --mef-crimson-500: #c44a43;
  --mef-crimson-400: #d36b64;

  /* ---- Neutrals : grey ramp on white paper ---- */
  --mef-ink:        #111111;    /* primary text / headings */
  --mef-slate-800:  #1d1d1d;
  --mef-slate-700:  #2c2c2c;    /* body text */
  --mef-slate-600:  #3f3f3f;
  --mef-slate-500:  #555555;    /* secondary text / deks / meta */
  --mef-slate-400:  #888888;    /* placeholder / disabled */
  --mef-slate-300:  #cccccc;    /* strong borders */
  --mef-slate-200:  #e6e6e6;    /* default hairline border / rules */
  --mef-slate-100:  #f0f0f0;    /* tints, hovers */
  --mef-slate-50:   #f7f7f7;    /* alt section paper / callout bg */
  --mef-paper:      #ffffff;

  /* ---- Accent supports (data / journal cues) ---- */
  --mef-gold:   #a8761f;
  --mef-teal:   #1f6b6b;
  --mef-positive: #2f7d4f;
  --mef-warning:  #b07514;

  /* =========================================================
     SEMANTIC ALIASES — use these in components & exhibits
     ========================================================= */
  --color-bg:          var(--mef-paper);
  --color-bg-alt:      var(--mef-slate-50);
  --color-bg-sunken:   var(--mef-slate-100);
  --color-bg-invert:   var(--mef-navy-900);

  --surface-card:      var(--mef-paper);
  --surface-card-alt:  var(--mef-slate-50);
  --surface-raised:    var(--mef-paper);

  --text-strong:       var(--mef-ink);
  --text-body:         var(--mef-slate-700);
  --text-muted:        var(--mef-slate-500);
  --text-faint:        var(--mef-slate-400);
  --text-invert:       #ffffff;
  --text-invert-muted: #b9bce0;

  --kicker:            var(--mef-navy-800);   /* indigo eyebrows/categories */
  --link:              var(--mef-navy-800);
  --link-hover:        var(--mef-navy-700);
  --link-invert:       #c6cbf0;

  --action:            var(--mef-navy-800);   /* indigo buttons (Subscribe/Donate) */
  --action-hover:      var(--mef-navy-850);
  --action-active:     var(--mef-navy-900);
  --action-text:       #ffffff;

  --action-2:          var(--mef-navy-700);   /* secondary solid (lighter indigo) */
  --action-2-hover:    var(--mef-navy-800);

  --banner-bg:         var(--mef-crimson-600); /* brick-red banner/alert strip */
  --banner-text:       #ffffff;

  --border:            var(--mef-slate-200);
  --border-strong:     var(--mef-slate-300);
  --rule:              var(--mef-slate-200);

  --focus-ring:        var(--mef-navy-500);
  --selection-bg:      rgba(35, 41, 110, 0.16);
  --selection-fg:      var(--mef-ink);

  /* Chart / data categorical ramp */
  --data-1: var(--mef-navy-800);
  --data-2: var(--mef-crimson-600);
  --data-3: var(--mef-teal);
  --data-4: var(--mef-gold);
  --data-5: var(--mef-navy-500);
  --data-grid: var(--mef-slate-200);
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }