/* ============================================================
   Dabuller — Color tokens
   Industrial dispatch palette: trustworthy blue + safety amber,
   cool slate neutrals, clear field-legible semantics.
   ============================================================ */

:root {
  /* ---- Brand: Dispatch Blue (primary) ---- */
  --blue-50:  #ECF1FE;
  --blue-100: #D7E1FD;
  --blue-200: #AEC2FB;
  --blue-300: #7E9CF7;
  --blue-400: #4E73F0;
  --blue-500: #2A55E6;   /* primary */
  --blue-600: #1B43CC;
  --blue-700: #1535A6;
  --blue-800: #142C82;
  --blue-900: #122560;

  /* ---- Brand: Safety Amber (accent / call-to-action) ---- */
  --amber-50:  #FFF5E6;
  --amber-100: #FFE7C2;
  --amber-200: #FFD08A;
  --amber-300: #FFB14D;
  --amber-400: #FF971A;
  --amber-500: #F57C00;  /* accent */
  --amber-600: #D96800;
  --amber-700: #AD5200;

  /* ---- Neutrals: cool industrial slate ---- */
  --gray-0:   #FFFFFF;
  --gray-25:  #FAFBFC;
  --gray-50:  #F4F6F9;
  --gray-100: #E9EDF2;
  --gray-200: #D8DFE7;
  --gray-300: #BDC7D2;
  --gray-400: #97A4B2;
  --gray-500: #6B7888;
  --gray-600: #4D5965;
  --gray-700: #36404A;
  --gray-800: #232A32;
  --gray-900: #141A20;
  --gray-950: #0A0E12;

  /* ---- Semantic hues ---- */
  --green-50:  #E7F7EE;
  --green-100: #C5ECD6;
  --green-500: #15A95A;   /* available / dispatched */
  --green-600: #0E8C49;
  --green-700: #0B6F3A;

  --red-50:  #FDECEC;
  --red-100: #FAC9CA;
  --red-500: #E23538;     /* urgent / cancel */
  --red-600: #C42528;
  --red-700: #9E1C1F;

  --yellow-50:  #FFF8E1;
  --yellow-100: #FCEBB3;
  --yellow-500: #F5A300;  /* pending / waiting */
  --yellow-600: #D18700;

  /* ============================================================
     Semantic aliases — reference these in components, not raw hues
     ============================================================ */

  /* Brand */
  --brand:            var(--blue-500);
  --brand-hover:      var(--blue-600);
  --brand-active:     var(--blue-700);
  --brand-subtle:     var(--blue-50);
  --brand-border:     var(--blue-200);
  --on-brand:         var(--gray-0);

  --accent:           var(--amber-500);
  --accent-hover:     var(--amber-600);
  --accent-active:    var(--amber-700);
  --accent-subtle:    var(--amber-50);
  --on-accent:        var(--gray-0);

  /* Text */
  --text-strong:      var(--gray-900);
  --text-body:        var(--gray-700);
  --text-muted:       var(--gray-500);
  --text-subtle:      var(--gray-400);
  --text-inverse:     var(--gray-0);
  --text-brand:       var(--blue-600);
  --text-link:        var(--blue-600);

  /* Surfaces */
  --surface-page:     var(--gray-50);
  --surface-card:     var(--gray-0);
  --surface-raised:   var(--gray-0);
  --surface-sunken:   var(--gray-100);
  --surface-inverse:  var(--gray-900);
  --surface-hover:    var(--gray-50);
  --surface-active:   var(--gray-100);

  /* Borders */
  --border-subtle:    var(--gray-100);
  --border-default:   var(--gray-200);
  --border-strong:    var(--gray-300);
  --border-focus:     var(--blue-500);

  /* Status — fill / text / subtle bg */
  --status-available:        var(--green-500);
  --status-available-text:   var(--green-700);
  --status-available-bg:     var(--green-50);

  --status-pending:          var(--yellow-500);
  --status-pending-text:     var(--yellow-600);
  --status-pending-bg:       var(--yellow-50);

  --status-urgent:           var(--red-500);
  --status-urgent-text:      var(--red-700);
  --status-urgent-bg:        var(--red-50);

  --status-info:             var(--blue-500);
  --status-info-text:        var(--blue-700);
  --status-info-bg:          var(--blue-50);

  /* Focus ring */
  --ring: 0 0 0 3px color-mix(in srgb, var(--blue-500) 35%, transparent);
}