/* ============================================================
   COLORS — E&S Insurance Group
   Deep navy + vivid orange on white / light-gray neutrals
   ============================================================ */
:root {
  /* --- Brand core --- */
  --navy-900: #061A2E;   /* deepest — footer wells, overlays */
  --navy-800: #0A2540;   /* PRIMARY navy — headers, dark bands */
  --navy-700: #123253;
  --navy-600: #1C4067;
  --navy-500: #2E5477;   /* muted navy for secondary text on light */

  --orange-600: #D9541A; /* pressed / hover-dark */
  --orange-500: #F26522; /* ACCENT orange — CTAs, highlights */
  --orange-400: #F58452; /* hover-light, tints */
  --orange-100: #FDE7DB; /* soft badge/tint backgrounds */

  /* --- Neutrals --- */
  --white:      #FFFFFF;
  --gray-50:    #F5F6F8; /* alternating section background */
  --gray-100:   #ECEEF1;
  --gray-200:   #DDE1E6; /* hairline borders */
  --gray-300:   #C4CAD2;
  --gray-500:   #7A8592; /* muted body text */
  --gray-700:   #495563; /* strong body text on light */
  --ink:        #0A2540; /* default text = navy */

  /* --- Semantic --- */
  --success-500: #1F9D57;
  --success-100: #E2F4EA;
  --warning-500: #E8A317;
  --warning-100: #FBF0D6;
  --danger-500:  #D23F3F;
  --danger-100:  #FADEDE;

  /* ---------- Semantic aliases ---------- */
  --brand-primary:   var(--navy-800);
  --brand-accent:    var(--orange-500);

  --text-heading:    var(--navy-800);
  --text-body:       var(--gray-700);
  --text-muted:      var(--gray-500);
  --text-on-dark:    var(--white);
  --text-on-accent:  var(--white);
  --text-emphasis:   var(--orange-500); /* the signature orange word */
  --text-link:       var(--orange-500);
  --text-link-hover: var(--orange-600);

  --surface-page:    var(--white);
  --surface-alt:     var(--gray-50);
  --surface-card:    var(--white);
  --surface-dark:    var(--navy-800);
  --surface-darker:  var(--navy-900);

  --border-subtle:   var(--gray-200);
  --border-strong:   var(--gray-300);
  --border-on-dark:  rgba(255,255,255,0.14);

  --cta-bg:          var(--orange-500);
  --cta-bg-hover:    var(--orange-600);
  --cta-text:        var(--white);
  --cta-secondary-bg: var(--navy-800);
}