/* ============================================================
   KRONOS SCIENTIFICA — COLOR TOKENS
   Brand palette: navy ink, cyan accent, warm neutral, white.
   ============================================================ */

:root {
  /* ---- Brand core (the four guideline colors) ---- */
  --ks-navy:        #253551; /* primary ink / brand */
  --ks-cyan:        #22d5ff; /* accent / signal */
  --ks-mist:        #e0e0db; /* warm neutral surface */
  --ks-white:       #ffffff;

  /* ---- Navy ramp (tints + shades of #253551) ---- */
  --ks-navy-950: #11192a;
  --ks-navy-900: #1a2740;
  --ks-navy-800: #253551; /* base */
  --ks-navy-700: #324563;
  --ks-navy-600: #435778;
  --ks-navy-500: #5d7191;
  --ks-navy-400: #8493ab;
  --ks-navy-300: #adb8c8;
  --ks-navy-200: #d0d6e0;
  --ks-navy-100: #e7eaef;
  --ks-navy-50:  #f4f6f9;

  /* ---- Cyan ramp (tints + shades of #22d5ff) ---- */
  --ks-cyan-700: #0a7fa0;
  --ks-cyan-600: #0fa6cf;
  --ks-cyan-500: #22d5ff; /* base */
  --ks-cyan-400: #5ce0ff;
  --ks-cyan-300: #92ebff;
  --ks-cyan-200: #c2f4ff;
  --ks-cyan-100: #e4fbff;

  /* ---- Warm neutral ramp (stone) ---- */
  --ks-stone-900: #2b2b28;
  --ks-stone-700: #57574f;
  --ks-stone-500: #8a8a80;
  --ks-stone-400: #abab9f;
  --ks-stone-300: #c9c9c2;
  --ks-stone-200: #e0e0db; /* base mist */
  --ks-stone-100: #efefea;
  --ks-stone-50:  #f7f7f3;

  /* ---- Semantic status (tuned to sit beside navy/cyan) ---- */
  --ks-success:    #1f9d6b;
  --ks-success-bg: #e3f5ec;
  --ks-warning:    #d98a1f;
  --ks-warning-bg: #fbeed6;
  --ks-danger:     #d2444d;
  --ks-danger-bg:  #fae1e2;
  --ks-info:       #0fa6cf;
  --ks-info-bg:    #e4fbff;

  /* ============================================================
     SEMANTIC ALIASES — use these in components
     ============================================================ */
  --color-bg:            var(--ks-stone-50);   /* app canvas */
  --color-bg-subtle:     var(--ks-stone-100);
  --surface-card:        var(--ks-white);
  --surface-raised:      var(--ks-white);
  --surface-sunken:      var(--ks-navy-50);
  --surface-inverse:     var(--ks-navy-800);   /* dark sections */

  --text-strong:         var(--ks-navy-900);   /* headings */
  --text-body:           var(--ks-navy-800);
  --text-muted:          var(--ks-navy-500);
  --text-subtle:         var(--ks-navy-400);
  --text-on-navy:        var(--ks-white);
  --text-on-navy-muted:  var(--ks-navy-300);
  --text-link:           var(--ks-cyan-700);

  --border-subtle:       var(--ks-navy-100);
  --border-default:      var(--ks-navy-200);
  --border-strong:       var(--ks-navy-300);
  --border-on-navy:      rgba(255, 255, 255, 0.14);

  --accent:              var(--ks-cyan-500);
  --accent-strong:       var(--ks-cyan-600);
  --accent-ink:          var(--ks-navy-800);   /* text on cyan */
  --focus-ring:          var(--ks-cyan-500);

  --brand:               var(--ks-navy-800);
  --brand-contrast:      var(--ks-white);
}