:root {
    /* Colors */
    --color-primary-lighter: #9E6DB8;
    --color-primary: #7A4696;
    --color-primary-darker: #5f287e;
    --color-secondary: #9D9D9C;
    --color-light-purple: #A981C4;
    --color-text: #FFFFFF;

    /* Font sizes */
    --font-size-small: 1.2rem;
    --font-size-body: 2.1rem;
    --font-size-h3: 3rem;
    --font-size-h2: 3.4rem;
    --font-size-h1: 4.4rem;

    /* Fluid Font sizes */
    --font-size-small-fluid: clamp(1rem, 0.95rem + 0.25vw, 1.2rem);
    --font-size-body-fluid: clamp(1.4rem, 2.1vw, 2.1rem);
    --font-size-h3-fluid: clamp(2.2rem, 1.9rem + 1.5vw, 3rem);
    --font-size-h2-fluid: clamp(2.6rem, 2.2rem + 2vw, 3.4rem);
    --font-size-h1-fluid: clamp(3.2rem, 2.6rem + 3vw, 4.4rem);

    /* Spacings */
    --space-xs: clamp(0.5rem, 0.5vw + 0.25rem, 1rem);
    --space-sm: clamp(1rem, 2vw, 2rem);
    --space-md: clamp(2rem, 2vw + 1rem, 4rem);
    --space-lg: clamp(3rem, 3vw + 1.5rem, 6rem);
    --space-xl: clamp(5rem, 5vw + 2.5rem, 10rem);

    /* Line heights */
    --line-height-small: 1.2;
    --line-height-body: 1.52;
    --line-height-heading: 1.2;

    /* for images */
    --border-radius: 4px;

    /* Plyr colors */
    --plyr-color-main: var(--color-primary);
    --plyr-video-control-color-hover: var(--color-primary);
    --plyr-video-control-background-hover: rgba(0, 0, 0, 0.5);
    --plyr-audio-control-background-hover: rgba(0, 0, 0, 0.5);
}