/* ==========================================================================
   Enamel — Color tokens
   Clinical teal primary · slate-navy ink · cool neutrals · warm coral accent
   Base palettes first, semantic aliases at the bottom.
   ========================================================================== */

:root {
  /* --- Brand: Enamel Teal (primary) ------------------------------------ */
  --teal-50:  #ECFDFB;
  --teal-100: #CFF6F0;
  --teal-200: #A1ECE3;
  --teal-300: #66DBD0;
  --teal-400: #2EC2B7;
  --teal-500: #14A89D;
  --teal-600: #0E8C84;  /* primary action */
  --teal-700: #0F706A;
  --teal-800: #115A56;
  --teal-900: #133F3C;
  --teal-950: #052724;

  /* --- Ink: slate-navy (text + dark surfaces) -------------------------- */
  --ink-50:  #F3F6F8;
  --ink-100: #E5EBEF;
  --ink-200: #C9D4DB;
  --ink-300: #9DAEB9;
  --ink-400: #6B8090;
  --ink-500: #4C6271;
  --ink-600: #3A4D5A;
  --ink-700: #2C3B46;
  --ink-800: #1E2A33;
  --ink-900: #141D24;
  --ink-950: #0B1218;

  /* --- Neutrals: cool clinical grays ----------------------------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F9FA;
  --neutral-100: #F0F3F5;
  --neutral-200: #E4E9ED;
  --neutral-300: #D2DADF;
  --neutral-400: #B0BBC2;
  --neutral-500: #85939C;
  --neutral-600: #61707A;
  --neutral-700: #47545D;
  --neutral-800: #2F3940;
  --neutral-900: #1B232A;

  /* --- Accent: warm coral (the human counterweight) -------------------- */
  --coral-50:  #FEF1ED;
  --coral-100: #FCDED4;
  --coral-200: #F9BFAC;
  --coral-300: #F49B7F;
  --coral-400: #EE7551;
  --coral-500: #E15A33;  /* accent action */
  --coral-600: #C2451F;
  --coral-700: #9C3619;

  /* --- Semantic hues ---------------------------------------------------- */
  --green-50:  #E9F8EF;
  --green-100: #C7EDD5;
  --green-500: #16A34A;
  --green-600: #128A3E;
  --green-700: #0E6E32;

  --amber-50:  #FDF4E3;
  --amber-100: #FAE6BE;
  --amber-500: #E08A0B;
  --amber-600: #BE720A;
  --amber-700: #945907;

  --red-50:  #FDECEC;
  --red-100: #F9D2D0;
  --red-500: #DC4A41;
  --red-600: #C13129;
  --red-700: #9C2620;

  --blue-50:  #EAF1FD;
  --blue-100: #CFDEFA;
  --blue-500: #2E72D2;
  --blue-600: #2059B0;
  --blue-700: #18468C;

  --violet-50:  #F1EDFB;
  --violet-100: #DDD2F6;
  --violet-500: #7C5CD6;
  --violet-600: #6344BC;

  /* === Semantic aliases ================================================= */

  /* Brand */
  --brand:           var(--teal-600);
  --brand-hover:     var(--teal-700);
  --brand-active:    var(--teal-800);
  --brand-subtle:    var(--teal-50);
  --brand-subtle-2:  var(--teal-100);
  --brand-on:        var(--neutral-0);
  --brand-ring:      color-mix(in oklch, var(--teal-600) 35%, transparent);

  --accent:          var(--coral-500);
  --accent-hover:    var(--coral-600);
  --accent-subtle:   var(--coral-50);

  /* Surfaces */
  --canvas:          var(--neutral-50);   /* app background */
  --surface:         var(--neutral-0);    /* cards, panels */
  --surface-raised:  var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-inverse: var(--ink-900);
  --surface-brand:   var(--teal-600);

  /* Text */
  --text-strong:     var(--ink-900);      /* headings */
  --text-body:       var(--ink-800);      /* default text */
  --text-muted:      var(--ink-500);      /* secondary */
  --text-subtle:     var(--ink-400);      /* tertiary, hints */
  --text-on-brand:   var(--neutral-0);
  --text-on-dark:    var(--neutral-50);
  --text-link:       var(--teal-700);

  /* Borders & dividers */
  --border:          var(--neutral-200);
  --border-strong:   var(--neutral-300);
  --border-subtle:   var(--neutral-100);
  --divider:         var(--neutral-200);
  --ring-focus:      var(--teal-600);

  /* Semantic status */
  --success:         var(--green-600);
  --success-subtle:  var(--green-50);
  --success-text:    var(--green-700);
  --warning:         var(--amber-600);
  --warning-subtle:  var(--amber-50);
  --warning-text:    var(--amber-700);
  --danger:          var(--red-600);
  --danger-subtle:   var(--red-50);
  --danger-text:     var(--red-700);
  --info:            var(--blue-600);
  --info-subtle:     var(--blue-50);
  --info-text:       var(--blue-700);

  /* Data-viz categorical scale (charts, BI) */
  --chart-1: var(--teal-600);
  --chart-2: var(--blue-500);
  --chart-3: var(--coral-500);
  --chart-4: var(--amber-500);
  --chart-5: var(--violet-500);
  --chart-6: var(--green-600);
  --chart-7: var(--ink-400);
}