:root {
    /* THEMES */
    --theme-blue: #0A77FF;
    --theme-violet: #9775F9;
    --theme-purple: #5D55F6;
    --theme-cherry-red: #FF3960;
    --theme-cerise-pink: #ED5386;
    --theme-bright-teal: #2BF8D6;
    --theme-orange: #ED8653;
    --theme-tiger-orange: #EDAD53;

    /* FOREGROUNDS */
    --layout-foreground: #000000;
    --layout: #FAFAFC;

    --foreground: #252525;
    --background: #FFFFFF;

    --foreground-primary: #0A77FF;
    --foreground-disabled: #DFE2E8;
    --foreground-tertiary: #68727D;

    /* MAINS */
    --border: #EAECF0;
    --disabled: #F5F6F8;
    --icon: #68727D;
    --icon-disabled: #DFE2E8;

    --sidebar-background: #1F2433;
    --sidebar-foreground: #F7F9FC;
    --sidebar-highlight: #262C40;
    --sidebar-gray: #4A4F59;
    --sidebar-border: #2E333D;
    --sidebar-disabled: #6E7480;


    /* PRIMARY */
    --primary-50: #F0F7FF;
    --primary-100: #ECF4FC;
    --primary-200: #C3E0FF;
    --primary-300: #99CCFF;
    --primary-400: #4DA3FF;
    --primary-500: #0A77FF;
    --primary-600: #0863CC;
    --primary-700: #064999;
    --primary-800: #043366;
    --primary-900: #021A33;

    --primary: var(--primary-500);
    --border-primary: #90C2FF;
    --primary-focus: #B2D5FF;
    --primary-stroke: #0E69E2;
    --primary-second: #D6E8FF;

    /* PACE BAR */
    --pace-bar-bg: var(--primary);
    --pace-bar-height: 4px;

    /* SUCCESS */
    --success-50: #F3FCF7;
    --success-100: #E9F8F1;
    --success-200: #C2EED9;
    --success-300: #A9E3C7;
    --success-400: #65CD9A;
    --success-500: #27B973;
    --success-600: #1F9C61;
    --success-700: #187D4E;
    --success-800: #105E3A;
    --success-900: #093E27;

    --success: var(--success-500);
    --border-success: #A9E3C7;
    --success-focus: #28A74540;

    /* WARNING */
    --warning-50: #FFF9F0;
    --warning-100: #FDF6EA;
    --warning-200: #F9E2BA;
    --warning-300: #F9DAAC;
    --warning-400: #F5C56F;
    --warning-500: #EFA22F;
    --warning-600: #D88F28;
    --warning-700: #B3741F;
    --warning-800: #865617;
    --warning-900: #59390E;

    --warning: var(--warning-500);
    --border-warning: #F9DAAC;

    /* DANGER */
    --danger-50: #FFF5F5;
    --danger-100: #FFEFEE;
    --danger-200: #FFD9D7;
    --danger-300: #FEA19B;
    --danger-400: #FF7066;
    --danger-500: #E33B32;
    --danger-600: #CC4B42;
    --danger-700: #A13A33;
    --danger-800: #732723;
    --danger-900: #3D1211;

    --danger: var(--danger-500);
    --border-danger: #DB3A33;
    --danger-focus: #FDDDDC;
    --danger-stroke: #DB3A33;

    /* INFO */
    --info-50: #f0f9fb;
    --info-100: #d1ecf1;
    --info-200: #a3dae4;
    --info-300: #75c8d6;
    --info-400: #47b6c8;
    --info-500: #17a2b8;
    --info-600: #13899b;
    --info-700: #106f7f;
    --info-800: #0c5563;
    --info-900: #083c47;

    --info: var(--info-500);
    --border-info: #75c8d6;
    --info-focus: #e0f3f6;
    --info-stroke: #17a2b8;

    /* PURPLE */
    --purple-50: #ECEBFF;
    --purple-100: #DBD9FF;
    --purple-200: #C1BEFF;
    --purple-300: #A6A2FE;
    --purple-400: #8A83FC;
    --purple-500: #574EFA;
    --purple-600: #4C43D8;
    --purple-700: #3E36B6;
    --purple-800: #2E288C;
    --purple-900: #1E1A66;

    --purple: var(--purple-500);
    --border-purple: #ABA7FD;
    --purple-focus: #E3E1FF;
    --purple-stroke: #6A63FF;

    /* PURPLE LIGHT */
    --purple-light-50: #FBF8FF;
    --purple-light-100: #F4EFFF;
    --purple-light-200: #E5D8FF;
    --purple-light-300: #D5C0FF;
    --purple-light-400: #BE9EFF;
    --purple-light-500: #A77CFF;
    --purple-light-600: #8F63F2;
    --purple-light-700: #754BD5;
    --purple-light-800: #5A35B0;
    --purple-light-900: #3E2385;

    --purple-light: var(--purple-light-500);
    --border-purple-light: #BE9EFF;
    --purple-light-focus: #F4EFFF;
    --purple-light-stroke: #8F63F2;

    /* PURPLE DARK */
    --purple-dark-50: #D9D3FF;
    --purple-dark-100: #BBB1FF;
    --purple-dark-200: #9D8EFF;
    --purple-dark-300: #7E6BFF;
    --purple-dark-400: #5F49FF;
    --purple-dark-500: #4229E6;
    --purple-dark-600: #331FAF;
    --purple-dark-700: #25167F;
    --purple-dark-800: #180E52;
    --purple-dark-900: #0C072B;

    --purple-dark: var(--purple-dark-500);
    --border-purple-dark: #5F49FF;
    --purple-dark-focus: #BBB1FF;
    --purple-dark-stroke: #331FAF;

    /* GRAY */
    --gray-50: #FAFAFC;
    --gray-100: #EAECF0;
    --gray-200: #D4D7DC;
    --gray-300: #BFC4CA;
    --gray-400: #8A9198;
    --gray-500: #68727D;
    --gray-600: #5A5C66;
    --gray-700: #3B3F44;
    --gray-800: #161924;
    --gray-900: #0F0F0F;

    --gray: var(--gray-500);
}

:root[data-theme='dark'], body.dark-mode {
    /* FOREGROUNDS */
    --layout-foreground: #FFFFFF;
    --layout: #181818;

    --foreground: #F7F7F9;
    --background: #252525;

    --foreground-primary: #2C8AFF;
    --foreground-disabled: #68727D;
    --foreground-tertiary: #979AA0;

    /* MAINS */
    --border: #323539;
    --disabled: #2A2A2A;
    --icon-disabled: #4A4D52;

    --sidebar-background: #252525;
    --sidebar-foreground: #F7F9FC;
    --sidebar-highlight: #2A2A2A;
    --sidebar-gray: #323539;
    --sidebar-border: #323539;
    --sidebar-disabled: #4A4D52;

    /* PRIMARY */
    --primary-50: #0A1C33;
    --primary-100: #0F3059;
    --primary-200: #144580;
    --primary-300: #1859A6;
    --primary-400: #1D6ECC;
    --primary-500: #2C8AFF;
    --primary-600: #57A1FF;
    --primary-700: #8BC1FF;
    --primary-800: #B5DAFF;
    --primary-900: #E1F1FF;

    --primary: var(--primary-500);
    --border-primary: #1859A6;
    --primary-stroke: #1D6ECC;
    --primary-focus: #292B2C;
    --primary-second: #144580;

    /* SUCCESS */
    --success-50: #0D1F14;
    --success-100: #123820;
    --success-200: #16512B;
    --success-300: #1B6A36;
    --success-400: #209241;
    --success-500: #27B973;
    --success-600: #52C98E;
    --success-700: #85D9AE;
    --success-800: #B5E9CB;
    --success-900: #E0F9EA;

    --success: var(--success-500);
    --border-success: #1B6A36;
    --success-focus: #123820;

    /* WARNING */
    --warning-50: #2D1F0A;
    --warning-100: #4A3211;
    --warning-200: #684518;
    --warning-300: #87581F;
    --warning-400: #A56B26;
    --warning-500: #EFA22F;
    --warning-600: #F4B957;
    --warning-700: #F8CF7F;
    --warning-800: #FCE6A7;
    --warning-900: #FFF9D1;

    --warning: var(--warning-500);
    --border-warning: #684518;
    --warning-focus: #4A3211;

    /* DANGER */
    --danger-50: #2A0E0D;
    --danger-100: #4A1715;
    --danger-200: #6A1F1B;
    --danger-300: #8A2722;
    --danger-400: #AB3028;
    --danger-500: #E33B32;
    --danger-600: #EA645E;
    --danger-700: #F18E89;
    --danger-800: #F7B8B5;
    --danger-900: #FDE2E0;

    --danger: var(--danger-500);
    --border-danger: #8A2722;
    --danger-focus: #4A1715;
    --danger-stroke: #AB3028;

    /* INFO */
    --info-50: #0b252a;
    --info-100: #123a43;
    --info-200: #16505c;
    --info-300: #1a6680;
    --info-400: #1e7c99;
    --info-500: #17a2b8;
    --info-600: #3db6c9;
    --info-700: #6ccadd;
    --info-800: #9bdde9;
    --info-900: #caeff6;

    --info: var(--info-500);
    --border-info: #1a6680;
    --info-focus: #123a43;
    --info-stroke: #1e7c99;

    /* PURPLE */
    --purple-50: #1B112D;
    --purple-100: #2A1B48;
    --purple-200: #3B2764;
    --purple-300: #4C3380;
    --purple-400: #5E40A0;
    --purple-500: #574EFA;
    --purple-600: #6A63FF;
    --purple-700: #7F79FF;
    --purple-800: #958FFF;
    --purple-900: #ABAAFF;

    --purple: var(--purple-500);
    --border-purple: #5E40A0;
    --purple-focus: #6A63FF;

    /* PURPLE LIGHT */
    --purple-light-50: #24153B;
    --purple-light-100: #35205A;
    --purple-light-200: #4A2D7D;
    --purple-light-300: #5F3AA0;
    --purple-light-400: #7A52C4;
    --purple-light-500: #956AE6;
    --purple-light-600: #B28AFF;
    --purple-light-700: #C9AFFF;
    --purple-light-800: #DFCCFF;
    --purple-light-900: #F2E9FF;

    --purple-light: var(--purple-light-500);
    --border-purple-light: var(--purple-light-400);
    --purple-light-focus: var(--purple-light-100);
    --purple-light-stroke: var(--purple-light-600);

    /* PURPLE DARK */
    --purple-dark-50: #0A0618;
    --purple-dark-100: #120B2A;
    --purple-dark-200: #1D1242;
    --purple-dark-300: #2A1A60;
    --purple-dark-400: #382180;
    --purple-dark-500: #472AA3;
    --purple-dark-600: #5A3AC7;
    --purple-dark-700: #7456E6;
    --purple-dark-800: #9C8DFF;
    --purple-dark-900: #C9C1FF;

    --purple-dark: var(--purple-dark-500);
    --border-purple-dark: var(--purple-dark-400);
    --purple-dark-focus: var(--purple-dark-100);
    --purple-dark-stroke: var(--purple-dark-600);

    /* GRAY */
    --gray-50: #2A2A2A;
    --gray-100: #2B2D2F;
    --gray-200: #3B3F44;
    --gray-300: #50575F;
    --gray-400: #68727D;
    --gray-500: #8A9198;
    --gray-600: #B0B6BD;
    --gray-700: #DFE2E8;
    --gray-800: #EAECF0;
    --gray-900: #FAFAFC;

    --gray: var(--gray-400);
}

/* PURPLE PRIMARY THEME */
:root[data-primary-theme='violet'] {
    --sidebar-background: #242136;
    --sidebar-foreground: #F7F7F9;
    --sidebar-highlight: #2A273D;
    --sidebar-gray: #45484D;
    --sidebar-border: #323539;
    --sidebar-disabled: #6A6F76;

    --primary-50:  #F6F3FE;
    --primary-100: #EAE3FD;
    --primary-150: #DED4FD;
    --primary-200: #D2C4FC;
    --primary-300: #C6B4FC;
    --primary-400: #AF95FA;
    --primary-500: #9775F9;
    --primary-600: #7F5FF8;
    --primary-700: #6F46E7;
    --primary-800: #5F30D6;
    --primary-850: #4F27C6;
    --primary-900: #471FBD;
    --primary-950: #3F17B5;
    --primary-975: #370FAC;
    --primary-1000: #2F07A4;

    --primary: var(--primary-500);

    /* Supporting */
    --border-primary: #AF95FA;
    --primary-focus: #EAE3FD;
    --primary-stroke: #7F5FF8;
    --primary-second: #EAE3FD;
    --foreground-primary: var(--primary-500);
}

:root[data-primary-theme='violet'][data-theme='dark'],
:root[data-primary-theme='violet'] body.dark-mode {
    /* PRIMARY - Purple Dark Mode */
    --primary-50:  #2F07A4;
    --primary-100: #370FAC;
    --primary-200: #3F17B5;
    --primary-300: #471FBD;
    --primary-400: #4F27C6;
    --primary-500: #9775F9;
    --primary-600: #AF95FA;
    --primary-700: #C6B4FC;
    --primary-800: #EAE3FD;
    --primary-900: #F6F3FE;

    --primary: var(--primary-500);

    --border-primary: #471FBD;
    --primary-stroke: #4F27C6;
    --primary-second: #3F17B5;
}

:root[data-primary-theme='purple'] {
    --sidebar-background: #242136;
    --sidebar-foreground: #F7F7F9;
    --sidebar-highlight : #2A273D;
    --sidebar-gray: #45484D;
    --sidebar-border: #323539;
    --sidebar-disabled: #6A6F76;

    /* PRIMARY - Purple */
    --primary-50:  #E2E1FD;
    --primary-100: #D3D1FC;
    --primary-200: #B6B2FB;
    --primary-300: #9893F9;
    --primary-400: #7B74F8;
    --primary-500: #5D55F6;
    --primary-600: #4E46E5;
    --primary-700: #3E36D3;
    --primary-800: #2F27C2;
    --primary-900: #1F17B0;
    
    --primary: var(--primary-500);
    --border-primary: var(--primary-300);
    --primary-focus: var(--primary-50);
    --primary-stroke: var(--primary-600);
    --primary-second: var(--primary-100);
    --foreground-primary: var(--primary-500);
}

:root[data-primary-theme='purple'][data-theme='dark'],
:root[data-primary-theme='purple'] body.dark-mode {
    /* PRIMARY - Purple Dark Mode */
    --primary-50:  #1A1430;
    --primary-100: #241C49;
    --primary-200: #2F2563;
    --primary-300: #3B2F7E;
    --primary-400: #473A9A;
    --primary-500: #6A5BFF;
    --primary-600: #8B7DFF;
    --primary-700: #A99DFF;
    --primary-800: #C5BDFF;
    --primary-900: #E5E2FF;

    --primary: var(--primary-500);
    --border-primary: var(--primary-300);
    --primary-stroke: var(--primary-400);
    --primary-focus: #292B2C;
    --primary-second: var(--primary-200);
    --foreground-primary: var(--primary-500);
}

/* CHERRY RED PRIMARY THEME */
:root[data-primary-theme='cherry-red'] {
    --sidebar-background: #2E2A2C;
    --sidebar-highlight: #26262C;

    /* PRIMARY - Cherry Red */
    --primary-50:  #FFF1F4;
    --primary-100: #FFE1E7;
    --primary-200: #FFB8C6;
    --primary-300: #FF8CA3;
    --primary-400: #FF6483;
    --primary-500: #FF3960;
    --primary-600: #E63355;
    --primary-700: #BF2B46;
    --primary-800: #8F2035;
    --primary-900: #591321;

    --primary: var(--primary-500);
    --border-primary: #FF8CA3;
    --primary-focus: #FFE1E7;
    --primary-stroke: #E63355;
    --primary-second: #FFE1E7;
    --foreground-primary: var(--primary-500);
}

:root[data-primary-theme='cherry-red'][data-theme='dark'],
:root[data-primary-theme='cherry-red'] body.dark-mode {
    /* PRIMARY - Cherry Red Dark Mode */
    --primary-50:  #33070F;
    --primary-100: #4D0B17;
    --primary-200: #66101F;
    --primary-300: #801427;
    --primary-400: #99182F;
    --primary-500: #FF3960;
    --primary-600: #FF5E7D;
    --primary-700: #FF8FA7;
    --primary-800: #FFBCCC;
    --primary-900: #FFE5EC;

    --primary: var(--primary-500);
    --border-primary: #801427;
    --primary-stroke: #99182F;
    --primary-second: #66101F;
}

/* CHERRY RED PRIMARY THEME */
:root[data-primary-theme='cerise-pink'] {
    --sidebar-background: #2E2A2C;
    --sidebar-highlight: #26262C;

    /* PRIMARY – Cerise Pink */
    --primary-50:  #FBD8E4;
    --primary-100: #F9C9D9;
    --primary-200: #F6ACC4;
    --primary-300: #F3BEB0;
    --primary-400: #F0719B;
    --primary-500: #ED5386;
    --primary-600: #DA4577;
    --primary-700: #C73967;
    --primary-800: #B4245B;
    --primary-900: #A11D48;
    --primary-975: #8E0F39;

    --primary: var(--primary-500);
    --border-primary: var(--primary-300);
    --primary-focus: var(--primary-50);
    --primary-stroke: var(--primary-600);
    --primary-second: #F9C9D9;
    --foreground-primary: var(--primary-500);
}

:root[data-primary-theme='cerise-pink'][data-theme='dark'],
:root[data-primary-theme='cerise-pink'] body.dark-mode {
    /* PRIMARY - Cerise Pink Dark Mode */
    --primary-50:  #330713;
    --primary-100: #4A0A1C;
    --primary-200: #5E0D25;
    --primary-300: #781030;
    --primary-400: #8F153B;
    --primary-500: #ED5386;
    --primary-600: #F0719B;
    --primary-700: #F3BEB0;
    --primary-800: #F6ACC4;
    --primary-900: #FCE7EE;

    --primary: var(--primary-500);
    --border-primary: #781030;
    --primary-stroke: #8F153B;
    --primary-second: #5E0D25;
}

/* BRIGHT TEAL PRIMARY THEME */
:root[data-primary-theme='bright-teal'] {
    --sidebar-background: #232D2B;
    --sidebar-highlight: #1C2422;

    --primary-50:  #E9FCF7;
    --primary-100: #C9F7EB;
    --primary-200: #A5F1DF;
    --primary-300: #7FE8D0;
    --primary-400: #57DDBF;
    --primary-500: #1BC6AA;
    --primary-600: #14AE94;
    --primary-700: #10A189;
    --primary-800: #0C957E;
    --primary-900: #088B73;
    --primary-975: #047C68;

    --primary: var(--primary-500);
    --border-primary: var(--primary-300);
    --primary-focus: var(--primary-50);
    --primary-stroke: var(--primary-600);
    --primary-second: var(--primary-100);
    --foreground-primary: var(--primary-500);
}

:root[data-primary-theme='bright-teal'][data-theme='dark'],
:root[data-primary-theme='bright-teal'] body.dark-mode {
    /* PRIMARY - Muted Deep Teal Dark Mode */
    --primary-50:  #081A18;
    --primary-100: #0C2622;
    --primary-200: #123631;
    --primary-300: #194A43;
    --primary-400: #216158;
    --primary-500: #1BC6AA;
    --primary-600: #23DFC0;
    --primary-700: #4BF9DC;
    --primary-800: #6AFAE2;
    --primary-900: #A9FCEF;

    --primary: var(--primary-500);
    --border-primary: #194A43;
    --primary-stroke: #216158;
    --primary-second: #123631;
}

/* ORANGE PRIMARY THEME */
:root[data-primary-theme='orange'] {
    --sidebar-background: #2E2B2A;
    --sidebar-highlight: #2C2726;

    /* PRIMARY – Orange */
    --primary-25:  #FCEEE7;
    --primary-50:  #FBE4D8;
    --primary-100: #F9D9C9;
    --primary-150: #F8CFBB;
    --primary-200: #F6C4AC;
    --primary-300: #F3B08E;
    --primary-400: #F09B71;
    --primary-500: #ED8653;
    --primary-600: #DA7745;
    --primary-700: #C76738;
    --primary-800: #B4582A;
    --primary-850: #AB5023;
    --primary-900: #A1481D;
    --primary-950: #984116;
    --primary-975: #8E390F;

    --primary: var(--primary-500);
    --border-primary: var(--primary-300);
    --primary-focus: var(--primary-50);
    --primary-stroke: var(--primary-600);
    --primary-second: var(--primary-100);
    --foreground-primary: var(--primary-500);
}

/* TIGER ORANGE PRIMARY THEME */
:root[data-primary-theme='tiger-orange'] {
    --sidebar-background: #2E2B2A;
    --sidebar-highlight: #2C2826;

    /* PRIMARY – Tiger Orange */
    --primary-25:  #FCF3E7;
    --primary-50:  #FBECD8;
    --primary-100: #F9E5C9;
    --primary-150: #F8DEBB;
    --primary-200: #F6D7AC;
    --primary-300: #F3C98E;
    --primary-400: #F0B871;
    --primary-500: #EDAD53;
    --primary-600: #DA9C45;
    --primary-700: #C78B38;
    --primary-800: #B47B2A;
    --primary-850: #AB7223;
    --primary-900: #A16A1D;
    --primary-950: #986116;
    --primary-975: #8E590F;

    --primary: var(--primary-500);
    --border-primary: var(--primary-300);
    --primary-focus: var(--primary-50);
    --primary-stroke: var(--primary-600);
    --primary-second: var(--primary-100);
    --foreground-primary: var(--primary-500);
}

:root[data-primary-theme='orange'][data-theme='dark'],
:root[data-primary-theme='orange'] body.dark-mode {
    /* PRIMARY - Orange Dark Mode */
    --primary-50:  #240F04;
    --primary-100: #3D1A08;
    --primary-200: #57250C;
    --primary-300: #703010;
    --primary-400: #8A3B14;
    --primary-500: #ED8653;
    --primary-600: #F09B71;
    --primary-700: #F3B08E;
    --primary-800: #F6C4AC;
    --primary-900: #FCEEE7;

    --primary: var(--primary-500);
    --border-primary: #703010;
    --primary-stroke: #8A3B14;
    --primary-second: #57250C;
}

:root[data-primary-theme='tiger-orange'][data-theme='dark'],
:root[data-primary-theme='tiger-orange'] body.dark-mode {
    /* PRIMARY - Tiger Orange Dark Mode */
    --primary-50:  #241704;
    --primary-100: #3D2708;
    --primary-200: #57380C;
    --primary-300: #704810;
    --primary-400: #8A5914;
    --primary-500: #EDAD53;
    --primary-600: #F0B871;
    --primary-700: #F3C98E;
    --primary-800: #F6D7AC;
    --primary-900: #FCF3E7;

    --primary: var(--primary-500);
    --border-primary: #704810;
    --primary-stroke: #8A5914;
    --primary-second: #57380C;
}