/* VARIABLES */
:root {

    --surface-color: #ffffff;

    /* BASE COLOR*/
    --primary-color-darker: #3b0052;
    --primary-color-dark: #6a1b7f;
    --primary-color-mid: #af8eb5;
    --primary-color-light: #e1bee7;
    --primary-color-lighter: #f3e5f5;

    /* ACCENT COLOR */
    --secondary-color-darker: #580036;
    --secondary-color-dark: #861850;
    --secondary-color-mid: #b3407b;
    --secondary-color-light: #eaa9c2;
    --secondary-color-lighter: #eacbd7;

    /* GREYS */
    --grey-darker: #212121;
    --grey-dark: #616161;
    --grey-mid: #9e9e9e;
    --grey-light: #eeeeee;
    --grey-lighter: #fafafa;

    /* ERRORS */
    --error-color-dark: #96242c;
    --error-color-mid: #bb1f24;
    --error-color-light: #f1cfcf;

    /* COMMON */
    --common-green-dark: #2e7d32;
    --common-green-mid: #60ad5e;
    --common-green-light: #c7e2c6;
}