@import './media.css';

:root {
  /* Colors need to be cleaned up by UX */

  /* Global Available Colors */
  --color-brand-01: #d3222a;
  --color-brand-02: #b20d15;
  --color-white: #fff;
  --color-gray-01: #fcfcfc;
  --color-gray-02: #f5f5f5;
  --color-gray-03: #ededed;
  --color-gray-04: #ccc;
  --color-gray-05: #767676;
  --color-gray-06: #595959;
  --color-gray-07: #333;
  --color-blue-00: #eff8ff;
  --color-blue-01: #e0f3ff;
  --color-blue-02: #b0d9f3;
  --color-blue-03: #3775d0;
  --color-blue-04: #0758ac;
  --color-green: #3A862B;
  --color-yellow: #ffd624;
  --color-magenta-00: #f6f0ff;
  --color-magenta: #c2359b;
  --color-purple: #8163D3;

  --environment-color: hsl(360, 100%, 100%);

  /* Global Font Families */
  --font-family-primary: 'Source Sans Pro', sans-serif;
  --font-family-secondary: 'Source Sans Pro', sans-serif;

  --font-size-xsmall: 0.7rem;
  --font-size-small: 0.8rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.25rem;
  --font-size-xlarge: 1.5rem;
  --font-size-xxlarge: 2.5rem;

  --icon-size-xsmall: 16px;
  --icon-size-small: 18px;
  --icon-size-medium: 24px;
  --icon-size-large: 32px;
  --icon-size-xlarge: 44px;
}