/* Align Sales Group — Color Tokens
   --------------------------------------------------------------
   Brand palette sampled from the logo + social system:
     Navy  #16224E  · the anchor. Wordmark, headlines, hero fields.
     Teal  #70C0D0  · the lift. Accent words, highlights, the summit
                       stroke of the mountain "A" mark.
   Navy dominates; teal is used sparingly as a single accent.
   Mustard/orange appears in seasonal social work as an energy pop. */

:root {
  /* ---- Brand core ---- */
  --navy-900: #0E1736;   /* deepest — overlays, footers */
  --navy-800: #16224E;   /* PRIMARY navy — logo, headlines, hero */
  --navy-700: #1E2C5A;   /* raised navy surface */
  --navy-600: #2C3C70;   /* hover on navy */
  --navy-500: #44558C;   /* muted navy / disabled-on-navy */

  --teal-700: #3F8E9E;   /* teal that passes contrast on white (text/links) */
  --teal-600: #54A6B6;   /* teal hover */
  --teal-500: #70C0D0;   /* PRIMARY teal — brand accent */
  --teal-300: #A9DCE5;   /* soft teal tint */
  --teal-100: #E2F2F5;   /* teal wash / selected backgrounds */

  /* ---- Energy accent (seasonal / promo) ---- */
  --mustard-500: #F2A93B;
  --mustard-100: #FCEBCB;

  /* ---- Neutrals (cool-leaning to sit with the navy) ---- */
  --white:      #FFFFFF;
  --gray-50:    #F6F8FB;   /* page background, off-white */
  --gray-100:   #EDF1F6;   /* subtle fills */
  --gray-200:   #E0E6EF;   /* hairline borders, dividers */
  --gray-300:   #CBD3E0;   /* stronger borders */
  --gray-400:   #9AA5BB;   /* placeholder, disabled text */
  --gray-500:   #7A85A0;   /* mid neutral / icons */
  --gray-600:   #4C5872;   /* secondary text */
  --gray-700:   #313C57;   /* strong body text on light */
  --ink:        #16224E;   /* default text = navy */

  /* ---- Semantic ---- */
  --success-500: #2F9E6B;
  --success-100: #DCF3E8;
  --warning-500: #F2A93B;
  --warning-100: #FCEBCB;
  --danger-500:  #D6453F;
  --danger-100:  #FBE3E2;
  --info-500:    #3F8E9E;
  --info-100:    #E2F2F5;

  /* ---- Semantic aliases (use these in components) ---- */
  --bg-page:        var(--gray-50);
  --bg-surface:     var(--white);
  --bg-raised:      var(--white);
  --bg-sunken:      var(--gray-100);
  --bg-inverse:     var(--navy-800);
  --bg-inverse-deep:var(--navy-900);
  --bg-accent-soft: var(--teal-100);

  --text-strong:    var(--navy-800);
  --text-body:      var(--gray-700);
  --text-muted:     var(--gray-600);
  --text-subtle:    var(--gray-400);
  --text-on-navy:   var(--white);
  --text-on-navy-muted: #B7C0DA;
  --text-link:      var(--teal-700);
  --text-accent:    var(--teal-700);

  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--navy-800);
  --border-focus:   var(--teal-500);

  --brand-primary:  var(--navy-800);
  --brand-accent:   var(--teal-500);
  --brand-accent-ink: var(--teal-700);
}