:root {
  interpolate-size: allow-keywords;

  /* Colors */
  --primary-color: #321B8E;
  --secondary-color: #F59F0A;
  --tertiary-color: #05BED6;

  --white: #FFFFFF;
  --black: #212128;

  --gray-50: #F7F7F5;
  --gray-100: #F5F4F2;
  --gray-200: #D2CFCB;
  --gray-400: #AEAAA3;
  --gray-600: #6B6760;
  --gray-800: #2E2C29;

  --error: #EF5060;
  --error-background: #FFDFDF;
  --success: #4BD862;
  --error-bg: #FFDFDF;

  --bg-modal:#21212873;


  /* viewport unit */
  --vw: 0.25641026vw;
  @media (min-width: 1024px) {
    --vw: 0.06944444vw;
  }

  /* Mediaquieries */
  --xxs: 320px; 
  --xs: 375px;
  --sm: 660px;
  --md: 768px;
  --lg: 1024px;
  --xl: 1366px;
  --xxl: 1440px;

  /* Z-index */
  --zindex-back: -10;
  --zindex-dropdown: 1000;
  --zindex-sticky: 1020;
  --zindex-fixed: 1030;
  --zindex-modal-backdrop: 1040;
  --zindex-modal: 1050;
  --zindex-popover: 1060;
  --zindex-tooltip: 1070;

  /* spacing */
  --space-xxxs: 4px;
  --space-xxs: 8px;
  --space-xs: 16px;
  --space-s: 20px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 40px;
  --space-xxl: 48px;
  --space-xxxl: 64px;
  --space-xxxxl: 80px;

  /* /* font-family */ 
  /* --font-primary: 'Rubik', sans-serif; */
  /* --font-secondary: 'Cabin', sans-serif; */
}

:root {
    /* Font size */
  font-size: 10px;
}

@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 0.4s;
}