:root {
    /* Primary */
    --en-primary: 59, 125, 153; /* Primary color */
    --en-primary-dark: 54, 115, 141; /* Pressed for primary */
    --en-primary-light: 74, 135, 161; /* Hover for primary */
    --en-primary-dim: 144, 180, 196; /* Hover for grid, selected */
    --en-primary-faint: 177, 203, 214; /* Selected for grid */
    /* Secondary */
    --en-secondary: 239, 245, 247; /* Segmented + chips */
    --en-secondary-dark: 212, 227, 233; /* Hover for selected */
    --en-secondary-medium: 228, 238, 242; /* Pressed for white, selected */
    --en-secondary-light: 247, 250, 252; /* Hover for white */
    --en-secondary-darker: 189, 218, 229; /* Grid hover */
    /* Base color */
    --en-base-navy: 20, 36, 89; /* Graph */
    --en-base-purple: 125, 58, 193; /* Graph */
    --en-base-pink: 239, 23, 166; /* Graph */
    --en-base-petrol: 10, 81, 93; /* Menu */
    --en-base-teal: 10, 169, 143; /* Menu highlight */
    --en-base-green: 79, 177, 33; /* Banner, grid */
    --en-base-green-dim: 147, 205, 119; /* Grid hover */
    --en-base-green-medium: 183, 223, 164; /* Grid */
    --en-base-green-light: 227, 242, 219; /* Banner */
    --en-base-blue: 12, 182, 236; /* Banner, grid */
    --en-base-blue-dim: 106, 208, 241; /* Grid hover */
    --en-base-blue-medium: 158, 226, 247; /* Grid */
    --en-base-blue-light: 226, 246, 253; /* Banner */
    --en-base-red-dark: 176, 20, 15; /* Button */
    --en-base-red: 191, 22, 16; /* Banner, grid */
    --en-base-red-faint: 199, 50, 45; /* Button */
    --en-base-red-dim: 225, 145, 143; /* Grid hover */
    --en-base-red-medium: 235, 181, 178; /* Grid */
    --en-base-red-light: 248, 226, 225; /* Banner */
    --en-base-orange: 246, 121, 29; /* Notification for messages */
    --en-base-yellow: 234, 189, 59; /* Banner, grid */
    --en-base-yellow-dim: 239, 206, 108; /* Grid hover */
    --en-base-yellow-medium: 245, 223, 161; /* Grid */
    --en-base-yellow-light: 251, 242, 216; /* Banner */
    --en-base-blue-darker: 183, 233, 250; /* Grid hover */

    /* NEW COLOR VARIABLES */

    /* Color Scale */
    /* Black/White */
    --en-black: 0, 0, 0; /* #000000 */
    --en-white: 255, 255, 255; /* #FFFFFF */

    /* Grey */
    --en-grey-50: 250, 250, 250; /* #FAFAFA */
    --en-grey-100: 245, 245, 245; /* #F5F5F5 */
    --en-grey-200: 238, 238, 238; /* #EEEEEE */
    --en-grey-300: 224, 224, 224; /* #E0E0E0*/
    --en-grey-400: 189, 189, 189; /* #BDBDBD */
    --en-grey-500: 158, 158, 158; /* #9E9E9E */
    --en-grey-600: 117, 117, 117; /* #757575 */
    --en-grey-700: 97, 97, 97; /* #616161 */
    --en-grey-800: 66, 66, 66; /* #424242 */
    --en-grey-900: 24, 29, 39; /* #181D27 */

    /* Primary */
    --en-primary-50: 239, 245, 247; /* #EFF5F7 */
    --en-primary-100: 214, 239, 245; /* #D6EFF5 */
    --en-primary-200: 184, 219, 231; /* #B8DBE7 */
    --en-primary-300: 153, 195, 214; /* #99C3D6 */
    --en-primary-400: 115, 165, 189; /* #73A5BD */
    --en-primary-500: 88, 144, 171; /* #5890AB */
    --en-primary-600: 59, 125, 153; /* #3B7D99 */
    --en-primary-700: 46, 110, 136; /* #2E6E88 */
    --en-primary-800: 30, 90, 113; /* #1E5A71 */
    --en-primary-900: 15, 71, 92; /* #0F475C */

    /* Red */
    --en-red-50: 255, 234, 236; /* #FFEAEC */
    --en-red-100: 254, 203, 206; /* #FECBCE */
    --en-red-200: 236, 151, 148; /* #EC9794 */
    --en-red-300: 225, 111, 106; /* #E16F6A */
    --en-red-400: 233, 78, 69; /* #E94E45 */
    --en-red-500: 236, 62, 41; /* #EC3E29 */
    --en-red-600: 221, 52, 41; /* #DD3429 */
    --en-red-700: 204, 41, 35; /* #CC2923 */
    --en-red-800: 191, 34, 28; /* #BF221C */
    --en-red-900: 176, 20, 15; /* #B0140F */

    /* Yellow */
    --en-yellow-50: 254, 248, 227; /* #FEF8E3 */
    --en-yellow-100: 253, 237, 183; /* #FDEDB7 */
    --en-yellow-200: 252, 225, 137; /* #FCE189 */
    --en-yellow-300: 251, 215, 92; /* #FBD75C */
    --en-yellow-400: 251, 204, 61; /* #FBCC3D */
    --en-yellow-500: 250, 196, 47; /* #FAC42F */
    --en-yellow-600: 250, 182, 41; /* #FAB629 */
    --en-yellow-700: 249, 164, 37; /* #F9A425 */
    --en-yellow-800: 248, 148, 34; /* #F89422 */
    --en-yellow-900: 246, 119, 29; /* #F6771D */

    /* Green */
    --en-green-50: 237, 248, 230; /* #EDF8E6 */
    --en-green-100: 209, 237, 194; /* #D1EDC2 */
    --en-green-200: 178, 224, 154; /* #B2E09A */
    --en-green-300: 146, 212, 111; /* #92D46F */
    --en-green-400: 120, 202, 78; /* #78CA4E */
    --en-green-500: 94, 193, 41; /* #5EC129 */
    --en-green-600: 79, 177, 33; /* #4FB121 */
    --en-green-700: 55, 157, 22; /* #379D16 */
    --en-green-800: 27, 137, 9; /* #1B8909 */
    --en-green-900: 0, 103, 0; /* #006700 */

    /* Blue */
    --en-blue-50: 224, 245, 252; /* #E0F5FC */
    --en-blue-100: 177, 230, 247; /* #B1E6F7 */
    --en-blue-200: 125, 213, 242; /* #7DD5F2 */
    --en-blue-300: 72, 196, 237; /* #48C4ED */
    --en-blue-400: 12, 184, 236; /* #0CB8EC */
    --en-blue-500: 0, 171, 234; /* #00ABEA */
    --en-blue-600: 0, 157, 220; /* #009DDC */
    --en-blue-700: 0, 138, 201; /* #008AC9 */
    --en-blue-800: 0, 121, 182; /* #0079B6 */
    --en-blue-900: 0, 90, 150; /* #005A96 */

    /* Teal */
    --en-teal-50: 223, 243, 239; /* #DFF3EF */
    --en-teal-100: 176, 224, 214; /* #B0E0D6 */
    --en-teal-200: 124, 205, 188; /* #7CCDBC */
    --en-teal-300: 69, 185, 162; /* #45B9A2 */
    --en-teal-400: 10, 169, 143; /* #0AA98F */
    --en-teal-500: 0, 153, 124; /* #00997C */
    --en-teal-600: 0, 140, 128; /* #008C80 */
    --en-teal-700: 0, 124, 120; /* #007C78 */
    --en-teal-800: 0, 101, 108; /* #00656C */
    --en-teal-900: 10, 81, 93; /* #0A515D */

    /* Navy */
    --en-navy-50: 230, 233, 241; /* #E6E9F1 */
    --en-navy-100: 193, 200, 221; /* #C1C8DD */
    --en-navy-200: 152, 165, 198; /* #98A5C6 */
    --en-navy-300: 113, 130, 175; /* #7182AF */
    --en-navy-400: 83, 103, 159; /* #53679F */
    --en-navy-500: 53, 78, 145; /* #354E91 */
    --en-navy-600: 47, 71, 136; /* #2F4788 */
    --en-navy-700: 38, 62, 124; /* #263E7C */
    --en-navy-800: 31, 52, 112; /* #1F3470 */
    --en-navy-900: 20, 36, 89; /* #142459 */

    /* Purple */
    --en-purple-50: 240, 232, 247; /* #F0E8F7 */
    --en-purple-100: 216, 198, 236; /* #D8C6EC */
    --en-purple-200: 190, 160, 225; /* #BEA0E1 */
    --en-purple-300: 165, 120, 213; /* #A578D5 */
    --en-purple-400: 145, 89, 203; /* #9159CB */
    --en-purple-500: 126, 58, 193; /* #7E3AC1 */
    --en-purple-600: 116, 53, 187; /* #7435BB */
    --en-purple-700: 104, 44, 178; /* #682CB2 */
    --en-purple-800: 92, 37, 170; /* #5C25AA */
    --en-purple-900: 74, 23, 157; /* #4A179D */

    /* Pink */
    --en-pink-50: 250, 227, 243; /* #FAE3F3 */
    --en-pink-100: 243, 185, 227; /* #F3B9E3 */
    --en-pink-200: 238, 138, 207; /* #EE8ACF */
    --en-pink-300: 238, 85, 186; /* #EE55BA */
    --en-pink-400: 239, 23, 166; /* #EF17A6 */
    --en-pink-500: 243, 0, 145; /* #F30091 */
    --en-pink-600: 225, 0, 140; /* #E1008C */
    --en-pink-700: 201, 0, 133; /* #C90085 */
    --en-pink-800: 178, 0, 128; /* #B20080 */
    --en-pink-900: 136, 0, 117; /* #880075 */

    /* Semantics */
    /* Primary actions */
    --en-action-primary-default: rgb(var(--en-primary-600));
    --en-action-primary-hover: rgb(var(--en-primary-500));
    --en-action-primary-pressed: rgb(var(--en-primary-700));
    --en-action-disabled: rgb(var(--en-grey-400));

    /* Secondary actions */
    --en-action-secondary-default: rgb(var(--en-white));
    --en-action-secondary-hover: rgb(var(--en-primary-50));
    --en-action-secondary-pressed: rgb(var(--en-primary-100));
    --en-action-secondary-selected-hover: rgb(var(--en-primary-200));

    /* Success */
    --en-success-default: rgb(var(--en-green-500));
    --en-success-active: rgb(var(--en-green-600));
    --en-success-hover: rgb(var(--en-green-400));
    --en-success-subtle: rgb(var(--en-green-200));
    --en-success-background: rgb(var(--en-green-100));

    /* Warning */
    --en-warning-default: rgb(var(--en-yellow-500));
    --en-warning-active: rgb(var(--en-yellow-600));
    --en-warning-hover: rgb(var(--en-yellow-400));
    --en-warning-subtle: rgb(var(--en-yellow-200));
    --en-warning-background: rgb(var(--en-yellow-100));

    /* Critical */
    --en-critical-default: rgb(var(--en-red-500));
    --en-critical-active: rgb(var(--en-red-600));
    --en-critical-hover: rgb(var(--en-red-400));
    --en-critical-subtle: rgb(var(--en-red-200));
    --en-critical-background: rgb(var(--en-red-100));

    /* Information */
    --en-information-default: rgb(var(--en-blue-500));
    --en-information-active: rgb(var(--en-blue-600));
    --en-information-hover: rgb(var(--en-blue-400));
    --en-information-subtle: rgb(var(--en-blue-200));
    --en-information-background: rgb(var(--en-blue-100));

    /* Text */
    --en-text-default: rgb(var(--en-grey-900));
    --en-text-subtle: rgb(var(--en-grey-700));
    --en-text-white: rgb(var(--en-white));
    --en-text-critical: rgb(var(--en-red-800));

    /* Icon */
    --en-icon-default: rgb(var(--en-grey-900));
    --en-icon-subtle: rgb(var(--en-grey-700));
    --en-icon-white: rgb(var(--en-white));

    /* Surface */
    --en-surface-dark: rgb(var(--en-grey-800));
    --en-surface-page: rgb(var(--en-grey-200));
    --en-surface-light: rgb(var(--en-grey-100));
    --en-surface-white: rgb(var(--en-white));
    --en-surface-overlay: rgba(var(--en-grey-900), 40%);
    --en-surface-shadow: rgba(var(--en-grey-900), 12%);

    /* Stroke */
    --en-stroke-default: rgb(var(--en-grey-300));
    --en-stroke-hover: rgb(var(--en-grey-500));
}