/* ============================================================
   Six30Labs — Color tokens
   Source of truth: Six30Labs Brand Guideline (2024)
     Primary   Dark Teal      #044F56
               Persian Green  #00AAAE
     Secondary Greenish Teal  #37BA92
   System applies these on a light, clean-corporate canvas.
   ============================================================ */
:root {
  /* ---- Brand: Teal ramp (anchored on #044F56 / #00AAAE) ---- */
  --teal-50:  #E6F6F6;
  --teal-100: #C2EAEB;
  --teal-200: #8EDADC;
  --teal-300: #4EC6C9;
  --teal-400: #00AAAE; /* Persian Green — bright brand */
  --teal-500: #00969B;
  --teal-600: #007E84;
  --teal-700: #066369;
  --teal-800: #044F56; /* Dark Teal — primary brand */
  --teal-900: #03393F;

  /* ---- Brand: Green ramp (anchored on #37BA92) ---- */
  --green-50:  #E9F8F2;
  --green-100: #C9EEDF;
  --green-200: #98E0C5;
  --green-300: #60CEA8;
  --green-400: #37BA92; /* Greenish Teal — secondary brand */
  --green-500: #2AA07C;
  --green-600: #1F8265;
  --green-700: #18664F;

  /* ---- Neutrals: cool slate, harmonized with teal ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F8F9;
  --neutral-100: #EDF1F2;
  --neutral-200: #E0E6E8;
  --neutral-300: #C9D2D5;
  --neutral-400: #9BA6AB;
  --neutral-500: #6C777C;
  --neutral-600: #4D585D;
  --neutral-700: #353E42;
  --neutral-800: #20272A;
  --neutral-900: #121819;

  /* ---- Functional hues ---- */
  --blue-500:   #2A7DE1; /* info */
  --amber-500:  #E2A23B; /* warning */
  --red-500:    #E0484D; /* danger */
  --red-600:    #C53B40;

  /* ===========================================================
     Semantic aliases — reference these in components
     =========================================================== */
  /* Brand */
  --brand:            var(--teal-800);
  --brand-bright:     var(--teal-400);
  --brand-hover:      var(--teal-700);
  --brand-active:     var(--teal-900);
  --brand-subtle:     var(--teal-50);
  --brand-on:         #FFFFFF;
  --accent:           var(--green-400);
  --accent-hover:     var(--green-500);
  --accent-subtle:    var(--green-50);

  /* Surfaces & backgrounds */
  --bg:               var(--neutral-50);
  --surface:          var(--neutral-0);
  --surface-sunken:   var(--neutral-100);
  --surface-raised:   var(--neutral-0);
  --surface-inverse:  var(--teal-900);

  /* Text */
  --text-primary:     var(--neutral-900);
  --text-secondary:   var(--neutral-600);
  --text-muted:       var(--neutral-500);
  --text-disabled:    var(--neutral-400);
  --text-inverse:     var(--neutral-0);
  --text-brand:       var(--teal-800);
  --text-link:        var(--teal-600);

  /* Borders */
  --border-subtle:    var(--neutral-100);
  --border-default:   var(--neutral-200);
  --border-strong:    var(--neutral-300);
  --border-brand:     var(--teal-400);
  --ring:             color-mix(in srgb, var(--teal-400) 45%, transparent);

  /* Semantic states */
  --success:          var(--green-500);
  --success-subtle:   var(--green-50);
  --success-on:       #FFFFFF;
  --warning:          var(--amber-500);
  --warning-subtle:   #FCF3E4;
  --warning-on:       #3A2A07;
  --danger:           var(--red-500);
  --danger-subtle:    #FCEBEC;
  --danger-on:        #FFFFFF;
  --info:             var(--blue-500);
  --info-subtle:      #EAF2FC;
  --info-on:          #FFFFFF;
}