@import url('https://fonts.googleapis.com/css2?family=Exo:wght@400;700&family=Nunito+Sans:wght@400;700&display=swap');

:root {
  --theme-color-baf-blue: #00416B;
  --theme-color-baf-yellow: #FFCD00;
  --theme-color-baf-royal-blue: #078ec8;
  --theme-color-marine-400: #537994;
  --theme-color-marine-500: #1A4061;
  --theme-color-marine-600: #11283D;
  --theme-color-white-100: #FFFFFF;
  --theme-color-blue-100: #EFF7FE;
  --theme-color-blue-500: #4AABF7;
  --theme-color-green-100: #F0F7F0;
  --theme-color-green-500: #4AA64A;
  --theme-color-yellow-100: #FFF9EB;
  --theme-color-yellow-500: #FFC123;
  --theme-color-red-100: #FDEEEE;
  --theme-color-red-500: #FF5555;
  --theme-color-neutral-50: #F4F4F4;
  --theme-color-neutral-100: #DFDFDF;
  --theme-color-neutral-200: #CACACA;
  --theme-color-neutral-300: #B5B5B5;
  --theme-color-neutral-400: #9F9F9F;
  --theme-color-neutral-500: #8A8A8A;
  --theme-color-neutral-600: #757575;
  --theme-color-neutral-700: #606060;
  --theme-color-neutral-800: #4A4A4A;
  --theme-color-neutral-900: #353535;
  --theme-color-neutral-1000: #202020;
  --theme-color-neutral-1000-25: #2020207F;
  --theme-color-neutral-1100: #0B0B0B;

  --theme-font-family-primary: 'Nunito Sans', Helvetica, Arial, sans-serif;
  --theme-font-family-secondary: 'Exo', Helvetica, Arial, sans-serif;

  --theme-font-size-v-8-12: clamp(0.5rem, 0.33vw + 0.42rem, 0.75rem);
  --theme-font-size-v-12-16: clamp(0.75rem, 0.33vw + 0.67rem, 1rem);
  --theme-font-size-v-14-20: clamp(0.88rem, 0.5vw + 0.75rem, 1.25rem);
  --theme-font-size-v-16-24: clamp(1rem, 0.67vw + 0.83rem, 1.5rem);
  --theme-font-size-v-20-28: clamp(1.25rem, 0.67vw + 1.08rem, 1.75rem);
  --theme-font-size-v-24-32: clamp(1.5rem, 0.67vw + 1.33rem, 2rem);
  --theme-font-size-v-30-36: clamp(1.88rem,	0.50vw + 1.75rem,	2.25rem);
  --theme-font-size-v-36-48: clamp(2.25rem, 1vw + 2rem, 3rem);
  --theme-font-size-v-48-60: clamp(3rem, 1vw + 2.75rem, 3.75rem);
  --theme-font-size-v-72-96: clamp(4.5rem, 2vw + 4rem, 6rem);

  --spacing-unit: 8;
  --speed-animation-transition: 150ms;
  --width-max-content: 1200px;
  --width-max-site: 1600px;
  --padding-vwidth: clamp(1rem, 2.67VW + 0.33rem, 2rem);

  --color-primary-medium: var(--theme-color-baf-yellow);
  --color-secondary-medium: var(--theme-color-baf-blue);
  --color-tertiary-medium: var(--theme-color-baf-royal-blue);

  --color-background-primary: var(--theme-color-white-100);
  --color-background-secondary-tint: var(--theme-color-marine-400);
  --color-background-secondary: var(--theme-color-marine-500);
  --color-background-secondary-shade: var(--theme-color-marine-600);
  --color-background-tertiary: var(--theme-color-baf-yellow);
  --color-background-neutral: var(--theme-color-neutral-50);
  --color-font-primary: var(--theme-color-neutral-800);
  --color-font-primary-light: var(--theme-color-neutral-600);
  --color-font-secondary: var(--theme-color-baf-blue);
  --color-font-tertiary: var(--theme-color-baf-yellow);
  --color-font-reverse: var(--theme-color-white-100);
  --color-font-link: var(--theme-color-marine-500);
  --color-status-neutral-tint: var(--theme-color-blue-100);
  --color-status-neutral: var(--theme-color-blue-500);
  --color-status-positive-tint: var(--theme-color-green-100);
  --color-status-positive: var(--theme-color-green-500);
  --color-status-caution-tint: var(--theme-color-yellow-100);
  --color-status-caution: var(--theme-color-yellow-500);
  --color-status-negative-tint: var(--theme-color-red-100);
  --color-status-negative: var(--theme-color-red-500);
  --color-divider-page: var(--theme-color-neutral-300);
  --color-divider-section: var(--theme-color-neutral-200);
  --color-divider-item: var(--theme-color-neutral-100);
  --color-border: var(--theme-color-neutral-100);
  --color-modal-scrim: var(--theme-color-neutral-1000-25);
  --color-neutral-50: var(--theme-color-neutral-50);
  --color-neutral-100: var(--theme-color-neutral-100);
  --color-neutral-200: var(--theme-color-neutral-200);
  --color-neutral-300: var(--theme-color-neutral-300);
  --color-neutral-400: var(--theme-color-neutral-400);
  --color-neutral-500: var(--theme-color-neutral-500);
  --color-neutral-600: var(--theme-color-neutral-600);
  --color-neutral-700: var(--theme-color-neutral-700);
  --color-neutral-800: var(--theme-color-neutral-800);
  --color-neutral-900: var(--theme-color-neutral-900);
  --color-neutral-1000: var(--theme-color-neutral-1000);
  --color-neutral-1000-25: var(--theme-color-neutral-1000-25);
  --color-neutral-1100: var(--theme-color-neutral-1100);


  --color-button-primary-rest: var(--color-background-secondary);
  --color-button-primary-hover: var(--color-background-secondary-tint);
  --color-button-secondary-rest: var(--theme-color-neutral-50);
  --color-button-secondary-hover: var(--theme-color-neutral-100);

  --font-family-primary: var(--theme-font-family-primary);
  --font-family-secondary: var(--theme-font-family-secondary);

  --font-vsize-100: var(--theme-font-size-v-8-12);
  --font-vsize-200: var(--theme-font-size-v-12-16);
  --font-vsize-300: var(--theme-font-size-v-14-20);
  --font-vsize-400: var(--theme-font-size-v-16-24);
  --font-vsize-450: var(--theme-font-size-v-20-28);
  --font-vsize-500: var(--theme-font-size-v-24-32);
  --font-vsize-600: var(--theme-font-size-v-30-36);
  --font-vsize-700: var(--theme-font-size-v-36-48);
  --font-vsize-800: var(--theme-font-size-v-48-60);
  --font-vsize-900: var(--theme-font-size-v-72-96);

  --elevation-1: 0px 1px 4px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.25);
  --elevation-4: 0px 2px 8px 0px rgba(0, 0, 0, 0.10), 0px 2px 4px 0px rgba(0, 0, 0, 0.15), 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
  --elevation-8: 0px 4px 16px 0px rgba(0, 0, 0, 0.10), 0px 4px 8px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.25);
  --elevation-48: 0px 20px 80px rgba(0, 0, 0, 0.5);

  --effect-image-overlay: linear-gradient(62deg, rgba(255, 205, 0, 0.6) 0%, rgba(155, 142, 30, 0.75) 12.28%, rgba(52, 76, 61, 0.68) 59.8%, rgba(0, 43, 76, 0.0075) 100.46%), url(image.png);
}
