/* Blueprint to Broadcast — Color System
   ------------------------------------------------------------------
   Concept: a draftsman's blueprint (deep slate-navy paper, fine grid
   lines) animated by a broadcast signal (vivid cobalt waves).
   Sampled from the brand assets:
     • Blueprint navy  = banner background      rgb(47,60,77)  #2F3C4D
     • Signal blue     = the broadcast arcs     rgb(9,93,199)  #095DC7
     • Ink             = the serif "B2B" mark    near-black
   Neutrals are cool-leaning "paper". One warm complementary accent
   (annotation amber) supplies blue↔orange contrast, used sparingly. */

:root {
  /* ---- Signal blue (primary / brand) ---- */
  --signal-50:  #EEF4FD;
  --signal-100: #DCE8FB;
  --signal-200: #B7D0F5;
  --signal-300: #85AEEC;
  --signal-400: #5290E3;
  --signal-500: #2D74DB;
  --signal-600: #095DC7;  /* brand cobalt — the broadcast waves */
  --signal-700: #074CA3;
  --signal-800: #093E84;
  --signal-900: #0C3568;

  /* ---- Blueprint navy (ink-on-paper inverse surface) ---- */
  --navy-50:  #EEF1F5;
  --navy-100: #D6DDE6;
  --navy-200: #AEBAC9;
  --navy-300: #7E8EA3;
  --navy-400: #57687F;
  --navy-500: #3F5066;
  --navy-600: #344558;
  --navy-700: #2F3C4D;  /* brand banner navy */
  --navy-800: #25303E;
  --navy-900: #1A222D;
  --navy-950: #11171F;

  /* ---- Ink + paper neutrals ---- */
  --ink:      #0E1116;  /* the serif B2B mark */
  --ink-soft: #2C333D;
  --paper:    #F7F8FA;  /* page background — cool blueprint paper */
  --paper-2:  #EDF0F4;
  --paper-3:  #E2E7EE;
  --white:    #FFFFFF;
  --line:     #D9DEE6;  /* hairline borders */
  --line-2:   #C5CCD7;

  /* gray text ramp */
  --gray-900: #15191F;
  --gray-700: #3A424E;
  --gray-500: #6B7480;
  --gray-400: #8A929D;
  --gray-300: #B4BAC3;

  /* ---- Warm complementary accent (draftsman annotation) ---- */
  --amber-50:  #FCF3E8;
  --amber-100: #F8E3C8;
  --amber-500: #E08A3C;  /* annotation amber — sparing highlights */
  --amber-600: #C9722A;

  /* ---- Semantic ---- */
  --success: #1F8A5B;
  --success-bg: #E4F3EC;
  --warning: #C9722A;
  --warning-bg: #F8E3C8;
  --danger:  #C8483C;
  --danger-bg: #F7E3E1;
  --info:    var(--signal-600);
  --info-bg: var(--signal-50);

  /* ================================================================
     SEMANTIC ALIASES — prefer these in components & layouts
     ================================================================ */
  --brand:            var(--signal-600);
  --brand-strong:     var(--signal-700);
  --brand-ink:        var(--navy-700);   /* deep blueprint surface */

  --bg-page:          var(--paper);
  --bg-surface:       var(--white);
  --bg-subtle:        var(--paper-2);
  --bg-inverse:       var(--navy-700);   /* blueprint dark sections */
  --bg-inverse-deep:  var(--navy-900);

  --text-strong:      var(--ink);
  --text-body:        var(--gray-700);
  --text-muted:       var(--gray-500);
  --text-brand:       var(--signal-600);
  --text-on-inverse:  #EAF0F7;
  --text-on-inverse-muted: #9DACBF;

  --border-default:   var(--line);
  --border-strong:    var(--line-2);
  --border-inverse:   rgba(255,255,255,0.14);
  --border-focus:     var(--signal-600);

  /* blueprint grid line (for backgrounds) */
  --grid-line:        rgba(13,40,90,0.06);
  --grid-line-inverse: rgba(255,255,255,0.07);
}