/* ATESSO — Color tokens
   Primary teal (#6DCFB5) and ink (#2C2E35) taken from the official brand PDF vector logo.
   Neutral greys are a warm-slate scale keyed to the wordmark charcoal. */

:root {
  /* ---- Brand teal scale (keyed to the vector logo mint #6DCFB5) ---- */
  --teal-50:  #EEFAF6;
  --teal-100: #D8F4EC;
  --teal-200: #B6E9DA;
  --teal-300: #90DCC7;
  --teal-400: #6DCFB5; /* PRIMARY — exact ATESSO mint from brand PDF */
  --teal-500: #4FBDA0;
  --teal-600: #3AA187;
  --teal-700: #2C7E6B;
  --teal-800: #235F52;
  --teal-900: #17423A;

  /* ---- Neutral / ink scale (warm-slate, keyed to wordmark #2C2E35) ---- */
  --white:    #FFFFFF;
  --paper:    #F7F8F8; /* page background, cool off-white */
  --gray-50:  #F3F4F5;
  --gray-100: #E8EAEC;
  --gray-200: #D8DBDF;
  --gray-300: #BFC3C9;
  --gray-400: #969BA4;
  --gray-500: #6B6F79;
  --gray-600: #4E525B;
  --gray-700: #3A3D45;
  --gray-800: #2F323A;
  --gray-900: #2C2E35; /* ink — exact ATESSO wordmark charcoal */

  /* ---- Semantic status ---- */
  --green-500:  #2FA36B;
  --green-100:  #DCF3E6;
  --amber-500:  #E0A23B;
  --amber-100:  #FaefD8;
  --red-500:    #DB5A4E;
  --red-100:    #FBE2DF;
  --blue-500:   #3B93B5;
  --blue-100:   #DDEEF4;

  /* ---- Semantic aliases (use these in components) ---- */
  --color-primary:         var(--teal-400);
  --color-primary-hover:   var(--teal-500);
  --color-primary-active:  var(--teal-600);
  --color-primary-subtle:  var(--teal-100);
  --color-on-primary:      #16423A; /* deep teal-ink reads clean on mint */

  --text-strong:   var(--gray-900);
  --text-body:     var(--gray-700);
  --text-muted:    var(--gray-500);
  --text-subtle:   var(--gray-400);
  --text-inverse:  var(--white);
  --text-link:     var(--teal-600);

  --surface-page:    var(--paper);
  --surface-card:    var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--gray-50);
  --surface-inverse: var(--gray-900);
  --surface-brand:   var(--teal-400);

  --border-subtle:  var(--gray-100);
  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);

  --focus-ring: 0 0 0 3px rgba(109, 207, 181, 0.45);

  --success: var(--green-500);
  --warning: var(--amber-500);
  --danger:  var(--red-500);
  --info:    var(--blue-500);
}