/* ============================================================
   Canalis Labs — Color Tokens
   Brand: royal blue (sampled from the logomark, ~#406BE0)
   Accent: a cyan-teal "current" that signals data, flow,
   and the channel metaphor in the Canalis name.
   Neutrals: cool blue-grey slate for an enterprise feel.
   ============================================================ */

:root {
  /* ---- Brand blue scale ---- */
  --blue-50:  #eef2fd;
  --blue-100: #dde4fb;
  --blue-200: #bdcaf7;
  --blue-300: #92a8f0;
  --blue-400: #6b88ea;
  --blue-500: #406be0;   /* brand primary — from logo */
  --blue-600: #2f54c7;
  --blue-700: #2742a0;
  --blue-800: #233a82;
  --blue-900: #1f3066;
  --blue-950: #141d3d;

  /* ---- Accent: cyan-teal ("current") ---- */
  --accent-50:  #e7fafd;
  --accent-100: #c4f1f8;
  --accent-200: #92e4f0;
  --accent-300: #57d2e3;
  --accent-400: #22b9cd;
  --accent-500: #0ca5c0;   /* accent */
  --accent-600: #0a85a0;
  --accent-700: #0f6a81;
  --accent-800: #145668;
  --accent-900: #134858;

  /* ---- Neutral slate (cool, slightly blue) ---- */
  --neutral-0:   #ffffff;
  --neutral-25:  #fafbfc;
  --neutral-50:  #f4f6fa;
  --neutral-100: #edf1f6;
  --neutral-200: #dde4ec;
  --neutral-300: #c5cedb;
  --neutral-400: #99a4b5;
  --neutral-500: #6b7688;
  --neutral-600: #4d5667;
  --neutral-700: #39414f;
  --neutral-800: #262c37;
  --neutral-900: #151a22;
  --neutral-950: #0c0f14;

  /* ---- Functional / semantic ---- */
  --green-50:  #e9f8f0;
  --green-500: #15a866;
  --green-600: #0f8a53;
  --green-700: #0c6e43;

  --amber-50:  #fef6e7;
  --amber-500: #e8950c;
  --amber-600: #c47a06;
  --amber-700: #9a5f06;

  --red-50:  #fdecec;
  --red-500: #e0413f;
  --red-600: #c52f2e;
  --red-700: #a02523;

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

  /* Brand */
  --brand:            var(--blue-500);
  --brand-hover:      var(--blue-600);
  --brand-active:     var(--blue-700);
  --brand-subtle:     var(--blue-50);
  --brand-subtle-2:   var(--blue-100);
  --brand-border:     var(--blue-200);
  --on-brand:         var(--neutral-0);

  --accent:           var(--accent-500);
  --accent-hover:     var(--accent-600);
  --accent-subtle:    var(--accent-50);
  --on-accent:        var(--neutral-0);

  /* Text */
  --text-strong:   var(--neutral-900);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-subtle:   var(--neutral-400);
  --text-link:     var(--blue-600);
  --text-on-dark:  var(--neutral-0);
  --text-on-dark-muted: rgba(255,255,255,0.72);

  /* Surfaces */
  --surface-page:    var(--neutral-25);
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-50);
  --surface-raised:  var(--neutral-0);
  --surface-inverse: var(--neutral-900);
  --surface-brand:   var(--blue-500);
  --surface-brand-deep: var(--blue-950);

  /* Borders & dividers */
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-subtle: var(--neutral-100);
  --divider:       var(--neutral-200);
  --ring:          color-mix(in srgb, var(--blue-500) 38%, transparent);

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