/* ============================================================
   Sail — Color tokens
   Brand palette extracted from the Sail Brand Book + product UI.
   Base scales first, then semantic aliases.
   ============================================================ */
:root {
  /* ---- Brand ---------------------------------------------------- */
  --sail-silk-blue: #438FC1;      /* primary brand blue   */
  --sail-fountain-blue: #5FB8CD;  /* brand "bright" teal  */
  --sail-light-blue: #99CCFF;     /* secondary            */
  --sail-royal-blue: #2C66FF;     /* secondary accent     */
  --sail-sky-blue: #01BCFF;       /* secondary accent     */
  --sail-teal: #6EBACC;           /* soft teal (icons)    */

  /* Signature gradient — sail mark + primary CTAs */
  --sail-gradient: linear-gradient(98deg, #438FC1 0%, #5FB8CD 100%); /* @kind other */
  --sail-gradient-vertical: linear-gradient(0deg, #438FC1 9.51%, #5FB8CD 90.41%); /* @kind other */

  /* Brand blue ramp (tints/shades of silk + fountain) */
  --blue-25:  #F5FBFD;
  --blue-50:  #EAF6FA;
  --blue-100: #D2ECF3;
  --blue-200: #BFEFFB;   /* light wash used in banners */
  --blue-300: #99D6E6;
  --blue-400: #6EBACC;
  --blue-500: #5FB8CD;   /* fountain blue */
  --blue-600: #438FC1;   /* silk blue     */
  --blue-700: #29435D;   /* deep navy text */
  --blue-800: #1F3247;

  /* ---- Neutral / gray scale (Untitled-UI based) ----------------- */
  --gray-25:  #FCFCFD;
  --gray-50:  #F9FAFB;
  --gray-100: #F2F4F7;
  --gray-200: #EAECF0;   /* default border */
  --gray-300: #D0D5DD;
  --gray-400: #98A2B3;
  --gray-500: #667085;
  --gray-600: #516477;   /* secondary text */
  --gray-700: #344054;
  --gray-800: #31353E;   /* primary text   */
  --gray-900: #12181E;   /* heading ink    */
  --gray-950: #0C111D;
  --sail-dark-grey: #292D32;  /* brand dark grey (logo) */
  --white: #FFFFFF;
  --black: #000000;

  /* ---- Success / money (green) ---------------------------------- */
  --green-25:  #F6FEF9;
  --green-50:  #ECFDF3;
  --green-100: #D1FADF;
  --green-500: #17B26A;   /* eligible / success */
  --green-600: #079455;
  --green-700: #158F0A;   /* money figures      */

  /* ---- Warning / attention (amber) ------------------------------ */
  --amber-25:  #FFFCF5;
  --amber-50:  #FFFAEB;   /* attention banner bg */
  --amber-100: #FEF0C7;
  --amber-400: #FDB022;
  --amber-500: #F79009;   /* "in review" dot     */
  --amber-600: #DC6803;

  /* ---- Error (red) ---------------------------------------------- */
  --red-25:  #FFFBFA;
  --red-50:  #FEF3F2;
  --red-100: #FEE4E2;
  --red-500: #F04438;
  --red-600: #D92D20;

  /* ============================================================
     Semantic aliases — reference these in components.
     ============================================================ */
  --color-brand:            var(--sail-silk-blue);
  --color-brand-bright:     var(--sail-fountain-blue);
  --color-brand-strong:     var(--blue-700);

  --text-primary:    var(--gray-900);
  --text-secondary:  var(--gray-600);
  --text-tertiary:   var(--gray-500);
  --text-placeholder:var(--gray-400);
  --text-on-brand:   var(--white);
  --text-link:       var(--sail-silk-blue);

  --surface-page:    var(--gray-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--gray-100);
  --surface-wash:    var(--blue-50);
  --surface-brand:   var(--sail-silk-blue);

  --border-default:  var(--gray-200);
  --border-strong:   var(--gray-300);
  --border-focus:    var(--sail-silk-blue);

  --icon-default:    var(--gray-500);
  --icon-brand:      var(--sail-silk-blue);

  --status-success:  var(--green-500);
  --status-success-text: var(--green-700);
  --status-warning:  var(--amber-500);
  --status-error:    var(--red-500);
  --status-info:     var(--sail-silk-blue);
}