:root {
    /* Literal variables */
    --black: hsl(0deg, 0%, 7%);
    --black-bis: hsl(0deg, 0%, 10%);
    --grey-dark: hsl(0deg, 0%, 15%);
    --grey: hsl(0deg, 0%, 50%);
    --grey-light: hsl(0deg, 0%, 75%);
    --white-bis: hsl(0deg, 0%, 95%);
    --white: hsl(0deg, 0%, 100%);

    --red: #f34646;
    --orange: #f3a246;
    --yellow: #f7c82b;
    --yellow-bis: #f7c82baa;
    --lime: #9cf346;
    --green: #07c768;
    --cyan: #1cc4be;
    --light-blue: #87d9ff;
    --blue: #00a8f0;
    --dark-blue: #097bb1;
    --purple: #5a46f3;
    --violet-bis: #ec84ca;
    --pink: #ff26cd;

    /* Derived variables */
    --page-background: var(--white);
    --background: var(--white-bis);
    --border: var(--grey-light);

    --text: var(--grey);
    --text-strong: var(--grey-dark);
    --text-light: var(--grey-light);

    --primary: var(--pink);
    --primary-invert: var(--white);

    --secondary: var(--purple);
    --secondary-invert: var(--white);

    --subtitle-color: var(--text);
    --title-color: var(--text-strong);

    --shadow: rgb(0 0 0 / 30%);

    /* Spacing */
    --section-padding: 2rem;
    --container-max-width: 80rem;

}

@media screen and (min-width: 600px) {
    :root {
        --section-padding: 3rem;
    }
}

@media screen and (min-width: 1000px) {
    :root {
        --section-padding: 4rem;
    }
}

@media screen and (min-width: 1200px) {
    :root {
        --section-padding: 6rem;
    }
}