:root, [data-theme="default"] {
    /* color palette */
    /* primary palette*/
    --ec-color-primary-900: hsl(217, 26%, 19%);
    --ec-color-primary-800: hsl(217, 26%, 29%); /*Kepro Blue*/
    --ec-color-primary-700: hsl(217, 26%, 37%);
    --ec-color-primary-600: hsl(217, 26%, 44%);
    --ec-color-primary-500: hsl(217, 26%, 51%);
    --ec-color-primary-400: hsl(217, 26%, 61%);
    --ec-color-primary-300: hsl(217, 26%, 69%);
    --ec-color-primary-200: hsl(217, 26%, 77%);
    --ec-color-primary-100: hsl(217, 26%, 85%);
    --ec-color-primary-50: hsl(217, 26%, 93%);
    /*action palette*/
    --ec-color-action-900: hsl(189, 45%, 26%);
    --ec-color-action-800: hsl(191, 49%, 37%); /*Main*/
    --ec-color-action-700: hsl(192, 51%, 43%);
    --ec-color-action-600: hsl(193, 52%, 50%);
    --ec-color-action-500: hsl(193, 62%, 55%);
    --ec-color-action-400: hsl(192, 67%, 57%);
    --ec-color-action-300: hsl(192, 71%, 63%);
    --ec-color-action-200: hsl(192, 75%, 73%);
    --ec-color-action-100: hsl(192, 76%, 84%);
    --ec-color-action-50: hsl(190, 67%, 97%);
    /*accent palette*/
    --ec-color-accent-900: hsl(271, 41%, 20%);
    --ec-color-accent-800: hsl(269, 41%, 28%);
    --ec-color-accent-700: hsl(270, 41%, 36%);
    --ec-color-accent-600: hsl(269, 41%, 44%);
    --ec-color-accent-500: hsl(270, 41%, 56%);
    --ec-color-accent-400: hsl(269, 41%, 64%);
    --ec-color-accent-300: hsl(269, 41%, 72%);
    --ec-color-accent-200: hsl(269, 41%, 80%);
    --ec-color-accent-100: hsl(269, 41%, 88%);
    --ec-color-accent-50: hsl(270, 40%, 96%);
    /*alert palette*/
    --ec-color-alert-900: hsl(20, 70%, 25%);
    --ec-color-alert-800: hsl(26, 64%, 31%);
    --ec-color-alert-700: hsl(32, 62%, 40%);
    --ec-color-alert-600: hsl(34, 64%, 49%);
    --ec-color-alert-500: hsl(38, 87%, 62%);
    --ec-color-alert-400: hsl(50, 85%, 54%);
    --ec-color-alert-300: hsl(52, 87%, 71%);
    --ec-color-alert-200: hsl(54, 93%, 83%);
    --ec-color-alert-100: hsl(53, 100%, 93%);
    --ec-color-alert-50: hsl(54, 100%, 98%);
    /*gray palette*/
    --ec-color-gray-900: hsl(0, 0%, 11%); /*Black*/
    --ec-color-gray-800: hsl(0, 0%, 24%);
    --ec-color-gray-700: hsl(0, 0%, 36%);
    --ec-color-gray-600: hsl(0, 0%, 44%);
    --ec-color-gray-500: hsl(0, 0%, 66%);
    --ec-color-gray-400: hsl(0, 0%, 72%);
    --ec-color-gray-300: hsl(0, 0%, 86%);
    --ec-color-gray-200: hsl(0, 0%, 92%);
    --ec-color-gray-100: hsl(0, 0%, 95%);
    --ec-color-gray-50: hsl(0, 0%, 98%); /*White*/
    /*error palette*/
    --ec-color-error-900: hsl(0, 60%, 24%);
    --ec-color-error-800: hsl(0, 67%, 32%);
    --ec-color-error-700: hsl(359, 62%, 40%);
    --ec-color-error-600: hsl(0, 59%, 45%);
    --ec-color-error-500: hsl(2, 60%, 48%);
    --ec-color-error-400: hsl(0, 52%, 53%);
    --ec-color-error-300: hsl(359, 41%, 58%);
    --ec-color-error-200: hsl(359, 44%, 70%);
    --ec-color-error-100: hsl(353, 54%, 85%);
    --ec-color-error-50: hsl(349, 53%, 94%);
    /*success palette*/
    --ec-color-success-900: hsl(146, 73%, 20%);
    --ec-color-success-800: hsl(146, 65%, 28%);
    --ec-color-success-700: hsl(146, 62%, 33%);
    --ec-color-success-600: hsl(146, 59%, 38%);
    --ec-color-success-500: hsl(145, 56%, 43%);
    --ec-color-success-400: hsl(143, 41%, 52%);
    --ec-color-success-300: hsl(143, 40%, 60%);
    --ec-color-success-200: hsl(141, 39%, 72%);
    --ec-color-success-100: hsl(141, 39%, 83%);
    --ec-color-success-50: hsl(141, 39%, 93%);
    /* ==========================================
        Color filters Get the hex of the color
        you want and run it through the generator
        at the link below.

        https://isotropic.co/hex-color-to-css-filter/
       ==========================================*/
    /* primary palette*/
    --ec-color-primary-800-filter: invert(28%) sepia(14%) saturate(1127%) hue-rotate(178deg) brightness(88%) contrast(94%);
    /*action palette*/
    --ec-color-action-800-filter: invert(38%) sepia(79%) saturate(344%) hue-rotate(144deg) brightness(94%) contrast(89%);
    --ec-color-action-50-filter: invert(87%) sepia(3%) saturate(1621%) hue-rotate(190deg) brightness(113%) contrast(98%);
    /*accent palette*/
    --ec-color-accent-600-filter: invert(27%) sepia(14%) saturate(3692%) hue-rotate(233deg) brightness(103%) contrast(89%);
    /*alert palette*/
    --ec-color-alert-500-filter: invert(79%) sepia(87%) saturate(659%) hue-rotate(320deg) brightness(97%) contrast(96%);
    /*gray palette*/
    --ec-color-gray-900-filter: invert(6%) sepia(4%) saturate(8%) hue-rotate(314deg) brightness(107%) contrast(89%); /*Black*/
    --ec-color-gray-700-filter: invert(34%) sepia(0%) saturate(0%) hue-rotate(115deg) brightness(97%) contrast(81%);
    --ec-color-gray-400-filter: invert(90%) sepia(21%) saturate(0%) hue-rotate(155deg) brightness(95%) contrast(90%);
    --ec-color-gray-50-filter: invert(94%) sepia(0%) saturate(5193%) hue-rotate(145deg) brightness(111%) contrast(105%);
    /*error palette*/
    --ec-color-error-600-filter: invert(14%) sepia(82%) saturate(3958%) hue-rotate(351deg) brightness(95%) contrast(76%);
    /*success palette*/
    --ec-color-success-600-filter: invert(47%) sepia(100%) saturate(291%) hue-rotate(93deg) brightness(86%) contrast(99%);
    --ec-color-success-700-filter: invert(39%) sepia(79%) saturate(383%) hue-rotate(93deg) brightness(93%) contrast(96%);
    /* We may use the below section in the future.*/
    /* color contrasts */
    /*--color-bg: black;
    --color-contrast-lower: hsl(0, 0%, 95%);
    --color-contrast-low: hsl(240, 1%, 83%);
    --color-contrast-medium: hsl(240, 1%, 48%);
    --color-contrast-high: hsl(240, 4%, 20%);
    --color-contrast-higher: black;*/

    --ec-color-error: var(--ec-color-error-700);
    --ec-color-status-black: var(--ec-color-gray-900);
    --ec-color-status-gray: var(--ec-color-gray-400);
    --ec-color-status-green: var(--ec-color-success-900);
    --ec-color-status-orange: var(--ec-color-alert-900);
    --ec-color-status-purple: var(--ec-color-accent-900);
    --ec-color-status-background-black: var(--ec-color-gray-300);
    --ec-color-status-background-gray: var(--ec-color-gray-50);
    --ec-color-status-background-green: var(--ec-color-success-100);
    --ec-color-status-background-orange: var(--ec-color-alert-200);
    --ec-color-status-background-purple: var(--ec-color-accent-100);

    --ec-color-text: var(--ec-color-gray-900);
    --ec-color-text-light: var(--ec-color-gray-700);
}

[data-theme] {
    background-color: var(--color-bg);
    color: var(--color-contrast-high);
}

[data-theme="dark"] {
    --color-primary: red;
    /* color contrasts */
    --color-bg: black;
    --color-contrast-lower: hsl(240, 6%, 15%);
    --color-contrast-low: hsl(252, 4%, 25%);
    --color-contrast-medium: hsl(240, 1%, 57%);
    --color-contrast-high: hsl(0, 0%, 89%);
    --color-contrast-higher: white;
    --color-ec-button-background: var(--color-primary-50);
}