/* ============================================================
   KYRO — Color tokens
   Monochrome, premium café SaaS. White / black / charcoal /
   grays as the system; small, restrained status colors only.
   ============================================================ */

:root {
  /* ---- Ink (near-blacks, sidebar + primary text) ---- */
  --kyro-ink-900: #131313;  /* sidebar base, primary buttons, headings */
  --kyro-ink-800: #1b1b1b;  /* sidebar raised panels */
  --kyro-ink-700: #262626;  /* hover on dark surfaces */
  --kyro-ink-600: #333333;  /* dark borders / dividers on dark */

  /* ---- Neutral gray ramp ---- */
  --kyro-gray-500: #6b6b6b; /* secondary / muted text */
  --kyro-gray-450: #828282; /* tertiary text, captions */
  --kyro-gray-400: #9a9a9a; /* disabled text, icons-muted */
  --kyro-gray-300: #c4c4c4; /* strong border / dark stack segment */
  --kyro-gray-250: #d6d6d6; /* mid stack segment */
  --kyro-gray-200: #e6e6e6; /* default hairline border */
  --kyro-gray-150: #eeeeee; /* light stack segment, track */
  --kyro-gray-100: #f4f4f4; /* subtle fill / hover */
  --kyro-gray-50:  #f8f8f7; /* app background (warm off-white) */
  --kyro-white:    #ffffff;

  /* ---- Status: success (good / in stock) ---- */
  --kyro-green-600: #16804a;
  --kyro-green-500: #1f9d57;
  --kyro-green-100: #e7f4ec;

  /* ---- Status: attention (low / pending) ---- */
  --kyro-amber-600: #b06f12;
  --kyro-amber-500: #d6900f;
  --kyro-amber-100: #fbf1de;

  /* ---- Status: warning (critical / out of stock) ---- */
  --kyro-red-600: #b8342f;
  --kyro-red-500: #d8453f;
  --kyro-red-100: #fae9e8;

  /* ---- Status: info (on order / neutral accent) ---- */
  --kyro-slate-600: #41617f;
  --kyro-slate-500: #5a7b99;
  --kyro-slate-100: #eaeff4;

  /* ============================================================
     Semantic aliases — reach for THESE in product code
     ============================================================ */

  /* Surfaces */
  --kyro-surface-app:      var(--kyro-gray-50);
  --kyro-surface-card:     var(--kyro-white);
  --kyro-surface-sunken:   var(--kyro-gray-100);
  --kyro-surface-hover:    var(--kyro-gray-100);
  --kyro-surface-inverse:  var(--kyro-ink-900);

  /* Sidebar (dark) */
  --kyro-sidebar-bg:       var(--kyro-ink-900);
  --kyro-sidebar-panel:    var(--kyro-ink-800);
  --kyro-sidebar-hover:    var(--kyro-ink-700);
  --kyro-sidebar-border:   var(--kyro-ink-600);
  --kyro-sidebar-text:     #e9e9e9;
  --kyro-sidebar-muted:    #8d8d8d;

  /* Text */
  --kyro-text-strong:   var(--kyro-ink-900);
  --kyro-text-body:     #2b2b2b;
  --kyro-text-muted:    var(--kyro-gray-500);
  --kyro-text-subtle:   var(--kyro-gray-450);
  --kyro-text-oninverse: #f4f4f4;

  /* Borders */
  --kyro-border:        var(--kyro-gray-200);
  --kyro-border-strong: var(--kyro-gray-300);
  --kyro-border-focus:  var(--kyro-ink-900);

  /* Status semantics */
  --kyro-status-good-fg:   var(--kyro-green-600);
  --kyro-status-good-bg:   var(--kyro-green-100);
  --kyro-status-warn-fg:   var(--kyro-amber-600);
  --kyro-status-warn-bg:   var(--kyro-amber-100);
  --kyro-status-bad-fg:    var(--kyro-red-600);
  --kyro-status-bad-bg:    var(--kyro-red-100);
  --kyro-status-info-fg:   var(--kyro-slate-600);
  --kyro-status-info-bg:   var(--kyro-slate-100);

  /* Accents for data viz (monochrome-first) */
  --kyro-bar-good: var(--kyro-ink-900);
  --kyro-bar-mid:  var(--kyro-gray-300);
  --kyro-bar-low:  var(--kyro-gray-200);
  --kyro-bar-out:  repeating-linear-gradient(45deg, var(--kyro-gray-150), var(--kyro-gray-150) 4px, var(--kyro-white) 4px, var(--kyro-white) 8px);
}