/* ============================================================
   TriTechne — Color tokens
   Brand colors sourced directly from the TriTechne logo + icon SVGs:
     • Signal blue  #4E89FD  (icon strokes + logo wave motif)
     • Wordmark      #F0F0F0  (near-white logo letters)
   Navy ground + neutral scale derived to pair with the signal blue.
   ============================================================ */
:root {
  /* ---- Brand: Signal Blue ------------------------------------ */
  --blue-50:  #F4F8FF;
  --blue-100: #E8F0FF;
  --blue-200: #B9D0FF;
  --blue-300: #8FB4FF;
  --blue-400: #74A4FF;
  --blue-500: #4E89FD;  /* BRAND — exact from logo/icons */
  --blue-600: #3B73E8;
  --blue-700: #2E63D6;  /* accessible blue text on white */
  --blue-800: #214CAB;

  /* ---- Navy: ink + dark grounds ------------------------------ */
  --navy-900: #07101F;  /* deepest */
  --navy-800: #0A1730;  /* primary dark ground (hero, footer) */
  --navy-700: #0E2042;
  --navy-600: #15315E;
  --navy-500: #1E4178;

  /* ---- Neutrals: cool engineered grays ----------------------- */
  --white:    #FFFFFF;
  --paper:    #F7F8FA;  /* page background on light surfaces */
  --gray-100: #EEF1F5;
  --gray-200: #E1E5EC;
  --gray-300: #CBD2DD;
  --gray-400: #9AA4B4;
  --gray-500: #6B7686;
  --gray-600: #4A5462;
  --gray-700: #333B47;
  --gray-800: #1F2630;
  --logo-white: #F0F0F0; /* exact wordmark color */

  /* ---- Status ------------------------------------------------ */
  --green-500:  #1E9E6A;
  --green-100:  #E3F5EC;
  --amber-500:  #E0922E;
  --amber-100:  #FBEFDD;
  --red-500:    #D9483B;
  --red-100:    #FBE4E2;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product UI
     ============================================================ */
  --brand:            var(--blue-500);
  --brand-hover:      var(--blue-600);
  --brand-press:      var(--blue-700);
  --brand-tint:       var(--blue-100);
  --brand-tint-soft:  var(--blue-50);

  /* surfaces */
  --bg:               var(--paper);
  --surface:          var(--white);
  --surface-sunken:   var(--gray-100);
  --surface-dark:     var(--navy-800);
  --surface-dark-alt: var(--navy-700);

  /* text */
  --text-primary:     var(--navy-900);
  --text-secondary:   var(--gray-600);
  --text-muted:       var(--gray-500);
  --text-on-dark:     var(--logo-white);
  --text-on-dark-dim: rgba(240,240,240,0.66);
  --text-inverse:     var(--white);
  --link:             var(--blue-700);
  --link-on-dark:     var(--blue-400);

  /* lines + focus */
  --border:           var(--gray-200);
  --border-strong:    var(--gray-300);
  --border-on-dark:   rgba(240,240,240,0.14);
  --focus-ring:       rgba(78,137,253,0.45);

  /* status semantic */
  --success:          var(--green-500);
  --success-tint:     var(--green-100);
  --warning:          var(--amber-500);
  --warning-tint:     var(--amber-100);
  --danger:           var(--red-500);
  --danger-tint:      var(--red-100);
}