:root {
    --body-background-color: #F5F5F5;
    --hero-background: #F0ECE2;
    --hero-text-color: var(--main-dark);

    /*Brand colors*/
    --secondary-color: #220A3B;
    --secondary-color-hover: #341654;
    --tertiary-color: #05235C;
    
    /*UI Colors*/
    --p-color: #3e4146;
    --disabled-grey: #a2aab1;
    --error-red: #EF3C3C;
    --success-green: #309b5e;
    --info-blue: #2C40D1;
    --main-dark: #121519;
    --main-light: #F5F5F5;
    --white: #FFFFFF;

    --border-color: #E0E0E0;
    --outline-button: var(--primary-color);
    --border-color-input: var(--border-color);
    --border-color-card: var(--border-color);
    --input-background-color: var(--white);

    --dark-theme-highlight-color: #34373C;

    --button-text: #FFFFFF;
    --button-text-hover: var(--button-text);

    --block-darker-background: #D9D4CA;
    --cta-block-background: #919EFF;
    --cta-block-color: #FFFFFF;
    --footer-background-color: #F5F5F5;
    --footer-text-color: var(--p-color);
    --nav-background-color: var(--main-dark);
    --nav-items-color: var(--white);
    --nav-buttons-color: var(--primary-color);
}

.dark {
    --p-color: var(--main-light);
    --heading-color: var(--white);
    --link-color: var(--white);
    --button-text: var(--main-dark);
    --block-darker-background: var(--main-dark);
    --cta-block-background: var(--main-dark);
    --input-background-color: var(--dark-theme-highlight-color);
    --white: var(--dark-theme-highlight-color);

    h1, h2, h3, h4, h5, h6 {
        color: white;
    }

    button, a[role="button"] {
        --primary-color: #FFFFFF;
        --button-text: var(--primary-color);
        --primary-color-hover: var(--primary-color);
        --button-text-hover: var(--primary-color);
    }
}