/* ============================================================
   Mi Optii — Color tokens
   Palette sampled directly from the Mi Optii deck + brand mark.
   Primary brand red doubles as the "R" in the product's
   Red/Amber/Green (RAG) diagnostic indicators.
   ============================================================ */

:root {
  /* ---- Brand ---------------------------------------------- */
  --mi-red: #E31937;          /* primary brand red — the "Mi" wordmark */
  --mi-red-600: #C2142E;      /* hover */
  --mi-red-700: #A30F25;      /* press / deep */
  --mi-red-300: #F07A8C;      /* light accent dot in the ring */
  --mi-red-tint: #FDECEF;     /* wash background for risk rows/badges */
  --mi-red-tint-strong: #FAD7DD;

  /* ---- Ink & neutral ramp (sampled greys) ----------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F9F9FA;
  --neutral-100: #F5F5F5;     /* primary surface tint */
  --neutral-150: #EEEEEF;
  --neutral-200: #E4E4E6;     /* hairline borders */
  --neutral-300: #D2D2D5;     /* strong borders / dividers */
  --neutral-400: #A8A8AD;     /* disabled text, faint dots */
  --neutral-500: #888888;     /* muted text, secondary dots */
  --neutral-600: #666666;     /* body secondary */
  --neutral-700: #4A4A4D;
  --neutral-800: #29292B;
  --neutral-900: #0A0A0A;     /* ink — near-black */

  /* ---- RAG diagnostic system (core product language) ------ */
  --rag-red:    #E31937;      /* critical risk / fail */
  --rag-red-bg: #FDECEF;
  --rag-red-fg: #B00C24;

  --rag-amber:    #E08A00;    /* warning / attention */
  --rag-amber-bg: #FCF2E0;
  --rag-amber-fg: #8A5400;

  --rag-green:    #15914F;    /* healthy / pass */
  --rag-green-bg: #E6F4EC;
  --rag-green-fg: #0C6B3A;

  --info-blue:    #2563B0;    /* informational / Oracle context */
  --info-blue-bg: #E9F0FA;
  --info-blue-fg: #1B4A86;

  /* ---- Semantic aliases ----------------------------------- */
  --bg-app:        var(--neutral-100);
  --bg-canvas:     var(--neutral-50);
  --surface-card:  var(--neutral-0);
  --surface-sunken:var(--neutral-100);
  --surface-inverse: var(--neutral-900);

  --border-subtle: var(--neutral-200);
  --border-default:var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-focus:  var(--mi-red);

  --text-primary:   var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted:     var(--neutral-500);
  --text-disabled:  var(--neutral-400);
  --text-inverse:   var(--neutral-0);
  --text-brand:     var(--mi-red);
  --text-link:      var(--info-blue);

  --accent:        var(--mi-red);
  --accent-hover:  var(--mi-red-600);
  --accent-press:  var(--mi-red-700);
}