/* ===========================================================================
   MightyMax — Color System
   Three-color rule: near-white canvas · deep navy/slate ink · one vibrant accent.
   Accent ships in two directions (Indigo default, Electric Blue alt) so teams can
   choose their vibrant CTA color without touching component code.
   =========================================================================== */
:root {
  /* --- Neutral: warm-leaning slate/navy ------------------------------------ */
  --white: #FFFFFF;
  --canvas: #FAFAF8;        /* balanced warm off-white page background */
  --canvas-tint: #F4F5F9;   /* faint cool section band */

  --slate-50:  #F8FAFC;
  --slate-100: #F1F4F9;
  --slate-200: #E5E9F0;
  --slate-300: #CBD3E1;
  --slate-400: #94A0B4;
  --slate-500: #64708A;
  --slate-600: #4A5568;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --navy-900:  #131A2E;     /* softest possible "black" for headlines */

  /* --- Accent A: Logo Blue (default — matches MightyMax logo) ------------- */
  --indigo-50:  #EBF1FD;
  --indigo-100: #D4E2FA;
  --indigo-200: #A8C5F5;
  --indigo-300: #7BA7F0;
  --indigo-400: #4E8AEB;
  --indigo-500: #3A7AF0;
  --indigo-600: #2D6FE6;   /* primary CTA — logo blue */
  --indigo-700: #1A5BC8;
  --indigo-800: #1550B5;
  --indigo-900: #103E8C;

  /* --- Accent B: Electric Blue (alt vibrant action) ---------------------- */
  --blue-50:  #ECF3FF;
  --blue-100: #D8E6FF;
  --blue-200: #B3CEFF;
  --blue-300: #82ADFF;
  --blue-400: #4E8AFA;
  --blue-500: #2A6FF0;
  --blue-600: #1657DC;
  --blue-700: #1246B0;
  --blue-800: #123B8C;
  --blue-900: #14356F;

  /* --- Functional (kept muted; never competes with the accent) ----------- */
  --green-50:  #E9F9F1;  --green-500: #12A55E;  --green-600: #0E8A4D;
  --amber-50:  #FFF6E6;  --amber-500: #E9930B;  --amber-600: #C67C08;
  --red-50:    #FDECEC;  --red-500:   #DC3A3A;  --red-600:   #BD2C2C;

  /* --- Semantic aliases (author against these, not raw scales) ----------- */
  --color-bg:          var(--canvas);
  --color-bg-alt:      var(--canvas-tint);
  --color-surface:     var(--white);
  --color-surface-2:   var(--slate-50);
  --color-surface-sunken: var(--slate-100);

  --text-strong:  var(--navy-900);
  --text-body:    var(--slate-700);
  --text-muted:   var(--slate-500);
  --text-faint:   var(--slate-400);
  --text-inverse: var(--white);
  --text-on-accent: var(--white);

  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --divider:       var(--slate-100);

  /* Accent semantics resolve to Indigo by default */
  --accent:         var(--indigo-600);
  --accent-hover:   var(--indigo-700);
  --accent-active:  var(--indigo-800);
  --accent-strong:  var(--indigo-500);
  --accent-soft:    var(--indigo-50);
  --accent-soft-2:  var(--indigo-100);
  --accent-border:  var(--indigo-200);
  --accent-contrast: var(--white);
  --focus-ring:     var(--indigo-300);
  --accent-glow:    rgba(45, 111, 230, 0.28);

  --success: var(--green-500); --success-soft: var(--green-50);
  --warning: var(--amber-500); --warning-soft: var(--amber-50);
  --danger:  var(--red-500);   --danger-soft:  var(--red-50);
  --link:    var(--indigo-600); --link-hover: var(--indigo-700);
}

/* Alternate accent direction — apply on any wrapper: <div data-accent="electric"> */
[data-accent="electric"] {
  --accent:         var(--blue-600);
  --accent-hover:   var(--blue-700);
  --accent-active:  var(--blue-800);
  --accent-strong:  var(--blue-500);
  --accent-soft:    var(--blue-50);
  --accent-soft-2:  var(--blue-100);
  --accent-border:  var(--blue-200);
  --focus-ring:     var(--blue-300);
  --accent-glow:    rgba(22, 87, 220, 0.28);
  --link:    var(--blue-600); --link-hover: var(--blue-700);
}