:root {
    /* dark mode colors */
    @media (prefers-color-scheme: dark) {
        --ee-page-bg: hsl(245 5% 20%);
        --ee-container-bg: hsl(245, 12%, 25%);
        --ee-white-bg: hsl(180, 33%, 2%);

        --ee-border-color: hsl(207 5% 35%);
        --ee-border-color-light: hsl(207, 5%, 25%);
        --ee-border-color-dark: hsl(207, 5%, 45%);
        --ee-border-color-active: hsl(207, 87%, 28%);
        --ee-border-color-focus: hsl(207, 5%, 48%);

        --ee-accent-color: hsl(234, 27%, 38%);
        --ee-accent-color-light: hsl(234, 17%, 23%);
        --ee-accent-color-hover: hsl(234, 47%, 38%);
        --ee-accent-color-hover-hard: hsl(234, 57%, 48%);

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

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

        --ee-color-dark-grey: hsl(240, 2%, 29%);
        --ee-color-dark-grey-hover: hsl(240, 2%, 34%);
        --ee-color-dark-grey-text: hsl(240, 2%, 94%);

        --ee-text-color: hsl(0, 3%, 89%);
        --ee-text-color-light: hsl(0, 3%, 69%);
        --ee-text-color-dark: hsl(0, 3%, 94%);
        --ee-text-color-black: hsl(0, 3%, 99%);
        --ee-text-selection-color: hsl(0, 3%, 89%);
        --ee-text-selection-bg: hsl(245, 15%, 15%);

        --ee-heading-color: hsl(237 15% 89%);
        --ee-heading-color-hover: hsl(237 85% 84%);
        --ee-heading-color-alt: hsl(235, 20%, 74%);

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

        --ee-code-text-color: hsl(190, 77%, 68%);
        --ee-code-background: hsl(235, 15%, 24%);

        --ee-link-color: hsl(198, 80%, 64%);
        --ee-link-color-hover: hsl(198, 100%, 74%);

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

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

        /* info notices */
        --ee-info-msg-color: hsl(206, 39%, 45%);
        --ee-info-msg-text-color: var(--ee-always-white);
        --ee-info-msg-link-color: hsl(180, 100%, 50%);
        --ee-info-msg-link-hover: hsl(180, 100%, 80%);

        /* success notices */
        --ee-success-msg-color: hsl(128, 45%, 39%);
        --ee-success-msg-text-color: var(--ee-always-white);
        --ee-success-msg-link-color: hsl(241 100% 18%);
        --ee-success-msg-link-hover: hsl(241 100% 48%);

        /* warning notices */
        --ee-warning-msg-color: hsl(51 100% 33%);
        --ee-warning-msg-text-color: var(--ee-always-white);
        --ee-warning-msg-link-color: hsl(240 100% 30%);
        --ee-warning-msg-link-hover: hsl(240 100% 60%);

        /* error notices */
        --ee-error-msg-color: hsl(351, 91%, 35%);
        --ee-error-msg-text-color: var(--ee-always-white);
        --ee-error-msg-link-color: hsl(180, 100%, 44%);
        --ee-error-msg-link-hover: hsl(180, 100%, 74%);
    }
}