/* ============================================================
   DEF Express — Color Tokens
   Derived from the brand wave mark: azure blue + emerald green
   on clean white. Cool, fresh, "The Clear Choice."
   ============================================================ */

:root {
  /* ---- Brand scales ---- */
  /* Blue — the primary brand color (the wave) */
  --blue-50:  #eaf4fb;
  --blue-100: #cce4f5;
  --blue-200: #99c8ea;
  --blue-300: #5aa6db;
  --blue-400: #2487cb;
  --blue-500: #0c72b8;  /* DEF Blue — primary */
  --blue-600: #0a619c;
  --blue-700: #084f80;
  --blue-800: #073f66;
  --blue-900: #062f4d;

  /* Green — the secondary brand color (the swoosh) */
  --green-50:  #e6f8ef;
  --green-100: #c2efd6;
  --green-200: #88e0af;
  --green-300: #45cf85;
  --green-400: #11c468;
  --green-500: #00be5e;  /* DEF Green — secondary */
  --green-600: #00a04f;
  --green-700: #00803f;
  --green-800: #00632f;
  --green-900: #014a24;

  /* ---- Neutrals — cool grey, faint blue cast ---- */
  --white:    #ffffff;
  --grey-25:  #fafcfe;
  --grey-50:  #f4f7fa;
  --grey-100: #e9eef3;
  --grey-200: #d7dee6;
  --grey-300: #b9c4cf;
  --grey-400: #91a0ae;
  --grey-500: #6b7a88;
  --grey-600: #4f5d6a;
  --grey-700: #3a4651;
  --grey-800: #27313a;
  --grey-900: #161d23;  /* ink */

  /* ---- Semantic status ---- */
  --success: var(--green-600);
  --success-surface: var(--green-50);
  --warning: #e8910c;
  --warning-surface: #fdf3e1;
  --danger:  #d8412f;
  --danger-surface: #fdecea;
  --info:    var(--blue-500);
  --info-surface: var(--blue-50);

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  --color-brand:        var(--blue-500);
  --color-brand-hover:  var(--blue-600);
  --color-brand-active: var(--blue-700);
  --color-accent:       var(--green-500);
  --color-accent-hover: var(--green-600);

  /* Text */
  --text-strong:  var(--grey-900);
  --text-body:    var(--grey-700);
  --text-muted:   var(--grey-500);
  --text-faint:   var(--grey-400);
  --text-on-brand: var(--white);
  --text-link:    var(--blue-500);

  /* Surfaces */
  --surface-page:   var(--grey-50);
  --surface-card:   var(--white);
  --surface-sunken: var(--grey-100);
  --surface-brand:  var(--blue-500);
  --surface-ink:    var(--grey-900);
  --surface-tint:   var(--blue-50);

  /* Borders */
  --border-subtle: var(--grey-200);
  --border-default: var(--grey-300);
  --border-strong: var(--grey-400);
  --border-brand:  var(--blue-500);

  /* Focus ring */
  --focus-ring: color-mix(in srgb, var(--blue-500) 45%, transparent);
}