/* ============================================================
   We Dispatching — Color tokens
   Patriotic American freight palette: brand red, deep navy, white,
   asphalt/steel neutrals, plus functional semantics.
   ============================================================ */
:root {
  /* ---- Brand Red (from logo #C00000, shadow #A00010) ---- */
  --red-50:  #fcebeb;
  --red-100: #f8cfcf;
  --red-200: #f0a3a3;
  --red-300: #e56b6b;
  --red-400: #d83333;
  --red-500: #cc0d0d;
  --red-600: #c00000; /* PRIMARY brand red */
  --red-700: #a00010; /* logo shadow maroon — hover/press */
  --red-800: #7c000c;
  --red-900: #5a0008;

  /* ---- Brand Navy (from logo #000040) ---- */
  --navy-50:  #eaecf4;
  --navy-100: #c9cee4;
  --navy-200: #9aa3cb;
  --navy-300: #6471ad;
  --navy-400: #38468a;
  --navy-500: #1b2a6b;
  --navy-600: #131e57;
  --navy-700: #0c1644;
  --navy-800: #060d31;
  --navy-900: #000040; /* logo navy — deepest */

  /* ---- Neutrals: asphalt / steel ---- */
  --white:    #ffffff;
  --paper:    #f6f7f9; /* app background off-white */
  --gray-50:  #f1f3f6;
  --gray-100: #e6e9ef;
  --gray-200: #d4dae3;
  --gray-300: #b8c1ce;
  --gray-400: #93a0b2;
  --gray-500: #6c7889;
  --gray-600: #4d5867;
  --gray-700: #353e4b;
  --gray-800: #222933;
  --gray-900: #12161d;

  /* ---- Functional semantics ---- */
  --green-50:  #e8f5ee;
  --green-500: #1f9d57;
  --green-600: #157a4a; /* success */
  --green-700: #0f5d39;
  --amber-50:  #fdf3e0;
  --amber-500: #e0980f;
  --amber-600: #c8860b; /* warning / premium load gold */
  --amber-700: #9a6708;
  --blue-50:   #e7f0fb;
  --blue-500:  #2563c9;
  --blue-600:  #1d4fa6; /* info */

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  /* Brand */
  --brand-primary:        var(--red-600);
  --brand-primary-hover:  var(--red-700);
  --brand-primary-press:  var(--red-800);
  --brand-secondary:      var(--navy-900);
  --brand-secondary-hover:var(--navy-700);
  --brand-accent:         var(--amber-600);

  /* Text */
  --text-strong:   var(--navy-900);
  --text-body:     var(--gray-800);
  --text-muted:    var(--gray-500);
  --text-subtle:   var(--gray-400);
  --text-inverse:  var(--white);
  --text-on-brand: var(--white);
  --text-link:     var(--red-600);

  /* Surfaces */
  --surface-page:    var(--paper);
  --surface-card:    var(--white);
  --surface-sunken:  var(--gray-50);
  --surface-raised:  var(--white);
  --surface-inverse: var(--navy-900);
  --surface-brand:   var(--red-600);

  /* Borders / lines */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-brand:   var(--red-600);
  --border-focus:   var(--navy-700);

  /* Feedback */
  --success:        var(--green-600);
  --success-surface:var(--green-50);
  --warning:        var(--amber-600);
  --warning-surface:var(--amber-50);
  --danger:         var(--red-600);
  --danger-surface: var(--red-50);
  --info:           var(--blue-600);
  --info-surface:   var(--blue-50);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(0, 0, 64, 0.28);
  --ring-danger: 0 0 0 3px rgba(192, 0, 0, 0.28);
}