:root {
  --color-brand-blue: #003399;
  --color-cyan: #6ED1ED;
  --color-blue: #003399;
  --color-yellow: #FFCC03;
  --color-black: #1D1D1B;
  --color-white: #F8F8F8;
  --color-gray: #818181;
  --font-main: "DM Sans";
  --radius-form-field: 18px;
  --font-heading: "Nunito", sans-serif;
  --font-heading-weight: 900;
  --font-body: "DM Sans";
  --padding-page: clamp(20px, 3.3vw, 50px);
  --margin-heading: 5px;
  --gap-column: 20px;
  --color-text-main: var(--color-black);
  --color-text-alt: var(--color-white);
  --color-text-highlight--1: var(--color-blue);
  --color-text-highlight--2: var(--color-cyan);
  --color-text-highlight--3: var(--color-yellow);
  --color-background-main: var(--color-white);
  --color-background-alt: var(--color-black);
  --color-background-highlight--1: var(--color-blue);
  --color-background-highlight--2: var(--color-cyan);
  --color-background-highlight--3: var(--color-yellow);
  --color-links: #003399;
  --color-borders: var(--color-black);
  --color-borders-alt: var(--color-white);
  --color-placeholders: var(--color-gray);
  --color-footer-label: #003399;
  --color-footer-newsletter-arrow: var(--color-white);
  --color-menu-link-hover: #6ED1ED;
  --color-accordion-header: #003399;
  --filter-news-arrow: brightness(0) saturate(100%) invert(13%) sepia(94%) saturate(3102%) hue-rotate(228deg) brightness(88%) contrast(114%);
  --filter-faq-chevron: none;
  --filter-contact-social-icon: none;

}

:root[data-theme="black"] {
  --color-background-main: #1D1D1B;
  --color-background-alt: #F8F8F8;
  --color-text-main: #F8F8F8;
  --color-text-alt: #1D1D1B;
  --color-borders: #F8F8F8;
  --color-blue: #6ED1ED;
  --color-cyan: #003399;
  --color-links: #6ED1ED;
  --color-menu-link-hover: #003399;
  --color-accordion-header: #6ED1ED;
  --color-text-highlight--1: #6ED1ED;
  --color-text-highlight--2: #003399;
  --color-background-highlight--1: #6ED1ED;
  --color-background-highlight--2: #003399;
  --filter-news-arrow: none;
  --filter-faq-chevron: brightness(0) saturate(100%) invert(82%) sepia(68%) saturate(940%) hue-rotate(157deg) brightness(99%) contrast(88%);
  --filter-contact-social-icon: brightness(0) saturate(100%) invert(82%) sepia(68%) saturate(940%) hue-rotate(157deg) brightness(99%) contrast(88%);
}