:root {
  --h5p-theme-main-cta-base: #505DDD;
  --h5p-theme-secondary-cta-base: #0c1547;
  --h5p-theme-alternative-base: #EEEFFA;
  --h5p-theme-background: #F0F0FC;
  --h5p-theme-focus: #3b54a5; /*TODO: not yet in use */ 

  --h5p-theme-main-cta-light: #5764E7;
  --h5p-theme-main-cta-dark: #2938D1;
  --h5p-theme-contrast-cta: #E0F1FF;
  --h5p-theme-contrast-cta-white: #505ddd;

  --h5p-theme-contrast-cta-light: color-mix(in srgb, var(--h5p-theme-main-cta-base), transparent 90%);

  --h5p-theme-secondary-cta-light: #101b59;
  --h5p-theme-secondary-cta-dark: #090f34;
  --h5p-theme-secondary-contrast-cta: #e7eafa;

  --h5p-theme-alternative-light: #F8F9FE;
  --h5p-theme-alternative-dark: #DCDFFA;
  --h5p-theme-alternative-darker: #ced1ee;

  --h5p-theme-text-primary: #101729;
  --h5p-theme-text-secondary: #354054;
  --h5p-theme-text-third: #737373;
  --h5p-theme-ui-base: #FFFFFF;
  --h5p-theme-stroke-1: #DCDFFA;
  --h5p-theme-stroke-2: #EDEEFB;
  --h5p-theme-stroke-3: #E5E5E5;
  --h5p-theme-border-radius-large: 0.5rem;
  --h5p-theme-border-radius-medium: 0.375rem;
  --h5p-theme-border-radius-small: 0.25rem;
  --h5p-theme-font-name: "Inter", sans-serif;

  --h5p-theme-feedback-correct-main: #256D1D;
  --h5p-theme-feedback-correct-secondary: #f3fcf0;
  --h5p-theme-feedback-correct-third: #cff1c2;
	
  --h5p-theme-feedback-incorrect-main: #a13236;
  --h5p-theme-feedback-incorrect-secondary: #faf0f4;
  --h5p-theme-feedback-incorrect-third: #f6dce7;

  --h5p-theme-feedback-neutral-main: #E6C81D;
  --h5p-theme-feedback-neutral-secondary: #5E4817;
  --h5p-theme-feedback-neutral-third: #F0EBCB;

  /* SPACING */

  /* Small (default) */
  --h5p-theme-spacing-xl-primary-small: calc(var(--h5p-theme-spacing-xl-primary-medium)*0.8);
  --h5p-theme-spacing-primary-small: calc(var(--h5p-theme-spacing-primary-medium)*0.8);
  --h5p-theme-spacing-secondary-small: calc(var(--h5p-theme-spacing-secondary-medium)*0.8);
  --h5p-theme-spacing-third-small: calc(var(--h5p-theme-spacing-third-medium)*0.8);
  --h5p-theme-spacing-fourth-small: calc(var(--h5p-theme-spacing-fourth-medium)*0.8);
  --h5p-theme-spacing-fifth-small: calc(var(--h5p-theme-spacing-fifth-medium)*0.8);
  
  --h5p-theme-font-size-xxl-small: calc(var(--h5p-theme-font-size-xxl-medium)*1);
  --h5p-theme-font-size-xl-small: calc(var(--h5p-theme-font-size-xl-medium)*1);
  --h5p-theme-font-size-l-small: calc(var(--h5p-theme-font-size-l-medium)*1);
  --h5p-theme-font-size-m-small: calc(var(--h5p-theme-font-size-m-medium)*1);
  --h5p-theme-font-size-s-small: calc(var(--h5p-theme-font-size-s-medium)*1);

  /* Medium */
  --h5p-theme-spacing-xl-primary-medium: calc(var(--h5p-theme-spacing-xl-primary-large)*0.8);
  --h5p-theme-spacing-primary-medium: calc(var(--h5p-theme-spacing-primary-large)*0.8);
  --h5p-theme-spacing-secondary-medium: calc(var(--h5p-theme-spacing-secondary-large)*0.8);
  --h5p-theme-spacing-third-medium: calc(var(--h5p-theme-spacing-third-large)*0.8);
  --h5p-theme-spacing-fourth-medium: calc(var(--h5p-theme-spacing-fourth-large)*0.8);
  --h5p-theme-spacing-fifth-medium: calc(var(--h5p-theme-spacing-fifth-large)*0.8);
  
  --h5p-theme-font-size-xxl-medium: calc(var(--h5p-theme-font-size-xxl-large)*0.9);
  --h5p-theme-font-size-xl-medium: calc(var(--h5p-theme-font-size-xl-large)*0.9);
  --h5p-theme-font-size-l-medium: calc(var(--h5p-theme-font-size-l-large)*0.9);
  --h5p-theme-font-size-m-medium: calc(var(--h5p-theme-font-size-m-large)*0.9);
  --h5p-theme-font-size-s-medium: calc(var(--h5p-theme-font-size-s-large)*0.9);

  /* Large */
  --h5p-theme-spacing-xl-primary-large: 3rem;
  --h5p-theme-spacing-primary-large: 2rem;
  --h5p-theme-spacing-secondary-large: 1.5rem;
  --h5p-theme-spacing-third-large: 1rem;
  --h5p-theme-spacing-fourth-large: 0.65rem;
  --h5p-theme-spacing-fifth-large: 0.5rem;
  
  --h5p-theme-font-size-xxl-large: 1.5rem;
  --h5p-theme-font-size-xl-large: 1.25rem;
  --h5p-theme-font-size-l-large: 1.125rem;	
  --h5p-theme-font-size-m-large: 1rem;
  --h5p-theme-font-size-s-large: 0.85rem;
}

.h5p-content,
.h5peditor {
  --h5p-theme-spacing-xl: var(--h5p-theme-spacing-xl-primary-small);
  --h5p-theme-spacing-l: var(--h5p-theme-spacing-primary-small);
  --h5p-theme-spacing-m: var(--h5p-theme-spacing-secondary-small);
  --h5p-theme-spacing-s: var(--h5p-theme-spacing-third-small);
  --h5p-theme-spacing-xs: var(--h5p-theme-spacing-fourth-small);
  --h5p-theme-spacing-xxs: var(--h5p-theme-spacing-fifth-small);
  --h5p-theme-font-size-xxl: var(--h5p-theme-font-size-xxl-small);
  --h5p-theme-font-size-xl: var(--h5p-theme-font-size-xl-small);
  --h5p-theme-font-size-l: var(--h5p-theme-font-size-l-small);	
  --h5p-theme-font-size-m: var(--h5p-theme-font-size-m-small);	
  --h5p-theme-font-size-s: var(--h5p-theme-font-size-s-small);	
  --h5p-theme-scaling: 0.6;
}

.h5p-content.h5p-medium,
.h5peditor.h5p-medium {
  --h5p-theme-spacing-xl: var(--h5p-theme-spacing-xl-primary-medium);
  --h5p-theme-spacing-l: var(--h5p-theme-spacing-primary-medium);
  --h5p-theme-spacing-m: var(--h5p-theme-spacing-secondary-medium);
  --h5p-theme-spacing-s: var(--h5p-theme-spacing-third-medium);
  --h5p-theme-spacing-xs: var(--h5p-theme-spacing-fourth-medium);
  --h5p-theme-spacing-xxs: var(--h5p-theme-spacing-fifth-medium);
  --h5p-theme-font-size-xxl: var(--h5p-theme-font-size-xxl-medium);
  --h5p-theme-font-size-xl: var(--h5p-theme-font-size-xl-medium);
  --h5p-theme-font-size-l: var(--h5p-theme-font-size-l-medium);	
  --h5p-theme-font-size-m: var(--h5p-theme-font-size-m-medium);	
  --h5p-theme-font-size-s: var(--h5p-theme-font-size-s-medium);
  --h5p-theme-scaling: 0.8;
}

.h5p-content.h5p-large,
.h5peditor.h5p-large {
  --h5p-theme-spacing-xl: var(--h5p-theme-spacing-xl-primary-large);
  --h5p-theme-spacing-l: var(--h5p-theme-spacing-primary-large);
  --h5p-theme-spacing-m: var(--h5p-theme-spacing-secondary-large);
  --h5p-theme-spacing-s: var(--h5p-theme-spacing-third-large);
  --h5p-theme-spacing-xs: var(--h5p-theme-spacing-fourth-large);
  --h5p-theme-spacing-xxs: var(--h5p-theme-spacing-fifth-large);
  --h5p-theme-font-size-xxl: var(--h5p-theme-font-size-xxl-large);
  --h5p-theme-font-size-xl: var(--h5p-theme-font-size-xl-large);
  --h5p-theme-font-size-l: var(--h5p-theme-font-size-l-large);	
  --h5p-theme-font-size-m: var(--h5p-theme-font-size-m-large);	
  --h5p-theme-font-size-s: var(--h5p-theme-font-size-s-large);
  --h5p-theme-scaling: 1;
}