/* ============================================================
   USEReady — Color tokens
   Brand primaries:  #ea4224 (Spark/red)  #0e1239 (Ink/navy)  #0f3f65 (Deep blue)
   Secondaries:      #00b1bd (Teal)       #cac7c7 (Warm gray)
   ============================================================ */
:root {
  /* ---- Brand: Spark (red-orange) — energy, CTAs, the accent bar ---- */
  --spark-50:  #fdeee9;
  --spark-100: #fbd9cf;
  --spark-200: #f6b4a1;
  --spark-300: #f28d72;
  --spark-400: #ee6644;
  --spark-500: #ea4224;  /* BASE — primary brand red */
  --spark-600: #cd351a;
  --spark-700: #a32815;
  --spark-800: #7c1f12;
  --spark-900: #561610;

  /* ---- Brand: Ink (navy) — text, headers, dark surfaces ---- */
  --ink-50:  #eceef4;
  --ink-100: #d3d7e4;
  --ink-200: #a7aecb;
  --ink-300: #6f79a0;
  --ink-400: #3d476e;
  --ink-500: #1c2450;
  --ink-600: #141a40;
  --ink-700: #0e1239;  /* BASE — brand navy */
  --ink-800: #0a0d2b;
  --ink-900: #06081d;

  /* ---- Brand: Deep blue — secondary surfaces, links, charts ---- */
  --blue-50:  #e8eef4;
  --blue-100: #c5d6e4;
  --blue-200: #8fb0ca;
  --blue-300: #5288ab;
  --blue-400: #22618a;
  --blue-500: #0f3f65;  /* BASE — deep blue */
  --blue-600: #0c3454;
  --blue-700: #0a2841;
  --blue-800: #071d2f;
  --blue-900: #05131f;

  /* ---- Secondary: Teal — highlights, success-ish accents, data viz ---- */
  --teal-50:  #e0f7f9;
  --teal-100: #b3ecf0;
  --teal-200: #7fdfe6;
  --teal-300: #40ccd7;
  --teal-400: #00b1bd;  /* BASE — teal */
  --teal-500: #009aa5;
  --teal-600: #007e87;
  --teal-700: #006269;

  /* ---- Neutrals (navy-tinted cool grays) ---- */
  --gray-0:   #ffffff;
  --gray-25:  #f8f9fc;
  --gray-50:  #f1f3f8;
  --gray-100: #e7eaf1;
  --gray-200: #d6dbe6;
  --gray-300: #bcc3d3;
  --gray-400: #939db4;
  --gray-500: #6b7691;
  --gray-600: #4e586f;
  --gray-700: #394259;  /* warm-gray brand ref: #cac7c7 is used as a tint, see --warm-gray */
  --gray-800: #232b40;
  --gray-900: #0e1239;
  --warm-gray: #cac7c7;   /* brand secondary "stone" — dividers on light, captions */

  /* ---- Semantic status ---- */
  --success-500: #1f9d6b;
  --success-50:  #e6f4ee;
  --warning-500: #e9a23b;
  --warning-50:  #fcf2e1;
  --danger-500:  #d23b2a;
  --danger-50:   #fbe9e6;
  --info-500:    #0f3f65;
  --info-50:     #e8eef4;

  /* ============================================================
     SEMANTIC ALIASES  — use these in components, not raw scales
     ============================================================ */
  /* Brand */
  --brand:            var(--spark-500);
  --brand-hover:      var(--spark-600);
  --brand-active:     var(--spark-700);
  --brand-contrast:   #ffffff;
  --brand-navy:       var(--ink-700);
  --brand-blue:       var(--blue-500);
  --brand-teal:       var(--teal-400);

  /* Text */
  --text-strong:   var(--ink-700);   /* headings */
  --text-body:     #2b3350;          /* default copy */
  --text-muted:    var(--gray-500);  /* secondary / captions */
  --text-subtle:   var(--gray-400);  /* placeholders, disabled */
  --text-on-dark:  #ffffff;
  --text-on-dark-muted: rgba(255,255,255,0.66);
  --text-link:     var(--blue-500);
  --text-brand:    var(--spark-600);

  /* Surfaces */
  --surface-page:    var(--gray-25);
  --surface-card:    #ffffff;
  --surface-sunken:  var(--gray-50);
  --surface-raised:  #ffffff;
  --surface-dark:    var(--ink-700);
  --surface-dark-2:  var(--ink-600);
  --surface-inverse: var(--ink-700);

  /* Borders & dividers */
  --border-subtle:  var(--gray-100);
  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-brand:   var(--spark-500);
  --divider:        var(--gray-100);

  /* Focus */
  --focus-ring: color-mix(in srgb, var(--spark-500) 45%, transparent);
}