:root {

    /* these never change */
    --ee-always-dark: hsl(0, 0%, 28%);
    --ee-always-light: hsl(0, 33%, 99%);
    --ee-always-black: hsl(180, 33%, 2%);
    --ee-always-white: hsl(222, 100%, 98%);

    --ee-box-shadow: 0 6px 4px -6px hsla(0, 0%, 0%, .5), 0 2px 6px hsla(0, 0%, 0%, .25);
    --ee-box-shadow-big: 0 11px 6px -9px hsla(0, 0%, 0%, .5), 0 3px 9px hsla(0, 0%, 0%, .25);
    --ee-button-shadow: 0 2px 4px -1px hsla(0, 0%, 0%, .375);


    /* light mode colors */
    --ee-page-bg: hsl(245, 12.5%, 92.5%);
    --ee-container-bg: hsl(245, 12.5%, 97.5%);
    --ee-white-bg: hsl(0, 0%, 100%);

    --ee-border-color: hsl(207, 5%, 72%);
    --ee-border-color-light: hsl(207, 5%, 87%);
    --ee-border-color-dark: hsl(207, 5%, 57%);
    --ee-border-color-active: hsl(207, 87%, 42%);
    --ee-border-color-focus: hsl(207, 5%, 67%);

    --ee-color-blue: hsl(207, 67%, 42%);
    --ee-color-blue-accent: hsl(207, 87%, 42%);
    --ee-color-blue-text: hsl(207, 0%, 100%);

    --ee-color-cyan: hsl(190, 67%, 48%);
    --ee-color-cyan-hover: hsl(190, 87%, 48%);
    --ee-color-cyan-text: hsl(190, 0%, 100%);
    --ee-color-cyan-pale: hsl(190, 57%, 96%);

    --ee-color-cyan-dark: hsl(199, 68%, 38%);
    --ee-color-cyan-dark-accent: hsl(199, 68%, 48%);
    --ee-color-cyan-dark-highlite: hsl(199, 68%, 58%);
    --ee-color-cyan-dark-shadow: hsl(199, 58%, 28%);
    --ee-color-cyan-dark-text: hsl(190, 7%, 99%);

    --ee-color-green: hsl(84, 51%, 44%);
    --ee-color-green-dark: hsl(84, 71%, 34%);
    --ee-color-green-hover: hsl(84, 71%, 44%);
    --ee-color-green-text: hsl(84, 0%, 100%);

    --ee-color-grey: hsl(218, 6%, 45%);
    --ee-color-grey-hover: hsl(218, 6%, 55%);
    --ee-color-grey-text: hsl(218, 6%, 95%);

    --ee-color-dark-grey: hsl(240, 2%, 19%);
    --ee-color-dark-grey-hover: hsl(240, 2%, 24%);
    --ee-color-dark-grey-text: hsl(240, 2%, 84%);

    --ee-color-light-grey: hsl(240, 2%, 89%);
    --ee-color-light-grey-hover: hsl(240, 2%, 94%);
    --ee-color-light-grey-text: hsl(240, 2%, 24%);

    --ee-color-pink: hsl(347, 57%, 65%);
    --ee-color-pink-hover: hsl(347, 77%, 65%);
    --ee-color-pink-text: hsl(347, 0%, 100%);

    --ee-color-red: hsl(10, 64%, 53%);
    --ee-color-red-hover: hsl(10, 84%, 48%);
    --ee-color-red-text: hsl(347, 0%, 100%);

    --ee-color-purple: hsl(271, 44%, 67%);
    --ee-color-purple-hover: hsl(271, 64%, 67%);
    --ee-color-purple-text: hsl(271, 0%, 100%);

    --ee-color-yellow: hsl(50, 99%, 67%);
    --ee-color-yellow-text: hsl(190, 7%, 7%);


    --ee-accent-color: hsl(234, 27%, 62%);
    --ee-accent-color-light: hsl(234, 27%, 87%);
    --ee-accent-color-hover: hsl(234, 47%, 62%);
    --ee-accent-color-hover-hard: hsl(234, 57%, 52%);

    --ee-input-disabled: hsl(234 10% 60%);

    --ee-text-color: hsl(0, 0%, 23%);
    --ee-text-color-light: hsl(0, 0%, 43%);
    --ee-text-color-dark: hsl(0, 0%, 13%);
    --ee-text-color-black: hsl(0, 0%, 3%);
    --ee-text-selection-color: hsl(0, 0%, 18%);
    --ee-text-selection-bg: hsl(245, 22.5%, 90%);

    --ee-heading-color: hsl(237 15% 29%);
    --ee-heading-color-hover: hsl(237 25% 39%);
    --ee-heading-color-alt: hsl(235, 30%, 24%);

    --ee-button-text-color: hsl(0, 33%, 99%);

    --ee-code-text-color: hsl(199, 88%, 5%);
    --ee-code-background: hsl(160, 3%, 87%);

    --ee-link-color: hsl(198, 68%, 44%);
    --ee-link-color-hover: hsl(198, 78%, 54%);

    --ee-attention-bg-color: hsl(51, 69%, 83%);
    --ee-attention-text-color: hsl(0, 0%, 18%);

    --ee-spinner-border: hsla(199 5% 75% / 75%);
    --ee-spinner-border-accent: hsl(199 100% 45%);

    /* info notices */
    --ee-info-msg-color: hsl(206, 39%, 82.5%);
    --ee-info-msg-btn-color: hsl(206, 49%, 40%);
    --ee-info-msg-text-color: var(--ee-always-black);
    --ee-info-msg-link-color: hsl(207 86% 33%);
    --ee-info-msg-link-hover: hsl(207, 100%, 43%);

    /* success notices */
    --ee-success-msg-color: hsl(128, 45%, 79%);
    --ee-success-msg-btn-color: hsl(128, 35%, 35%);
    --ee-success-msg-text-color: var(--ee-always-black);
    --ee-success-msg-link-color: hsl(207 88% 30%);
    --ee-success-msg-link-hover: hsl(207, 100%, 40%);

    /* warning notices */
    --ee-warning-msg-color: hsl(51, 69%, 78%);
    --ee-warning-msg-btn-color: hsl(51, 79%, 30%);
    --ee-warning-msg-text-color: var(--ee-always-black);
    --ee-warning-msg-link-color: hsl(207 83% 34%);
    --ee-warning-msg-link-hover: hsl(207 100% 44%);

    /* error notices */
    --ee-error-msg-color: hsl(347, 77%, 83%);
    --ee-error-msg-btn-color: hsl(347, 47%, 50%);
    --ee-error-msg-text-color: var(--ee-always-black);
    --ee-error-msg-link-color: hsl(207 88% 30%);
    --ee-error-msg-link-hover: hsl(207, 100%, 40%);

}