/* ============================================================
   ZeltenLabs — Color tokens
   Deep crimson + charcoal ink + metallic silver. Industrial,
   sharp, engineered. Sampled from the brand marks & key art.
   ============================================================ */

:root {
  /* ---- Brand red (Zelten Red) ---- */
  --red-50:  #fdeceb;
  --red-100: #fbd0cc;
  --red-200: #f5a39b;
  --red-300: #ec6e62;
  --red-400: #de3a2a;
  --red-500: #c8160b;  /* primary brand red */
  --red-600: #ad0d04;  /* flat fill red (from key art) */
  --red-700: #8c0a03;
  --red-800: #6a0904;
  --red-900: #4a0a06;

  /* ---- Ink / charcoal (neutral cool-gray) ---- */
  --ink-950: #0e0e10;  /* near-black */
  --ink-900: #1a1a1e;  /* brand charcoal (from dark key art) */
  --ink-800: #232328;
  --ink-700: #2e2e34;
  --ink-600: #3c3c44;
  --ink-500: #595963;
  --ink-400: #7c7c87;
  --ink-300: #a0a0aa;
  --ink-200: #c6c6cd;
  --ink-150: #dadade;
  --ink-100: #e8e8eb;
  --ink-50:  #f4f4f6;
  --ink-25:  #fafafb;
  --white:   #ffffff;

  /* ---- Metallic silver (the Z mark gradient) ---- */
  --silver-hi:  #ffffff;
  --silver-1:   #f2f3f5;
  --silver-2:   #d4d7dc;
  --silver-3:   #b1b6bf;
  --silver-lo:  #8b9099;
  --metallic: linear-gradient(135deg, #ffffff 0%, #e2e4e8 28%, #b6bbc4 55%, #d9dce1 72%, #9aa0aa 100%); /* @kind color */
  --metallic-soft: linear-gradient(135deg, #fbfbfc 0%, #e7e9ec 50%, #cfd2d8 100%); /* @kind color */

  /* ---- Semantic status ---- */
  --green-500: #1f9d57;
  --green-50:  #e7f6ee;
  --amber-500: #d98916;
  --amber-50:  #fcf2e1;
  --blue-500:  #2563c9;
  --blue-50:   #e8f0fc;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */

  /* Surfaces */
  --surface-page:      var(--ink-25);
  --surface-card:      var(--white);
  --surface-sunken:    var(--ink-50);
  --surface-raised:    var(--white);
  --surface-inverse:   var(--ink-900);
  --surface-inverse-2: var(--ink-800);
  --surface-brand:     var(--red-500);
  --surface-brand-strong: var(--red-600);

  /* Text */
  --text-strong:    var(--ink-950);
  --text-body:      var(--ink-800);
  --text-muted:     var(--ink-500);
  --text-subtle:    var(--ink-400);
  --text-on-brand:  var(--white);
  --text-on-dark:   var(--ink-100);
  --text-on-dark-muted: var(--ink-300);
  --text-link:      var(--red-600);

  /* Borders */
  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-150);
  --border-strong:  var(--ink-300);
  --border-inverse: var(--ink-700);
  --border-brand:   var(--red-500);

  /* Interactive / accent */
  --accent:          var(--red-500);
  --accent-hover:    var(--red-600);
  --accent-active:   var(--red-700);
  --accent-soft:     var(--red-50);
  --focus-ring:      var(--red-400);

  /* Status semantics */
  --success: var(--green-500);
  --warning: var(--amber-500);
  --info:    var(--blue-500);
  --danger:  var(--red-500);
}