:root {
  /* Brand colors */
  --color-primary: #23319b;
  --color-primary-light: #4648b6;
  --color-primary-lighter: #645fd2;
  --color-primary-dark: #001c80;
  --color-secondary: #169bc4;
  --color-secondary-light: #45b6e0;
  --color-accent: #169bc4;
  --color-accent-light: #45b6e0;
  --color-cta: #ee6608;
  --color-cta-hover: #f17228;
  --color-footer-bg: #23319b;
  --color-footer-bottom-bg: #001c80;
  --footer-social-icon-color: #fff;
  --color-dark: #1e2238;
  --color-dark-light: #34374f;
  --color-error: #f44336;
  --color-warning: #ff9800;
  --color-success: #7cb342;
  --color-link: #2a72c3;
  --color-nickel-50: #f4f6f9;
  --color-nickel-100: #d7d9dd;
  --color-nickel-200: #bbbec1;
  --color-nickel-300: #a0a3a6;
  --color-nickel-500: #6d6f72;
  --color-nickel-800: #282a2c;

  /* Typography */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;

  /* Shape language */
  --radius-button: 2px;
  --radius-card: 0px;
  --radius-small: 2px;

  /* Hero */
  --hero-bg: radial-gradient(circle at 45% 22%, var(--color-secondary) 0%, #256dad 34%, var(--color-primary) 105%);

  /* Timeline */
  --timeline-brand-line-color: var(--color-primary);
  --timeline-brand-icon-color: var(--color-primary);
  --timeline-brand-title-color: var(--color-primary);
}