:root {
  color-scheme: light;
  --brand-primary: #2F3A7A;
  --brand-secondary: #4E5A9C;
  --brand-accent: #F28A3B;
  --brand-highlight: #E7EE32;
  --brand-on-primary: #FFFFFF;
  --brand-on-secondary: #FFFFFF;
  --brand-on-accent: #111827;
  --brand-on-highlight: #2F3A7A;
  --brand-primary-rgb: 47, 58, 122;
  --brand-secondary-rgb: 78, 90, 156;
  --brand-accent-rgb: 242, 138, 59;
  --brand-highlight-rgb: 231, 238, 50;
  --brand-primary-soft: #EEF0F8;
  --brand-secondary-soft: #F1F2F8;
  --brand-accent-soft: #FFF3EA;
  --brand-highlight-soft: #FBFCD9;
  --brand-focus-ring: 0 0 0 3px rgba(var(--brand-secondary-rgb), .24);
}