/* ============================================================
   bloo.app — COLOR TOKENS
   Blue-anchored ("bloo"), cool-tinted neutrals, calm semantics.
   ============================================================ */

:root {
  /* --- Primary: bloo blue --------------------------------- */
  --blue-50:  #eef4ff;
  --blue-100: #dbe7ff;
  --blue-200: #bfd4ff;
  --blue-300: #93b4ff;
  --blue-400: #5e8bff;
  --blue-500: #2f6bff;  /* signature blue */
  --blue-600: #1a54f0;
  --blue-700: #1642c4;
  --blue-800: #17389b;
  --blue-900: #182f76;

  /* --- Accent: signal cyan (used sparingly) --------------- */
  --cyan-400: #34c7e0;
  --cyan-500: #12aecb;
  --cyan-600: #0d8ba3;

  /* --- Neutrals: cool blue-gray -------------------------- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f8fb;
  --neutral-100: #eef1f6;
  --neutral-200: #e1e6ef;
  --neutral-300: #cbd3e1;
  --neutral-400: #9aa6bc;
  --neutral-500: #6b7789;
  --neutral-600: #4b5666;
  --neutral-700: #333c49;
  --neutral-800: #1f262f;
  --neutral-900: #0e1319;  /* ink */

  /* --- Semantic hues ------------------------------------- */
  --green-500: #14915b;
  --green-600: #0f7a4c;
  --green-50:  #e6f5ee;
  --amber-500: #c77a16;
  --amber-600: #a86412;
  --amber-50:  #fbf1e2;
  --red-500:   #dc3b4b;
  --red-600:   #c02637;
  --red-50:    #fdeaec;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product work
     ============================================================ */

  /* Text */
  --text-strong:   var(--neutral-900);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-subtle:   var(--neutral-400);
  --text-onbrand:  var(--neutral-0);
  --text-link:     var(--blue-600);
  --text-accent:   var(--blue-600);

  /* Surfaces */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-inverse: var(--neutral-900);
  --surface-brand:   var(--blue-500);
  --surface-brand-subtle: var(--blue-50);

  /* Borders */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--blue-500);
  --border-focus:   var(--blue-500);

  /* Interactive brand */
  --brand:          var(--blue-500);
  --brand-hover:    var(--blue-600);
  --brand-active:   var(--blue-700);
  --brand-ring:     color-mix(in oklch, var(--blue-500) 32%, transparent);

  /* Feedback */
  --success:      var(--green-500);
  --success-bg:   var(--green-50);
  --warning:      var(--amber-500);
  --warning-bg:   var(--amber-50);
  --danger:       var(--red-500);
  --danger-hover: var(--red-600);
  --danger-bg:    var(--red-50);
  --info:         var(--blue-500);
  --info-bg:      var(--blue-50);
}