/* Brand design tokens. */

:root {
  --color-white:        #ffffff;
  --color-off-white:    #f3f5f7;
  --color-light-grey:   #ced4da;
  --color-grey:         #6b7783;
  --color-dark-grey:    #535e67;
  --color-black:        #22272b;

  --color-pale-blue:    #e3f2ff;
  --color-light-blue:   #b7dcff;
  --color-blue:         #0f8afb;
  --color-dark-blue:    #084680;

  --color-impact-green: #74ad84;
  --color-pale-green:   #e8f5ec;
  --color-red:          #ce2020;

  /* Surface tokens — extensions used by component CSS for separators / borders. */
  --color-line-soft:    #eef0f2;
  --color-border:       #cfe1f2;

  --font-lora:          'Lora', serif;
  --font-noto:          'Noto Sans', Inter, sans-serif;
}