/* ============================================================
   KOI Group — Color Tokens
   A disciplined identity drawn from the KOI mark: deep navy
   (#1B4879) + slate (#708090). A brighter azure "signal" accent
   carries interaction, links, and AI-product moments. No other
   hues — the brand stays calm, technical, and trustworthy.
   ============================================================ */

:root {
  /* ---- Brand: Navy (primary) ---- */
  --navy-50:  #EEF3F8;
  --navy-100: #D6E2EE;
  --navy-200: #AAC2DC;
  --navy-300: #7BA0C6;
  --navy-400: #4C7AAB;
  --navy-500: #2A5C8F;
  --navy-600: #1B4879;  /* KOI brand navy */
  --navy-700: #163C66;
  --navy-800: #122F4F;
  --navy-900: #0E2238;

  /* ---- Neutral: Slate (cool gray) ---- */
  --slate-50:  #F6F7F9;
  --slate-100: #ECEEF1;
  --slate-200: #DBDFE5;
  --slate-300: #C0C7D0;
  --slate-400: #97A1AD;
  --slate-500: #708090;  /* KOI "GROUP" slate */
  --slate-600: #58646F;
  --slate-700: #434C55;
  --slate-800: #2F353C;
  --slate-900: #1C2126;

  /* ---- Accent: Azure (signal / interaction / AI) ---- */
  --azure-50:  #ECF3FE;
  --azure-100: #D5E5FD;
  --azure-200: #AECDFB;
  --azure-300: #7FAEF6;
  --azure-400: #4F8AEE;
  --azure-500: #2E6FD6;  /* signal accent */
  --azure-600: #1E59B8;
  --azure-700: #184A98;

  /* ---- Pure ---- */
  --white: #FFFFFF;
  --black: #0B0F14;

  /* ---- Semantic: status ---- */
  --success-500: #1F8F60;
  --success-50:  #E4F3EC;
  --warning-500: #C8881F;
  --warning-50:  #FAF0DC;
  --danger-500:  #C2403C;
  --danger-50:   #F9E8E7;
  --info-500:    var(--azure-500);
  --info-50:     var(--azure-50);

  /* ========================================================
     Semantic aliases — reference these in components.
     ======================================================== */

  /* Brand */
  --brand:         var(--navy-600);
  --brand-strong:  var(--navy-700);
  --brand-soft:    var(--navy-50);
  --accent:        var(--azure-500);
  --accent-strong: var(--azure-600);
  --accent-soft:   var(--azure-50);

  /* Text */
  --text-strong:   var(--slate-900);
  --text-body:     var(--slate-700);
  --text-muted:    var(--slate-500);
  --text-subtle:   var(--slate-400);
  --text-on-brand: var(--white);
  --text-on-dark:  var(--slate-100);
  --text-link:     var(--azure-600);

  /* Surface */
  --surface-page:    var(--slate-50);
  --surface-card:    var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--slate-100);
  --surface-tint:    var(--navy-50);   /* soft branded section background */
  --surface-inverse: var(--navy-900);
  --surface-brand:   var(--navy-600);

  /* Border */
  --border-subtle:  var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong:  var(--slate-400);
  --border-brand:   var(--navy-600);
  --border-focus:   var(--azure-500);

  /* Field */
  --field-bg:          var(--white);
  --field-border:      var(--slate-300);
  --field-text:        var(--slate-900);
  --field-placeholder: var(--slate-400);
}