@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito/Nunito-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; /* Variable range */
  font-style: normal;
}

@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito/Nunito-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}

:root {
  --kmo-sys-color-white: #ffffff;
  --kmo-sys-color-darkblue: #1c006b;
  --kmo-sys-color-purpleblue: #4600c8;
  --kmo-sys-color-yellow: #fafa9b;
  --kmo-sys-color-purple: #7a64e1;
  --kmo-sys-color-lightblue: #d7f0ff;
  --kmo-sys-color-babyblue: #87cef0;
  
  --kmo-sys-fontfamily-nunito: 'Nunito', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;

  --kmo-role-primary-color-1: var(--kmo-sys-color-darkblue);
  --kmo-role-primary-color-2: var(--kmo-sys-color-purpleblue);
  --kmo-role-secondary-color-1: var(--kmo-sys-color-purple);
  --kmo-role-secondary-color-2: var(--kmo-sys-color-lightblue);
  --kmo-role-cta-color: var(--kmo-sys-color-yellow);

  --kmo-role-fontfamily-base: var(--kmo-sys-fontfamily-nunito);
  --kmo-role-font-size-large: 1.125rem;
  --kmo-role-font-weight-bold: 700;

  --kmo-cmp-app-background-gradient: linear-gradient(120deg, var(--kmo-sys-color-lightblue) 20%, var(--kmo-sys-color-babyblue) 80%);
  --kmo-cmp-app-background-color-fallback: var(--kmo-sys-color-lightblue);

  --kmo-cmp-toolbar-background-color: transparent;
  --kmo-cmp-toolbar-font-color: var(--kmo-role-primary-color-1);
  --kmo-cmp-toolbar-button-background-color-hover: var(--kmo-role-secondary-color-1);
}