:root {
  --color-primary: #004AAD;
  --color-primary-50: #F0F6FF;
  --color-primary-100: #DBEBFF;
  --color-primary-200: #B3D4FF;
  --color-primary-300: #80B7FF;
  --color-primary-400: #2E89FF;
  --color-primary-500: #004AAD;
  --color-primary-600: #004094;
  --color-primary-700: #003C8A;
  --color-primary-800: #002E6B;
  --color-primary-900: #002657;
  --color-primary-950: #001838;
  --color-on-primary: white;
  --color-on-primary-dark: #004094; }

.primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary); }

.primary-50 {
  background-color: var(--color-primary-50);
  color: var(--color-on-primary-dark); }

.primary-100 {
  background-color: var(--color-primary-100);
  color: var(--color-on-primary-dark); }

.primary-200 {
  background-color: var(--color-primary-200);
  color: var(--color-on-primary-dark); }

.primary-300 {
  background-color: var(--color-primary-300);
  color: var(--color-on-primary-dark); }

.primary-400 {
  background-color: var(--color-primary-400);
  color: var(--color-on-primary); }

.primary-500 {
  background-color: var(--color-primary-500);
  color: var(--color-on-primary); }

.primary-600 {
  background-color: var(--color-primary-600);
  color: var(--color-on-primary); }

.primary-700 {
  background-color: var(--color-primary-700);
  color: var(--color-on-primary); }

.primary-800 {
  background-color: var(--color-primary-800);
  color: var(--color-on-primary); }

.primary-900 {
  background-color: var(--color-primary-900);
  color: var(--color-on-primary); }

.primary-950 {
  background-color: var(--color-primary-950);
  color: var(--color-on-primary); }