/* ============================================================
   Cillus.app — Color tokens  ·  "Blueprint" identity
   Warm bone neutrals · vermillion signal · carbon ink.
   Base scales first, then semantic aliases.
   ============================================================ */
:root {
  /* ---- Brand: Flame (vermillion) — the single signal color ---- */
  --flame-50:  #FDEFE8;
  --flame-100: #FBD8C7;
  --flame-200: #F8B79A;
  --flame-300: #F58F62;
  --flame-400: #F3622F;
  --flame-500: #F03E0C;   /* primary */
  --flame-600: #CC3308;
  --flame-700: #A02706;
  --flame-800: #761D05;
  --flame-900: #4E1304;

  /* ---- Neutral: Bone (warm grey, carbon ink) ---- */
  --bone-0:   #FFFFFF;    /* pure card surface */
  --bone-50:  #FAF8F3;
  --bone-100: #F4F1EA;    /* page paper */
  --bone-200: #E9E2D4;
  --bone-300: #D8CFBC;
  --bone-400: #B6AC97;
  --bone-500: #8C8474;
  --bone-600: #6B6358;
  --bone-700: #4A4639;    /* olive grey */
  --bone-800: #2C291F;
  --bone-900: #16140F;    /* carbon ink */

  /* ---- Semantic status hues (warm-tuned, distinct from flame) ---- */
  --green-100: #DCEEE2;
  --green-500: #2F8F5B;
  --green-700: #1F6B42;
  --amber-100: #FBEFCF;
  --amber-500: #E8A317;
  --amber-700: #9A6A0B;
  --red-100:   #F7D9D2;
  --red-500:   #B3261E;
  --red-700:   #841812;
  --steel-100: #DCE6EC;   /* cool accent for data viz only */
  --steel-500: #3D6B8F;
  --steel-700: #2A4D68;

  /* ============================================================
     Semantic aliases — reference these in components, not raw scales
     ============================================================ */

  /* Backgrounds & surfaces */
  --bg-page:        var(--bone-100);
  --bg-page-alt:    var(--bone-50);
  --surface-card:   var(--bone-0);
  --surface-sunken: var(--bone-200);
  --surface-inset:  var(--bone-50);
  --surface-dark:   var(--bone-900);

  /* Text */
  --text-strong:    var(--bone-900);
  --text-body:      var(--bone-800);
  --text-muted:     var(--bone-600);
  --text-subtle:    var(--bone-500);
  --text-on-flame:  #FFFFFF;
  --text-on-dark:   var(--bone-100);
  --text-link:      var(--flame-600);

  /* Borders & lines */
  --border-strong:  var(--bone-900);   /* framed components, hard outlines */
  --border-default: var(--bone-300);
  --border-subtle:  var(--bone-200);
  --grid-line:      rgba(22, 20, 15, 0.05);

  /* Brand / primary action */
  --primary:        var(--flame-500);
  --primary-hover:  var(--flame-600);
  --primary-press:  var(--flame-700);
  --primary-soft:   var(--flame-50);
  --primary-on:     #FFFFFF;
  --focus-ring:     var(--flame-400);

  /* Status semantic */
  --success:        var(--green-500);
  --success-soft:   var(--green-100);
  --warning:        var(--amber-500);
  --warning-soft:   var(--amber-100);
  --danger:         var(--red-500);
  --danger-soft:    var(--red-100);
  --info:           var(--steel-500);
  --info-soft:      var(--steel-100);
}