@media (prefers-color-scheme: light) {
  :root {
    --color-primary: #0056A7;
    --color-primary-contrast: #ffffff;
    --color-primary-dark-1: #004f99;
    --color-primary-dark-2: #00498d;
    --color-primary-dark-3: #004382;
    --color-primary-dark-4: #003c74;
    --color-primary-dark-5: #002f5b;
    --color-primary-dark-6: #001e3a;
    --color-primary-dark-7: #000c19;
    --color-primary-light-1: #1966af;
    --color-primary-light-2: #3377b8;
    --color-primary-light-3: #4c88c1;
    --color-primary-light-4: #6699ca;
    --color-primary-light-5: #8cb2d7;
    --color-primary-light-6: #bfd4e9;
    --color-primary-light-7: #e5eef6;
    --color-primary-alpha-10: #0056a719;
    --color-primary-alpha-20: #0056a733;
    --color-primary-alpha-30: #0056a74b;
    --color-primary-alpha-40: #0056a766;
    --color-primary-alpha-50: #0056a780;
    --color-primary-alpha-60: #0056a799;
    --color-primary-alpha-70: #0056a7b3;
    --color-primary-alpha-80: #0056a7cc;
    --color-primary-alpha-90: #0056a7e1;
    --color-primary-hover: var(--color-primary-dark-1);
    --color-primary-active: var(--color-primary-dark-2);
    --color-logo: #0056A7;
    --color-accent: var(--color-primary-light-1);
    --color-small-accent: var(--color-primary-light-6);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #0056A7;
    --color-primary-contrast: #ffffff;
    --color-primary-dark-1: #1966af;
    --color-primary-dark-2: #3377b8;
    --color-primary-dark-3: #4c88c1;
    --color-primary-dark-4: #6699ca;
    --color-primary-dark-5: #8cb2d7;
    --color-primary-dark-6: #bfd4e9;
    --color-primary-dark-7: #e5eef6;
    --color-primary-light-1: #004f99;
    --color-primary-light-2: #00498d;
    --color-primary-light-3: #004382;
    --color-primary-light-4: #003c74;
    --color-primary-light-5: #002f5b;
    --color-primary-light-6: #001e3a;
    --color-primary-light-7: #000c19;
    --color-primary-alpha-10: #0056a719;
    --color-primary-alpha-20: #0056a733;
    --color-primary-alpha-30: #0056a74b;
    --color-primary-alpha-40: #0056a766;
    --color-primary-alpha-50: #0056a780;
    --color-primary-alpha-60: #0056a799;
    --color-primary-alpha-70: #0056a7b3;
    --color-primary-alpha-80: #0056a7cc;
    --color-primary-alpha-90: #0056a7e1;
    --color-primary-hover: var(--color-primary-light-1);
    --color-primary-active: var(--color-primary-light-2);
    --color-logo: #0056A7;
    --color-accent: var(--color-primary-light-1);
    --color-small-accent: var(--color-primary-light-5);
  }
}