/* ============================================================================
 * IT-Service Helm — Color Tokens
 * Anchored on the logo navy (icon fill rgb(0,48,80) #003050, wordmark #042952).
 * A disciplined, monochrome-navy brand: deep navy carries identity, one brighter
 * "service blue" handles interaction/links, cool greys structure the surfaces.
 * ==========================================================================*/
:root {
  /* --- Brand navy scale (primary identity) --------------------------------*/
  --navy-50:  #EFF5FA;
  --navy-100: #D9E7F1;
  --navy-200: #B0CCE0;
  --navy-300: #7FA9C8;
  --navy-400: #4A82AC;
  --navy-500: #1F5E8C;
  --navy-600: #0E4671;
  --navy-700: #053356;
  --navy-800: #03263F;
  --navy-900: #021A2C;
  --navy-950: #01101C;

  /* Canonical logo navy — use for the wordmark/brand surfaces */
  --helm-navy: #003050;

  /* --- Service blue (interaction / links / highlights) --------------------*/
  --blue-50:  #E9F3FB;
  --blue-100: #CCE4F6;
  --blue-200: #9CCAEC;
  --blue-300: #62A9DC;
  --blue-400: #2E88C8;
  --blue-500: #1B81C4;
  --blue-600: #1569A3;
  --blue-700: #115684;

  /* --- Cool neutral greys -------------------------------------------------*/
  --gray-0:   #FFFFFF;
  --gray-25:  #FAFBFC;
  --gray-50:  #F4F6F9;
  --gray-100: #EBEEF2;
  --gray-200: #DCE1E7;
  --gray-300: #C2C9D2;
  --gray-400: #9AA3AF;
  --gray-500: #6B7480;
  --gray-600: #4B5560;
  --gray-700: #343D47;
  --gray-800: #212931;
  --gray-900: #121820;

  /* --- Semantic status ----------------------------------------------------*/
  --success-50:  #E7F4EC;
  --success-500: #1E874B;
  --success-600: #166B3B;
  --warning-50:  #FBF1E0;
  --warning-500: #C77A14;
  --warning-600: #9E5F0E;
  --error-50:    #FBEAE8;
  --error-500:   #C2362F;
  --error-600:   #9C2922;
  --info-50:     var(--blue-50);
  --info-500:    var(--blue-500);

  /* ========================================================================
   * Semantic aliases — reference THESE in components, not the raw scales.
   * ======================================================================*/
  /* Surfaces */
  --color-bg:            var(--gray-50);
  --color-surface:       var(--gray-0);
  --color-surface-sunken:var(--gray-100);
  --color-surface-navy:  var(--helm-navy);
  --color-surface-navy-deep: var(--navy-900);

  /* Text */
  --text-strong:  var(--navy-900);
  --text-body:    var(--gray-700);
  --text-muted:   var(--gray-500);
  --text-faint:   var(--gray-400);
  --text-inverse: var(--gray-0);
  --text-on-navy: #D6E4F0;
  --text-brand:   var(--helm-navy);

  /* Borders */
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-navy:   var(--navy-700);

  /* Brand + interaction */
  --brand:            var(--helm-navy);
  --brand-hover:      var(--navy-800);
  --brand-active:     var(--navy-900);
  --interactive:      var(--blue-500);
  --interactive-hover:var(--blue-600);
  --link:             var(--blue-600);
  --link-hover:       var(--blue-700);
  --focus-ring:       color-mix(in srgb, var(--blue-500) 45%, transparent);

  /* Status aliases */
  --color-success: var(--success-500);
  --color-warning: var(--warning-500);
  --color-error:   var(--error-500);
  --color-info:    var(--info-500);
}