:root {
    --color-true-white: #ffffff;
    --color-true-black: #000000;

    --color-white: #f8f8f8;
    --color-grey: #f0f0f0;
    --color-black: #333333;

    --color-grey-light: #f3f3f3;
    --color-grey-dark: #c4c4c4;

    --color-primary: #5484FF;
    --color-secondary: #8055FF;
    --color-tertiary: #5484FF;

    --color-primary-light: #41F7FF;
    --color-secondary-light: #5484FF;
    --color-tertiary-light: #7BA1FF;

    --color-primary-dark: #8055FF;
    --color-secondary-dark: #C149FF;
    --color-tertiary-dark: #2B68FF;

    --color-text-black: var(--color-black);
    --color-text-grey: var(--color-grey);
    --color-text-white: var(--color-white);

    --color-text-on-primary: var(--color-white);
    --color-text-on-secondary: var(--color-white);
    --color-text-on-tertiary: var(--color-white);

    --color-text-on-primary-light: var(--color-white);
    --color-text-on-secondary-light: var(--color-white);
    --color-text-on-tertiary-light: var(--color-white);

    --color-text-on-primary-dark: var(--color-white);
    --color-text-on-secondary-dark: var(--color-white);
    --color-text-on-tertiary-dark: var(--color-white);

    --color-success: #155724;
    --color-success-background: #d4edda;
    --color-success-border-color: #c3e6cb;
    --color-error: #FF0000;

    --color-background: var(--color-white);
    --color-background-reverse: var(--color-black);

    --font-familly: 'Roboto', sans-serif;
    --font-family-title: 'Barlow', sans-serif;;
    --font-size: 16px;
    --text-color: var(--color-black);
    --text-color-reverse: var(--color-text-white);
}