/* ============================================================
   Kreayotoo — Color tokens
   Brand: Navy #022A5D  ·  Mint/Teal #7FCDC4
   ============================================================ */
:root {
  /* --- Brand: Navy (primary) ------------------------------ */
  --navy-950: #021022;
  --navy-900: #04193a;
  --navy-800: #022a5d; /* core brand navy (from logo) */
  --navy-700: #0a3a72;
  --navy-600: #134c8c;
  --navy-500: #1f5fa6;
  --navy-400: #3f7bbd;
  --navy-300: #74a2d4;
  --navy-200: #aac6e7;
  --navy-100: #d6e4f4;
  --navy-50:  #eef4fb;

  /* --- Brand: Mint / Teal (accent) ------------------------ */
  --mint-900: #1c5b53;
  --mint-800: #2a7d72;
  --mint-700: #389e90;
  --mint-600: #4cb6a7;
  --mint-500: #7fcdc4; /* core brand mint (from logo) */
  --mint-400: #9bd9d1;
  --mint-300: #b6e4de;
  --mint-200: #d2efeb;
  --mint-100: #e8f7f5;
  --mint-50:  #f3fbfa;

  /* --- Neutrals (slate, cool to match navy) --------------- */
  --slate-950: #0b1320;
  --slate-900: #131c2b;
  --slate-800: #1f2a3c;
  --slate-700: #344155;
  --slate-600: #4c5a70;
  --slate-500: #687588;
  --slate-400: #8b97a8;
  --slate-300: #b3bcc9;
  --slate-200: #d6dce4;
  --slate-100: #e9edf2;
  --slate-50:  #f5f7fa;
  --white:     #ffffff;

  /* --- Semantic: status ----------------------------------- */
  --success-600: #1f9d6b;
  --success-500: #26b67d;
  --success-100: #dcf4ea;
  --warning-600: #c98a14;
  --warning-500: #e8a52a;
  --warning-100: #fbeecf;
  --danger-600:  #d14343;
  --danger-500:  #e25555;
  --danger-100:  #fbe0e0;
  --info-600:    var(--navy-600);
  --info-500:    var(--navy-500);
  --info-100:    var(--navy-100);

  /* ========================================================
     Semantic aliases — use these in components
     ======================================================== */
  --brand:            var(--navy-800);
  --brand-hover:      var(--navy-900);
  --brand-active:     var(--navy-950);
  --brand-soft:       var(--navy-50);
  --brand-on:         var(--white);

  --accent:           var(--mint-500);
  --accent-strong:    var(--mint-700);
  --accent-soft:      var(--mint-100);
  --accent-on:        var(--navy-900);

  --bg-page:          var(--slate-50);
  --bg-canvas:        var(--white);
  --surface-card:     var(--white);
  --surface-raised:   var(--white);
  --surface-sunken:   var(--slate-50);
  --surface-inverse:  var(--navy-800);

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

  --border-subtle:    var(--slate-200);
  --border-default:   var(--slate-300);
  --border-strong:    var(--slate-400);
  --border-focus:     var(--navy-500);

  --ring:             color-mix(in srgb, var(--navy-500) 35%, transparent);
  --ring-accent:      color-mix(in srgb, var(--mint-600) 45%, transparent);
}