/* ============================================================
   BidLogiQ — Color tokens
   Anchored on the brand primary #265d80 (R:38 G:93 B:128),
   a calm, authoritative steel blue. Neutrals lean cool/slate
   to sit beside it; semantics are muted for an institutional,
   public-sector feel.
   ============================================================ */
:root {
  /* ---- Brand blue scale ---- */
  --blue-50:  #eef3f7;
  --blue-100: #d7e3ec;
  --blue-200: #b1c8d9;
  --blue-300: #82a7c0;
  --blue-400: #5183a3;
  --blue-500: #265d80;   /* PRIMARY — brand color */
  --blue-600: #1f4d6b;
  --blue-700: #1a4059;
  --blue-800: #163447;
  --blue-900: #0e2330;

  /* ---- Neutral / slate scale ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f6f8fa;
  --neutral-100: #eef1f4;
  --neutral-200: #dde3e9;
  --neutral-300: #c4cdd6;
  --neutral-400: #9aa6b2;
  --neutral-500: #6b7886;
  --neutral-600: #4d5965;
  --neutral-700: #37424d;
  --neutral-800: #232b33;
  --neutral-900: #121922;

  /* ---- Semantic hues (muted, institutional) ---- */
  --green-50:  #e9f4ee;
  --green-500: #2e7d5b;
  --green-600: #246349;
  --amber-50:  #fbf2e3;
  --amber-500: #b9821f;
  --amber-600: #966719;
  --red-50:    #fbecea;
  --red-500:   #c0392b;
  --red-600:   #9d2c20;

  /* ============================================================
     Semantic aliases — use these in components
     ============================================================ */
  --color-primary:        var(--blue-500);
  --color-primary-hover:   var(--blue-600);
  --color-primary-active:  var(--blue-700);
  --color-primary-subtle:  var(--blue-50);
  --color-on-primary:      var(--neutral-0);
  --color-accent:          var(--blue-400);

  /* Surfaces */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-inverse: var(--blue-800);
  --surface-hover:   var(--neutral-100);

  /* Text */
  --text-strong:   var(--neutral-900);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-on-dark:  var(--neutral-0);
  --text-link:     var(--blue-500);

  /* Borders & dividers */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-focus:   var(--blue-500);

  /* Status */
  --status-success:        var(--green-500);
  --status-success-subtle: var(--green-50);
  --status-warning:        var(--amber-500);
  --status-warning-subtle: var(--amber-50);
  --status-danger:         var(--red-500);
  --status-danger-subtle:  var(--red-50);
  --status-info:           var(--blue-500);
  --status-info-subtle:    var(--blue-50);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(38, 93, 128, 0.28);
}