:root, [data-theme] {
  --nj-semantic-elevation-shadow-2-dp: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 2px 2px 0 rgba(0, 0, 0, .06), 0 3px 1px rgba(0, 0, 0, .06);
  --nj-semantic-elevation-shadow-4-dp: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 5px rgba(0, 0, 0, 0.06), 0 1px 10px rgba(0, 0, 0, 0.06);
  --nj-semantic-elevation-shadow-6-dp: 0 3px 5px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.06), 0 1px 18px rgba(0, 0, 0, 0.06);
  --nj-semantic-elevation-shadow-8-dp: 0 5px 5px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.06), 0 3px 14px rgba(0, 0, 0, 0.06);
  --nj-semantic-elevation-shadow-16-dp: 0 8px 10px rgba(0, 0, 0, 0.1), 0 16px 24px rgba(0, 0, 0, 0.06), 0 6px 30px rgba(0, 0, 0, 0.06);
  --nj-semantic-elevation-shadow-24-dp: 0 11px 15px rgba(0, 0, 0, 0.1), 0 24px 38px rgba(0, 0, 0, 0.06), 0 9px 46px rgba(0, 0, 0, 0.06);
  --nj-semantic-font-family-sans-serif: "Lato", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --nj-semantic-font-family-monospace: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
  --nj-semantic-font-weight-light: 300;
  --nj-semantic-font-weight-normal: 400;
  --nj-semantic-font-weight-bold: 700;
  --nj-semantic-font-weight-black: 900;
  --nj-semantic-font-line-height-sans-serif: 1.5;
  --nj-semantic-motion-easing-fast-out-slow-in: cubic-bezier(.4, 0, .2, 1);
  --nj-semantic-motion-easing-linear-out-slow-in: cubic-bezier(0, 0, .2, 1);
  --nj-semantic-motion-easing-fast-out-linear-in: cubic-bezier(.4, 0, 1, 1);
  --nj-core-color-grey-0: #ffffff;
  --nj-core-color-grey-100: #f6f8f9;
  --nj-core-color-grey-200: #ebeef1;
  --nj-core-color-grey-300: #ccd4da;
  --nj-core-color-grey-400: #9eadb8;
  --nj-core-color-grey-500: #778c9b;
  --nj-core-color-grey-600: #60798b;
  --nj-core-color-grey-700: #435c6e;
  --nj-core-color-grey-800: #334551;
  --nj-core-color-grey-900: #232d35;
  --nj-core-color-grey-1000: #171d21;
  --nj-core-color-grey-alpha-0: rgba(0, 0, 0, 0);
  --nj-core-color-grey-alpha-100: rgba(30, 80, 105, 0.04);
  --nj-core-color-grey-alpha-200: rgba(5, 43, 80, 0.08);
  --nj-core-color-grey-alpha-300: rgba(0, 40, 70, 0.2);
  --nj-core-color-grey-alpha-400: rgba(6, 45, 73, 0.39);
  --nj-core-color-grey-alpha-500: rgba(3, 42, 70, 0.54);
  --nj-core-color-grey-alpha-inverse-0: rgba(0, 0, 0, 0);
  --nj-core-color-grey-alpha-inverse-100: rgba(188, 225, 229, 0.03);
  --nj-core-color-grey-alpha-inverse-200: rgba(164, 211, 229, 0.07);
  --nj-core-color-grey-alpha-inverse-300: rgba(168, 213, 247, 0.17);
  --nj-core-color-grey-alpha-inverse-400: rgba(166, 222, 255, 0.31);
  --nj-core-color-grey-alpha-inverse-500: rgba(179, 221, 251, 0.45);
  --nj-core-color-pink-100: #fff4f9;
  --nj-core-color-pink-200: #ffe9f3;
  --nj-core-color-pink-300: #ffc1df;
  --nj-core-color-pink-400: #ff80bd;
  --nj-core-color-pink-500: #fb3492;
  --nj-core-color-pink-600: #e01b78;
  --nj-core-color-pink-700: #963563;
  --nj-core-color-pink-800: #5c3749;
  --nj-core-color-pink-900: #34282e;
  --nj-core-color-red-100: #fff7f5;
  --nj-core-color-red-200: #ffeae5;
  --nj-core-color-red-300: #ffc5b9;
  --nj-core-color-red-400: #ff8979;
  --nj-core-color-red-500: #f34e46;
  --nj-core-color-red-600: #db3735;
  --nj-core-color-red-700: #aa2424;
  --nj-core-color-red-800: #7f1d1b;
  --nj-core-color-red-900: #521814;
  --nj-core-color-red-alpha-0: rgba(0, 0, 0, 0);
  --nj-core-color-red-alpha-100: rgba(255, 55, 5, 0.04);
  --nj-core-color-red-alpha-200: rgba(255, 64, 19, 0.11);
  --nj-core-color-red-alpha-300: rgba(255, 48, 5, 0.28);
  --nj-core-color-red-alpha-400: rgba(255, 32, 2, 0.53);
  --nj-core-color-orange-100: #fff5ed;
  --nj-core-color-orange-200: #ffeada;
  --nj-core-color-orange-300: #ffc89d;
  --nj-core-color-orange-400: #ff8c47;
  --nj-core-color-orange-500: #d96929;
  --nj-core-color-orange-600: #bc5921;
  --nj-core-color-orange-700: #8e441a;
  --nj-core-color-orange-800: #693315;
  --nj-core-color-orange-900: #442312;
  --nj-core-color-orange-alpha-0: rgba(0, 0, 0, 0);
  --nj-core-color-orange-alpha-100: rgba(255, 130, 30, 0.08);
  --nj-core-color-orange-alpha-200: rgba(255, 115, 8, 0.15);
  --nj-core-color-orange-alpha-300: rgba(255, 114, 4, 0.39);
  --nj-core-color-orange-alpha-400: rgba(255, 97, 3, 0.73);
  --nj-core-color-yellow-100: #fff7e0;
  --nj-core-color-yellow-200: #ffeeb4;
  --nj-core-color-yellow-300: #ffcc59;
  --nj-core-color-yellow-400: #d5a334;
  --nj-core-color-yellow-500: #ab8327;
  --nj-core-color-yellow-600: #947023;
  --nj-core-color-yellow-700: #6f551d;
  --nj-core-color-yellow-800: #533f18;
  --nj-core-color-yellow-900: #362a13;
  --nj-core-color-green-100: #f3faf4;
  --nj-core-color-green-200: #e2f3e3;
  --nj-core-color-green-300: #aedfb3;
  --nj-core-color-green-400: #63be74;
  --nj-core-color-green-500: #199d47;
  --nj-core-color-green-600: #008836;
  --nj-core-color-green-700: #006725;
  --nj-core-color-green-800: #004d1c;
  --nj-core-color-green-900: #0a3315;
  --nj-core-color-green-alpha-0: rgba(0, 0, 0, 0);
  --nj-core-color-green-alpha-100: rgba(35, 155, 35, 0.05);
  --nj-core-color-green-alpha-200: rgba(13, 155, 22, 0.12);
  --nj-core-color-green-alpha-300: rgba(2, 155, 18, 0.32);
  --nj-core-color-green-alpha-400: rgba(3, 150, 31, 0.62);
  --nj-core-color-blue-100: #f6f8fd;
  --nj-core-color-blue-200: #e7eefc;
  --nj-core-color-blue-300: #c0d4f9;
  --nj-core-color-blue-400: #7fadef;
  --nj-core-color-blue-500: #3c8cde;
  --nj-core-color-blue-600: #007acd;
  --nj-core-color-blue-700: #005aa0;
  --nj-core-color-blue-800: #004478;
  --nj-core-color-blue-900: #0b2d4e;
  --nj-core-color-blue-alpha-0: rgba(0, 0, 0, 0);
  --nj-core-color-blue-alpha-100: rgba(30, 80, 205, 0.04);
  --nj-core-color-blue-alpha-200: rgba(15, 85, 225, 0.1);
  --nj-core-color-blue-alpha-300: rgba(3, 83, 231, 0.25);
  --nj-core-color-blue-alpha-400: rgba(4, 94, 224, 0.51);
  --nj-core-color-ultramarine-100: #f6f7fb;
  --nj-core-color-ultramarine-200: #eceef7;
  --nj-core-color-ultramarine-300: #ccd1e9;
  --nj-core-color-ultramarine-400: #9fa9d4;
  --nj-core-color-ultramarine-500: #7986bf;
  --nj-core-color-ultramarine-600: #6372b2;
  --nj-core-color-ultramarine-700: #44549b;
  --nj-core-color-ultramarine-800: #2b3d83;
  --nj-core-color-ultramarine-900: #182663;
  --nj-core-color-purple-100: #faf7fc;
  --nj-core-color-purple-200: #f2ecf7;
  --nj-core-color-purple-300: #deccec;
  --nj-core-color-purple-400: #bf9ed9;
  --nj-core-color-purple-500: #a377c5;
  --nj-core-color-purple-600: #9261b7;
  --nj-core-color-purple-700: #744299;
  --nj-core-color-purple-800: #533669;
  --nj-core-color-purple-900: #312838;
  --nj-core-color-purple-alpha-0: rgba(0, 0, 0, 0);
  --nj-core-color-purple-alpha-100: rgba(130, 55, 180, 0.04);
  --nj-core-color-purple-alpha-200: rgba(93, 18, 155, 0.08);
  --nj-core-color-purple-alpha-300: rgba(90, 0, 160, 0.2);
  --nj-core-color-purple-alpha-400: rgba(91, 6, 158, 0.39);
  --nj-core-color-teal-100: #f1fafa;
  --nj-core-color-teal-200: #daf4f3;
  --nj-core-color-teal-300: #95dfdd;
  --nj-core-color-teal-400: #3dbcb8;
  --nj-core-color-teal-500: #0a9994;
  --nj-core-color-teal-600: #008480;
  --nj-core-color-teal-700: #0a6361;
  --nj-core-color-teal-800: #154948;
  --nj-core-color-teal-900: #192f2f;
  --nj-core-color-teal-alpha-0: rgba(0, 0, 0, 0);
  --nj-core-color-teal-alpha-100: rgba(22, 172, 172, 0.06);
  --nj-core-color-teal-alpha-200: rgba(8, 182, 175, 0.15);
  --nj-core-color-teal-alpha-300: rgba(3, 179, 174, 0.42);
  --nj-core-color-teal-alpha-400: rgba(3, 168, 163, 0.77);
  --nj-core-color-lime-100: #f8fad5;
  --nj-core-color-lime-200: #eef5a8;
  --nj-core-color-lime-300: #c7de43;
  --nj-core-color-lime-400: #9db603;
  --nj-core-color-lime-500: #7d9200;
  --nj-core-color-lime-600: #6c7d02;
  --nj-core-color-lime-700: #525f0a;
  --nj-core-color-lime-800: #3e460e;
  --nj-core-color-lime-900: #2a2e0e;
  --nj-core-color-engie-blue: #00aaff;
  --nj-core-color-engie-green: #23d2b5;
  --nj-core-elevation-z-index-0: 0;
  --nj-core-elevation-z-index-1: 1000;
  --nj-core-elevation-z-index-10: 1010;
  --nj-core-elevation-z-index-20: 1020;
  --nj-core-elevation-z-index-30: 1030;
  --nj-core-elevation-z-index-40: 1040;
  --nj-core-elevation-z-index-50: 1050;
  --nj-core-elevation-z-index-60: 1060;
  --nj-core-elevation-z-index-70: 1070;
  --nj-core-elevation-z-index-80: 1080;
  --nj-core-elevation-z-index-90: 1090;
  --nj-core-elevation-z-index-100: 1100;
  --nj-core-elevation-z-index-110: 1110;
  --nj-core-elevation-z-index-120: 1120;
  --nj-core-elevation-z-index-130: 1130;
  --nj-core-elevation-z-index-140: 1140;
  --nj-core-elevation-z-index-150: 1150;
  --nj-core-elevation-z-index-160: 1160;
  --nj-core-elevation-z-index-170: 1170;
  --nj-core-elevation-z-index-180: 1180;
  --nj-core-elevation-z-index-190: 1190;
  --nj-core-elevation-z-index-200: 1200;
  --nj-core-elevation-z-index-210: 1210;
  --nj-core-elevation-z-index-220: 1220;
  --nj-core-elevation-z-index-230: 1230;
  --nj-core-elevation-z-index-240: 1240;
  --nj-core-elevation-z-index-250: 1250;
  --nj-core-elevation-z-index-260: 1260;
  --nj-core-elevation-z-index-270: 1270;
  --nj-core-elevation-z-index-280: 1280;
  --nj-core-elevation-z-index-290: 1290;
  --nj-core-elevation-z-index-300: 1300;
  --nj-core-elevation-z-index-310: 1310;
  --nj-core-elevation-z-index-320: 1320;
  --nj-core-elevation-z-index-330: 1330;
  --nj-core-elevation-z-index-340: 1340;
  --nj-core-elevation-z-index-350: 1350;
  --nj-core-elevation-z-index-360: 1360;
  --nj-core-elevation-z-index-370: 1370;
  --nj-core-elevation-z-index-380: 1380;
  --nj-core-elevation-z-index-390: 1390;
  --nj-core-elevation-z-index-400: 1400;
  --nj-core-elevation-z-index-410: 1410;
  --nj-core-elevation-z-index-420: 1420;
  --nj-core-elevation-z-index-430: 1430;
  --nj-core-elevation-z-index-440: 1440;
  --nj-core-elevation-z-index-450: 1450;
  --nj-core-elevation-z-index-460: 1460;
  --nj-core-elevation-z-index-470: 1470;
  --nj-core-elevation-z-index-480: 1480;
  --nj-core-elevation-z-index-490: 1490;
  --nj-core-elevation-z-index-500: 1500;
  --nj-core-opacity-50: 0.05;
  --nj-core-opacity-100: 0.10;
  --nj-core-opacity-150: 0.15;
  --nj-core-opacity-200: 0.20;
  --nj-core-opacity-250: 0.25;
  --nj-core-opacity-300: 0.30;
  --nj-core-opacity-350: 0.35;
  --nj-core-opacity-400: 0.40;
  --nj-core-opacity-450: 0.45;
  --nj-core-opacity-500: 0.50;
  --nj-core-opacity-550: 0.55;
  --nj-core-opacity-600: 0.60;
  --nj-core-opacity-650: 0.65;
  --nj-core-opacity-700: 0.70;
  --nj-core-opacity-750: 0.75;
  --nj-core-opacity-800: 0.80;
  --nj-core-opacity-850: 0.85;
  --nj-core-opacity-900: 0.90;
  --nj-core-opacity-950: 0.95;
  --nj-core-opacity-1000: 1.00;
  --nj-core-size-0: 0rem;
  --nj-core-size-1: 0.0625rem;
  --nj-core-size-2: 0.125rem;
  --nj-core-size-4: 0.25rem;
  --nj-core-size-6: 0.375rem;
  --nj-core-size-8: 0.5rem;
  --nj-core-size-10: 0.625rem;
  --nj-core-size-12: 0.75rem;
  --nj-core-size-14: 0.875rem;
  --nj-core-size-16: 1rem;
  --nj-core-size-18: 1.125rem;
  --nj-core-size-20: 1.25rem;
  --nj-core-size-22: 1.375rem;
  --nj-core-size-24: 1.5rem;
  --nj-core-size-28: 1.75rem;
  --nj-core-size-30: 1.875rem;
  --nj-core-size-32: 2rem;
  --nj-core-size-34: 2.125rem;
  --nj-core-size-36: 2.25rem;
  --nj-core-size-38: 2.375rem;
  --nj-core-size-40: 2.5rem;
  --nj-core-size-42: 2.625rem;
  --nj-core-size-44: 2.75rem;
  --nj-core-size-46: 2.875rem;
  --nj-core-size-48: 3rem;
  --nj-core-size-50: 3.125rem;
  --nj-core-size-52: 3.25rem;
  --nj-core-size-54: 3.375rem;
  --nj-core-size-56: 3.5rem;
  --nj-core-size-58: 3.625rem;
  --nj-core-size-64: 4rem;
  --nj-core-size-76: 4.75rem;
  --nj-core-size-80: 5rem;
  --nj-core-size-96: 6rem;
  --nj-core-size-112: 7rem;
  --nj-core-size-116: 7.25rem;
  --nj-core-size-128: 8rem;
  --nj-core-size-9999: 9999rem;
  --nj-semantic-color-background-accent-pink-secondary-default: var(--nj-core-color-pink-100); /* Subtle touch of pink with no meaning tied to the color. */
  --nj-semantic-color-background-accent-pink-secondary-hovered: var(--nj-core-color-pink-200);
  --nj-semantic-color-background-accent-pink-secondary-focused: var(--nj-core-color-pink-200);
  --nj-semantic-color-background-accent-pink-secondary-pressed: var(--nj-core-color-pink-300);
  --nj-semantic-color-background-accent-pink-tertiary-default: var(--nj-core-color-pink-200); /* Soft pink background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */
  --nj-semantic-color-background-accent-pink-tertiary-hovered: var(--nj-core-color-pink-300);
  --nj-semantic-color-background-accent-pink-tertiary-focused: var(--nj-core-color-pink-300);
  --nj-semantic-color-background-accent-pink-tertiary-pressed: var(--nj-core-color-pink-400);
  --nj-semantic-color-background-accent-pink-solid-default: var(--nj-core-color-pink-600); /* Suitable for pink backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */
  --nj-semantic-color-background-accent-pink-solid-hovered: var(--nj-core-color-pink-700);
  --nj-semantic-color-background-accent-pink-solid-focused: var(--nj-core-color-pink-700);
  --nj-semantic-color-background-accent-pink-solid-pressed: var(--nj-core-color-pink-800);
  --nj-semantic-color-background-accent-pink-spotlight-default: var(--nj-core-color-pink-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */
  --nj-semantic-color-background-accent-red-secondary-default: var(--nj-core-color-red-100); /* Subtle touch of red with no meaning tied to the color. */
  --nj-semantic-color-background-accent-red-secondary-hovered: var(--nj-core-color-red-200);
  --nj-semantic-color-background-accent-red-secondary-focused: var(--nj-core-color-red-200);
  --nj-semantic-color-background-accent-red-secondary-pressed: var(--nj-core-color-red-300);
  --nj-semantic-color-background-accent-red-tertiary-default: var(--nj-core-color-red-200); /* Soft red background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */
  --nj-semantic-color-background-accent-red-tertiary-hovered: var(--nj-core-color-red-300);
  --nj-semantic-color-background-accent-red-tertiary-focused: var(--nj-core-color-red-300);
  --nj-semantic-color-background-accent-red-tertiary-pressed: var(--nj-core-color-red-400);
  --nj-semantic-color-background-accent-red-solid-default: var(--nj-core-color-red-600); /* Suitable for red backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */
  --nj-semantic-color-background-accent-red-spotlight-default: var(--nj-core-color-red-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */
  --nj-semantic-color-background-accent-orange-secondary-default: var(--nj-core-color-orange-100); /* Subtle touch of orange with no meaning tied to the color. */
  --nj-semantic-color-background-accent-orange-secondary-hovered: var(--nj-core-color-orange-200);
  --nj-semantic-color-background-accent-orange-secondary-focused: var(--nj-core-color-orange-200);
  --nj-semantic-color-background-accent-orange-secondary-pressed: var(--nj-core-color-orange-300);
  --nj-semantic-color-background-accent-orange-tertiary-default: var(--nj-core-color-orange-200); /* Soft orange background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */
  --nj-semantic-color-background-accent-orange-tertiary-hovered: var(--nj-core-color-orange-300);
  --nj-semantic-color-background-accent-orange-tertiary-focused: var(--nj-core-color-orange-300);
  --nj-semantic-color-background-accent-orange-tertiary-pressed: var(--nj-core-color-orange-400);
  --nj-semantic-color-background-accent-orange-solid-default: var(--nj-core-color-orange-600); /* Suitable for orange backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */
  --nj-semantic-color-background-accent-orange-solid-hovered: var(--nj-core-color-orange-700);
  --nj-semantic-color-background-accent-orange-solid-focused: var(--nj-core-color-orange-700);
  --nj-semantic-color-background-accent-orange-solid-pressed: var(--nj-core-color-orange-800);
  --nj-semantic-color-background-accent-orange-spotlight-default: var(--nj-core-color-orange-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */
  --nj-semantic-color-background-accent-yellow-secondary-default: var(--nj-core-color-yellow-100); /* Subtle touch of yellow with no meaning tied to the color. */
  --nj-semantic-color-background-accent-yellow-secondary-hovered: var(--nj-core-color-yellow-200);
  --nj-semantic-color-background-accent-yellow-secondary-focused: var(--nj-core-color-yellow-200);
  --nj-semantic-color-background-accent-yellow-secondary-pressed: var(--nj-core-color-yellow-300);
  --nj-semantic-color-background-accent-yellow-tertiary-default: var(--nj-core-color-yellow-200); /* Soft yellow background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */
  --nj-semantic-color-background-accent-yellow-tertiary-hovered: var(--nj-core-color-yellow-300);
  --nj-semantic-color-background-accent-yellow-tertiary-focused: var(--nj-core-color-yellow-300);
  --nj-semantic-color-background-accent-yellow-tertiary-pressed: var(--nj-core-color-yellow-400);
  --nj-semantic-color-background-accent-yellow-solid-default: var(--nj-core-color-yellow-300); /* Suitable for yellow backgrounds when there is no meaning tied to the color. No minimum contrast requirement met! */
  --nj-semantic-color-background-accent-yellow-solid-hovered: var(--nj-core-color-yellow-400);
  --nj-semantic-color-background-accent-yellow-solid-focused: var(--nj-core-color-yellow-400);
  --nj-semantic-color-background-accent-yellow-solid-pressed: var(--nj-core-color-yellow-500);
  --nj-semantic-color-background-accent-yellow-spotlight-default: var(--nj-core-color-yellow-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */
  --nj-semantic-color-background-accent-green-secondary-default: var(--nj-core-color-green-100); /* Subtle touch of green with no meaning tied to the color. */
  --nj-semantic-color-background-accent-green-secondary-hovered: var(--nj-core-color-green-200);
  --nj-semantic-color-background-accent-green-secondary-focused: var(--nj-core-color-green-200);
  --nj-semantic-color-background-accent-green-secondary-pressed: var(--nj-core-color-green-300);
  --nj-semantic-color-background-accent-green-tertiary-default: var(--nj-core-color-green-200); /* Soft green background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */
  --nj-semantic-color-background-accent-green-tertiary-hovered: var(--nj-core-color-green-300);
  --nj-semantic-color-background-accent-green-tertiary-focused: var(--nj-core-color-green-300);
  --nj-semantic-color-background-accent-green-tertiary-pressed: var(--nj-core-color-green-400);
  --nj-semantic-color-background-accent-green-solid-default: var(--nj-core-color-green-600); /* Suitable for green backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */
  --nj-semantic-color-background-accent-green-solid-hovered: var(--nj-core-color-green-700);
  --nj-semantic-color-background-accent-green-solid-focused: var(--nj-core-color-green-700);
  --nj-semantic-color-background-accent-green-solid-pressed: var(--nj-core-color-green-800);
  --nj-semantic-color-background-accent-green-spotlight-default: var(--nj-core-color-green-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */
  --nj-semantic-color-background-accent-grey-secondary-default: var(--nj-core-color-grey-100); /* Subtle touch of grey with no meaning tied to the color. */
  --nj-semantic-color-background-accent-grey-secondary-hovered: var(--nj-core-color-grey-200);
  --nj-semantic-color-background-accent-grey-secondary-focused: var(--nj-core-color-grey-200);
  --nj-semantic-color-background-accent-grey-secondary-pressed: var(--nj-core-color-grey-300);
  --nj-semantic-color-background-accent-grey-tertiary-default: var(--nj-core-color-grey-200); /* Soft grey background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */
  --nj-semantic-color-background-accent-grey-tertiary-hovered: var(--nj-core-color-grey-300);
  --nj-semantic-color-background-accent-grey-tertiary-focused: var(--nj-core-color-grey-300);
  --nj-semantic-color-background-accent-grey-tertiary-pressed: var(--nj-core-color-grey-400);
  --nj-semantic-color-background-accent-grey-solid-default: var(--nj-core-color-grey-600); /* Suitable for grey backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */
  --nj-semantic-color-background-accent-grey-solid-hovered: var(--nj-core-color-grey-700);
  --nj-semantic-color-background-accent-grey-solid-focused: var(--nj-core-color-grey-700);
  --nj-semantic-color-background-accent-grey-solid-pressed: var(--nj-core-color-grey-800);
  --nj-semantic-color-background-accent-grey-spotlight-default: var(--nj-core-color-grey-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */
  --nj-semantic-color-background-accent-blue-secondary-default: var(--nj-core-color-blue-100); /* Subtle touch of blue with no meaning tied to the color. */
  --nj-semantic-color-background-accent-blue-secondary-hovered: var(--nj-core-color-blue-200);
  --nj-semantic-color-background-accent-blue-secondary-focused: var(--nj-core-color-blue-200);
  --nj-semantic-color-background-accent-blue-secondary-pressed: var(--nj-core-color-blue-300);
  --nj-semantic-color-background-accent-blue-tertiary-default: var(--nj-core-color-blue-200); /* Soft blue background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */
  --nj-semantic-color-background-accent-blue-tertiary-hovered: var(--nj-core-color-blue-300);
  --nj-semantic-color-background-accent-blue-tertiary-focused: var(--nj-core-color-blue-300);
  --nj-semantic-color-background-accent-blue-tertiary-pressed: var(--nj-core-color-blue-400);
  --nj-semantic-color-background-accent-blue-solid-default: var(--nj-core-color-blue-600); /* Suitable for blue backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */
  --nj-semantic-color-background-accent-blue-solid-hovered: var(--nj-core-color-blue-700);
  --nj-semantic-color-background-accent-blue-solid-focused: var(--nj-core-color-blue-700);
  --nj-semantic-color-background-accent-blue-solid-pressed: var(--nj-core-color-blue-800);
  --nj-semantic-color-background-accent-blue-spotlight-default: var(--nj-core-color-blue-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */
  --nj-semantic-color-background-accent-ultramarine-secondary-default: var(--nj-core-color-ultramarine-100); /* Subtle touch of ultramarine with no meaning tied to the color. */
  --nj-semantic-color-background-accent-ultramarine-secondary-hovered: var(--nj-core-color-ultramarine-200);
  --nj-semantic-color-background-accent-ultramarine-secondary-focused: var(--nj-core-color-ultramarine-200);
  --nj-semantic-color-background-accent-ultramarine-secondary-pressed: var(--nj-core-color-ultramarine-300);
  --nj-semantic-color-background-accent-ultramarine-tertiary-default: var(--nj-core-color-ultramarine-200); /* Soft ultramarine background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */
  --nj-semantic-color-background-accent-ultramarine-tertiary-hovered: var(--nj-core-color-ultramarine-300);
  --nj-semantic-color-background-accent-ultramarine-tertiary-focused: var(--nj-core-color-ultramarine-300);
  --nj-semantic-color-background-accent-ultramarine-tertiary-pressed: var(--nj-core-color-ultramarine-400);
  --nj-semantic-color-background-accent-ultramarine-solid-default: var(--nj-core-color-ultramarine-600); /* Suitable for ultramarine backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */
  --nj-semantic-color-background-accent-ultramarine-solid-hovered: var(--nj-core-color-ultramarine-700);
  --nj-semantic-color-background-accent-ultramarine-solid-focused: var(--nj-core-color-ultramarine-700);
  --nj-semantic-color-background-accent-ultramarine-solid-pressed: var(--nj-core-color-ultramarine-800);
  --nj-semantic-color-background-accent-ultramarine-spotlight-default: var(--nj-core-color-ultramarine-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */
  --nj-semantic-color-background-accent-purple-secondary-default: var(--nj-core-color-purple-100); /* Subtle touch of purple with no meaning tied to the color. */
  --nj-semantic-color-background-accent-purple-secondary-hovered: var(--nj-core-color-purple-200);
  --nj-semantic-color-background-accent-purple-secondary-focused: var(--nj-core-color-purple-200);
  --nj-semantic-color-background-accent-purple-secondary-pressed: var(--nj-core-color-purple-300);
  --nj-semantic-color-background-accent-purple-tertiary-default: var(--nj-core-color-purple-200); /* Soft purple background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */
  --nj-semantic-color-background-accent-purple-tertiary-hovered: var(--nj-core-color-purple-300);
  --nj-semantic-color-background-accent-purple-tertiary-focused: var(--nj-core-color-purple-300);
  --nj-semantic-color-background-accent-purple-tertiary-pressed: var(--nj-core-color-purple-400);
  --nj-semantic-color-background-accent-purple-solid-default: var(--nj-core-color-purple-600); /* Suitable for purple backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */
  --nj-semantic-color-background-accent-purple-solid-hovered: var(--nj-core-color-purple-700);
  --nj-semantic-color-background-accent-purple-solid-focused: var(--nj-core-color-purple-700);
  --nj-semantic-color-background-accent-purple-solid-pressed: var(--nj-core-color-purple-800);
  --nj-semantic-color-background-accent-purple-spotlight-default: var(--nj-core-color-purple-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */
  --nj-semantic-color-background-accent-teal-secondary-default: var(--nj-core-color-teal-100); /* Subtle touch of teal with no meaning tied to the color. */
  --nj-semantic-color-background-accent-teal-secondary-hovered: var(--nj-core-color-teal-200);
  --nj-semantic-color-background-accent-teal-secondary-focused: var(--nj-core-color-teal-200);
  --nj-semantic-color-background-accent-teal-secondary-pressed: var(--nj-core-color-teal-300);
  --nj-semantic-color-background-accent-teal-tertiary-default: var(--nj-core-color-teal-200); /* Soft teal background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */
  --nj-semantic-color-background-accent-teal-tertiary-hovered: var(--nj-core-color-teal-300);
  --nj-semantic-color-background-accent-teal-tertiary-focused: var(--nj-core-color-teal-300);
  --nj-semantic-color-background-accent-teal-tertiary-pressed: var(--nj-core-color-teal-400);
  --nj-semantic-color-background-accent-teal-solid-default: var(--nj-core-color-teal-600); /* Suitable for teal backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */
  --nj-semantic-color-background-accent-teal-solid-hovered: var(--nj-core-color-teal-700);
  --nj-semantic-color-background-accent-teal-solid-focused: var(--nj-core-color-teal-700);
  --nj-semantic-color-background-accent-teal-solid-pressed: var(--nj-core-color-teal-800);
  --nj-semantic-color-background-accent-teal-spotlight-default: var(--nj-core-color-teal-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */
  --nj-semantic-color-background-accent-lime-secondary-default: var(--nj-core-color-lime-100); /* Subtle touch of lime with no meaning tied to the color. */
  --nj-semantic-color-background-accent-lime-secondary-hovered: var(--nj-core-color-lime-200);
  --nj-semantic-color-background-accent-lime-secondary-focused: var(--nj-core-color-lime-200);
  --nj-semantic-color-background-accent-lime-secondary-pressed: var(--nj-core-color-lime-300);
  --nj-semantic-color-background-accent-lime-tertiary-default: var(--nj-core-color-lime-200); /* Soft lime background with no meaning tied to the color, slightly stronger visual contrast than the secondary. */
  --nj-semantic-color-background-accent-lime-tertiary-hovered: var(--nj-core-color-lime-300);
  --nj-semantic-color-background-accent-lime-tertiary-focused: var(--nj-core-color-lime-300);
  --nj-semantic-color-background-accent-lime-tertiary-pressed: var(--nj-core-color-lime-400);
  --nj-semantic-color-background-accent-lime-solid-default: var(--nj-core-color-lime-600); /* Suitable for lime backgrounds when there is no meaning tied to the color. Ensures the minimum contrast requirements (at least 4.55:1). */
  --nj-semantic-color-background-accent-lime-solid-hovered: var(--nj-core-color-lime-700);
  --nj-semantic-color-background-accent-lime-solid-focused: var(--nj-core-color-lime-700);
  --nj-semantic-color-background-accent-lime-solid-pressed: var(--nj-core-color-lime-800);
  --nj-semantic-color-background-accent-lime-spotlight-default: var(--nj-core-color-lime-900); /* Reserved for highlighting and drawing maximum attention when there is no meaning tied to the color. Use sparingly to create important focal points in your interface */
  --nj-semantic-color-background-additional-engie-ray-default: linear-gradient(90deg, var(--nj-core-color-engie-blue) 0%, var(--nj-core-color-engie-green) 100%); /* ENGIE's brand gradient. We strongly advise to refer to the brand guidelines for its usage. */
  --nj-semantic-color-background-additional-signature-default: var(--nj-core-color-ultramarine-900); /* ENGIE's additional brand color. We strongly advise to refer to the brand guidelines for its usage. */
  --nj-semantic-color-border-accent-pink-subtle-default: var(--nj-core-color-pink-300);
  --nj-semantic-color-border-accent-pink-subtle-hovered: var(--nj-core-color-pink-400);
  --nj-semantic-color-border-accent-pink-subtle-focused: var(--nj-core-color-pink-400);
  --nj-semantic-color-border-accent-pink-subtle-pressed: var(--nj-core-color-pink-500);
  --nj-semantic-color-border-accent-pink-subtle-selected: var(--nj-core-color-pink-500);
  --nj-semantic-color-border-accent-pink-moderate-default: var(--nj-core-color-pink-400); /* Suitable for pink borders when there is no meaning tied to the color. */
  --nj-semantic-color-border-accent-pink-moderate-hovered: var(--nj-core-color-pink-500);
  --nj-semantic-color-border-accent-pink-moderate-focused: var(--nj-core-color-pink-500);
  --nj-semantic-color-border-accent-pink-moderate-pressed: var(--nj-core-color-pink-600);
  --nj-semantic-color-border-accent-pink-moderate-selected: var(--nj-core-color-pink-600);
  --nj-semantic-color-border-accent-pink-strong-default: var(--nj-core-color-pink-600);
  --nj-semantic-color-border-accent-pink-strong-hovered: var(--nj-core-color-pink-700);
  --nj-semantic-color-border-accent-pink-strong-focused: var(--nj-core-color-pink-700);
  --nj-semantic-color-border-accent-pink-strong-pressed: var(--nj-core-color-pink-800);
  --nj-semantic-color-border-accent-pink-strong-selected: var(--nj-core-color-pink-800);
  --nj-semantic-color-border-accent-red-subtle-default: var(--nj-core-color-red-300);
  --nj-semantic-color-border-accent-red-subtle-hovered: var(--nj-core-color-red-400);
  --nj-semantic-color-border-accent-red-subtle-focused: var(--nj-core-color-red-400);
  --nj-semantic-color-border-accent-red-subtle-pressed: var(--nj-core-color-red-500);
  --nj-semantic-color-border-accent-red-subtle-selected: var(--nj-core-color-red-500);
  --nj-semantic-color-border-accent-red-moderate-default: var(--nj-core-color-red-400); /* Suitable for red borders when there is no meaning tied to the color. */
  --nj-semantic-color-border-accent-red-moderate-hovered: var(--nj-core-color-red-500);
  --nj-semantic-color-border-accent-red-moderate-focused: var(--nj-core-color-red-500);
  --nj-semantic-color-border-accent-red-moderate-pressed: var(--nj-core-color-red-600);
  --nj-semantic-color-border-accent-red-moderate-selected: var(--nj-core-color-red-600);
  --nj-semantic-color-border-accent-red-strong-default: var(--nj-core-color-red-600);
  --nj-semantic-color-border-accent-red-strong-hovered: var(--nj-core-color-red-700);
  --nj-semantic-color-border-accent-red-strong-focused: var(--nj-core-color-red-700);
  --nj-semantic-color-border-accent-red-strong-pressed: var(--nj-core-color-red-800);
  --nj-semantic-color-border-accent-red-strong-selected: var(--nj-core-color-red-800);
  --nj-semantic-color-border-accent-orange-subtle-default: var(--nj-core-color-orange-300);
  --nj-semantic-color-border-accent-orange-subtle-hovered: var(--nj-core-color-orange-400);
  --nj-semantic-color-border-accent-orange-subtle-focused: var(--nj-core-color-orange-400);
  --nj-semantic-color-border-accent-orange-subtle-pressed: var(--nj-core-color-orange-500);
  --nj-semantic-color-border-accent-orange-subtle-selected: var(--nj-core-color-orange-500);
  --nj-semantic-color-border-accent-orange-moderate-default: var(--nj-core-color-orange-400); /* Suitable for orange borders when there is no meaning tied to the color. */
  --nj-semantic-color-border-accent-orange-moderate-hovered: var(--nj-core-color-orange-500);
  --nj-semantic-color-border-accent-orange-moderate-focused: var(--nj-core-color-orange-500);
  --nj-semantic-color-border-accent-orange-moderate-pressed: var(--nj-core-color-orange-600);
  --nj-semantic-color-border-accent-orange-moderate-selected: var(--nj-core-color-orange-600);
  --nj-semantic-color-border-accent-orange-strong-default: var(--nj-core-color-orange-600);
  --nj-semantic-color-border-accent-orange-strong-hovered: var(--nj-core-color-orange-700);
  --nj-semantic-color-border-accent-orange-strong-focused: var(--nj-core-color-orange-700);
  --nj-semantic-color-border-accent-orange-strong-pressed: var(--nj-core-color-orange-800);
  --nj-semantic-color-border-accent-orange-strong-selected: var(--nj-core-color-orange-800);
  --nj-semantic-color-border-accent-yellow-subtle-default: var(--nj-core-color-yellow-300);
  --nj-semantic-color-border-accent-yellow-subtle-hovered: var(--nj-core-color-yellow-400);
  --nj-semantic-color-border-accent-yellow-subtle-focused: var(--nj-core-color-yellow-400);
  --nj-semantic-color-border-accent-yellow-subtle-pressed: var(--nj-core-color-yellow-500);
  --nj-semantic-color-border-accent-yellow-subtle-selected: var(--nj-core-color-yellow-500);
  --nj-semantic-color-border-accent-yellow-moderate-default: var(--nj-core-color-yellow-400); /* Suitable for yellow borders when there is no meaning tied to the color. */
  --nj-semantic-color-border-accent-yellow-moderate-hovered: var(--nj-core-color-yellow-500);
  --nj-semantic-color-border-accent-yellow-moderate-focused: var(--nj-core-color-yellow-500);
  --nj-semantic-color-border-accent-yellow-moderate-pressed: var(--nj-core-color-yellow-600);
  --nj-semantic-color-border-accent-yellow-moderate-selected: var(--nj-core-color-yellow-600);
  --nj-semantic-color-border-accent-yellow-strong-default: var(--nj-core-color-yellow-600);
  --nj-semantic-color-border-accent-yellow-strong-hovered: var(--nj-core-color-yellow-700);
  --nj-semantic-color-border-accent-yellow-strong-focused: var(--nj-core-color-yellow-700);
  --nj-semantic-color-border-accent-yellow-strong-pressed: var(--nj-core-color-yellow-800);
  --nj-semantic-color-border-accent-yellow-strong-selected: var(--nj-core-color-yellow-800);
  --nj-semantic-color-border-accent-green-subtle-default: var(--nj-core-color-green-300);
  --nj-semantic-color-border-accent-green-subtle-hovered: var(--nj-core-color-green-400);
  --nj-semantic-color-border-accent-green-subtle-focused: var(--nj-core-color-green-400);
  --nj-semantic-color-border-accent-green-subtle-pressed: var(--nj-core-color-green-500);
  --nj-semantic-color-border-accent-green-subtle-selected: var(--nj-core-color-green-500);
  --nj-semantic-color-border-accent-green-moderate-default: var(--nj-core-color-green-400); /* Suitable for green borders when there is no meaning tied to the color. */
  --nj-semantic-color-border-accent-green-moderate-hovered: var(--nj-core-color-green-500);
  --nj-semantic-color-border-accent-green-moderate-focused: var(--nj-core-color-green-500);
  --nj-semantic-color-border-accent-green-moderate-pressed: var(--nj-core-color-green-600);
  --nj-semantic-color-border-accent-green-moderate-selected: var(--nj-core-color-green-600);
  --nj-semantic-color-border-accent-green-strong-default: var(--nj-core-color-green-600);
  --nj-semantic-color-border-accent-green-strong-hovered: var(--nj-core-color-green-700);
  --nj-semantic-color-border-accent-green-strong-focused: var(--nj-core-color-green-700);
  --nj-semantic-color-border-accent-green-strong-pressed: var(--nj-core-color-green-800);
  --nj-semantic-color-border-accent-green-strong-selected: var(--nj-core-color-green-800);
  --nj-semantic-color-border-accent-grey-subtle-default: var(--nj-core-color-grey-300);
  --nj-semantic-color-border-accent-grey-subtle-hovered: var(--nj-core-color-grey-400);
  --nj-semantic-color-border-accent-grey-subtle-focused: var(--nj-core-color-grey-400);
  --nj-semantic-color-border-accent-grey-subtle-pressed: var(--nj-core-color-grey-500);
  --nj-semantic-color-border-accent-grey-subtle-selected: var(--nj-core-color-grey-500);
  --nj-semantic-color-border-accent-grey-moderate-default: var(--nj-core-color-grey-400); /* Suitable for grey borders when there is no meaning tied to the color. */
  --nj-semantic-color-border-accent-grey-moderate-hovered: var(--nj-core-color-grey-500);
  --nj-semantic-color-border-accent-grey-moderate-focused: var(--nj-core-color-grey-500);
  --nj-semantic-color-border-accent-grey-moderate-pressed: var(--nj-core-color-grey-600);
  --nj-semantic-color-border-accent-grey-moderate-selected: var(--nj-core-color-grey-600);
  --nj-semantic-color-border-accent-grey-strong-default: var(--nj-core-color-grey-600);
  --nj-semantic-color-border-accent-grey-strong-hovered: var(--nj-core-color-grey-700);
  --nj-semantic-color-border-accent-grey-strong-focused: var(--nj-core-color-grey-700);
  --nj-semantic-color-border-accent-grey-strong-pressed: var(--nj-core-color-grey-800);
  --nj-semantic-color-border-accent-grey-strong-selected: var(--nj-core-color-grey-800);
  --nj-semantic-color-border-accent-blue-subtle-default: var(--nj-core-color-blue-300);
  --nj-semantic-color-border-accent-blue-subtle-hovered: var(--nj-core-color-blue-400);
  --nj-semantic-color-border-accent-blue-subtle-focused: var(--nj-core-color-blue-400);
  --nj-semantic-color-border-accent-blue-subtle-pressed: var(--nj-core-color-blue-500);
  --nj-semantic-color-border-accent-blue-subtle-selected: var(--nj-core-color-blue-500);
  --nj-semantic-color-border-accent-blue-moderate-default: var(--nj-core-color-blue-400); /* Suitable for blue borders when there is no meaning tied to the color. */
  --nj-semantic-color-border-accent-blue-moderate-hovered: var(--nj-core-color-blue-500);
  --nj-semantic-color-border-accent-blue-moderate-focused: var(--nj-core-color-blue-500);
  --nj-semantic-color-border-accent-blue-moderate-pressed: var(--nj-core-color-blue-600);
  --nj-semantic-color-border-accent-blue-moderate-selected: var(--nj-core-color-blue-600);
  --nj-semantic-color-border-accent-blue-strong-default: var(--nj-core-color-blue-600);
  --nj-semantic-color-border-accent-blue-strong-hovered: var(--nj-core-color-blue-700);
  --nj-semantic-color-border-accent-blue-strong-focused: var(--nj-core-color-blue-700);
  --nj-semantic-color-border-accent-blue-strong-pressed: var(--nj-core-color-blue-800);
  --nj-semantic-color-border-accent-blue-strong-selected: var(--nj-core-color-blue-800);
  --nj-semantic-color-border-accent-ultramarine-subtle-default: var(--nj-core-color-ultramarine-300);
  --nj-semantic-color-border-accent-ultramarine-subtle-hovered: var(--nj-core-color-ultramarine-400);
  --nj-semantic-color-border-accent-ultramarine-subtle-focused: var(--nj-core-color-ultramarine-400);
  --nj-semantic-color-border-accent-ultramarine-subtle-pressed: var(--nj-core-color-ultramarine-500);
  --nj-semantic-color-border-accent-ultramarine-subtle-selected: var(--nj-core-color-ultramarine-500);
  --nj-semantic-color-border-accent-ultramarine-moderate-default: var(--nj-core-color-ultramarine-400); /* Suitable for ultramarine borders when there is no meaning tied to the color. */
  --nj-semantic-color-border-accent-ultramarine-moderate-hovered: var(--nj-core-color-ultramarine-500);
  --nj-semantic-color-border-accent-ultramarine-moderate-focused: var(--nj-core-color-ultramarine-500);
  --nj-semantic-color-border-accent-ultramarine-moderate-pressed: var(--nj-core-color-ultramarine-600);
  --nj-semantic-color-border-accent-ultramarine-moderate-selected: var(--nj-core-color-ultramarine-600);
  --nj-semantic-color-border-accent-ultramarine-strong-default: var(--nj-core-color-ultramarine-600);
  --nj-semantic-color-border-accent-ultramarine-strong-hovered: var(--nj-core-color-ultramarine-700);
  --nj-semantic-color-border-accent-ultramarine-strong-focused: var(--nj-core-color-ultramarine-700);
  --nj-semantic-color-border-accent-ultramarine-strong-pressed: var(--nj-core-color-ultramarine-800);
  --nj-semantic-color-border-accent-ultramarine-strong-selected: var(--nj-core-color-ultramarine-800);
  --nj-semantic-color-border-accent-purple-subtle-default: var(--nj-core-color-purple-300);
  --nj-semantic-color-border-accent-purple-subtle-hovered: var(--nj-core-color-purple-400);
  --nj-semantic-color-border-accent-purple-subtle-focused: var(--nj-core-color-purple-400);
  --nj-semantic-color-border-accent-purple-subtle-pressed: var(--nj-core-color-purple-500);
  --nj-semantic-color-border-accent-purple-subtle-selected: var(--nj-core-color-purple-500);
  --nj-semantic-color-border-accent-purple-moderate-default: var(--nj-core-color-purple-400); /* Suitable for purple borders when there is no meaning tied to the color. */
  --nj-semantic-color-border-accent-purple-moderate-hovered: var(--nj-core-color-purple-500);
  --nj-semantic-color-border-accent-purple-moderate-focused: var(--nj-core-color-purple-500);
  --nj-semantic-color-border-accent-purple-moderate-pressed: var(--nj-core-color-purple-600);
  --nj-semantic-color-border-accent-purple-moderate-selected: var(--nj-core-color-purple-600);
  --nj-semantic-color-border-accent-purple-strong-default: var(--nj-core-color-purple-600);
  --nj-semantic-color-border-accent-purple-strong-hovered: var(--nj-core-color-purple-700);
  --nj-semantic-color-border-accent-purple-strong-focused: var(--nj-core-color-purple-700);
  --nj-semantic-color-border-accent-purple-strong-pressed: var(--nj-core-color-purple-800);
  --nj-semantic-color-border-accent-purple-strong-selected: var(--nj-core-color-purple-800);
  --nj-semantic-color-border-accent-teal-subtle-default: var(--nj-core-color-teal-300);
  --nj-semantic-color-border-accent-teal-subtle-hovered: var(--nj-core-color-teal-400);
  --nj-semantic-color-border-accent-teal-subtle-focused: var(--nj-core-color-teal-400);
  --nj-semantic-color-border-accent-teal-subtle-pressed: var(--nj-core-color-teal-500);
  --nj-semantic-color-border-accent-teal-subtle-selected: var(--nj-core-color-teal-500);
  --nj-semantic-color-border-accent-teal-moderate-default: var(--nj-core-color-teal-400); /* Suitable for teal borders when there is no meaning tied to the color. */
  --nj-semantic-color-border-accent-teal-moderate-hovered: var(--nj-core-color-teal-500);
  --nj-semantic-color-border-accent-teal-moderate-focused: var(--nj-core-color-teal-500);
  --nj-semantic-color-border-accent-teal-moderate-pressed: var(--nj-core-color-teal-600);
  --nj-semantic-color-border-accent-teal-moderate-selected: var(--nj-core-color-teal-600);
  --nj-semantic-color-border-accent-teal-strong-default: var(--nj-core-color-teal-600);
  --nj-semantic-color-border-accent-teal-strong-hovered: var(--nj-core-color-teal-700);
  --nj-semantic-color-border-accent-teal-strong-focused: var(--nj-core-color-teal-700);
  --nj-semantic-color-border-accent-teal-strong-pressed: var(--nj-core-color-teal-800);
  --nj-semantic-color-border-accent-teal-strong-selected: var(--nj-core-color-teal-800);
  --nj-semantic-color-border-accent-lime-subtle-default: var(--nj-core-color-lime-300);
  --nj-semantic-color-border-accent-lime-subtle-hovered: var(--nj-core-color-lime-400);
  --nj-semantic-color-border-accent-lime-subtle-focused: var(--nj-core-color-lime-400);
  --nj-semantic-color-border-accent-lime-subtle-pressed: var(--nj-core-color-lime-500);
  --nj-semantic-color-border-accent-lime-subtle-selected: var(--nj-core-color-lime-500);
  --nj-semantic-color-border-accent-lime-moderate-default: var(--nj-core-color-lime-400); /* Suitable for lime borders when there is no meaning tied to the color. */
  --nj-semantic-color-border-accent-lime-moderate-hovered: var(--nj-core-color-lime-500);
  --nj-semantic-color-border-accent-lime-moderate-focused: var(--nj-core-color-lime-500);
  --nj-semantic-color-border-accent-lime-moderate-pressed: var(--nj-core-color-lime-600);
  --nj-semantic-color-border-accent-lime-moderate-selected: var(--nj-core-color-lime-600);
  --nj-semantic-color-border-accent-lime-strong-default: var(--nj-core-color-lime-600);
  --nj-semantic-color-border-accent-lime-strong-hovered: var(--nj-core-color-lime-700);
  --nj-semantic-color-border-accent-lime-strong-focused: var(--nj-core-color-lime-700);
  --nj-semantic-color-border-accent-lime-strong-pressed: var(--nj-core-color-lime-800);
  --nj-semantic-color-border-accent-lime-strong-selected: var(--nj-core-color-lime-800);
  --nj-semantic-color-icon-accent-pink-primary-default: var(--nj-core-color-pink-600);
  --nj-semantic-color-icon-accent-pink-primary-hovered: var(--nj-core-color-pink-700);
  --nj-semantic-color-icon-accent-pink-primary-focused: var(--nj-core-color-pink-700);
  --nj-semantic-color-icon-accent-pink-primary-pressed: var(--nj-core-color-pink-800);
  --nj-semantic-color-icon-accent-pink-contrast-default: var(--nj-core-color-pink-800);
  --nj-semantic-color-icon-accent-red-primary-default: var(--nj-core-color-red-600);
  --nj-semantic-color-icon-accent-red-primary-hovered: var(--nj-core-color-red-700);
  --nj-semantic-color-icon-accent-red-primary-focused: var(--nj-core-color-red-700);
  --nj-semantic-color-icon-accent-red-primary-pressed: var(--nj-core-color-red-800);
  --nj-semantic-color-icon-accent-red-contrast-default: var(--nj-core-color-red-800);
  --nj-semantic-color-icon-accent-orange-primary-default: var(--nj-core-color-orange-600);
  --nj-semantic-color-icon-accent-orange-primary-hovered: var(--nj-core-color-orange-700);
  --nj-semantic-color-icon-accent-orange-primary-focused: var(--nj-core-color-orange-700);
  --nj-semantic-color-icon-accent-orange-primary-pressed: var(--nj-core-color-orange-800);
  --nj-semantic-color-icon-accent-orange-contrast-default: var(--nj-core-color-orange-800);
  --nj-semantic-color-icon-accent-yellow-primary-default: var(--nj-core-color-yellow-600);
  --nj-semantic-color-icon-accent-yellow-primary-hovered: var(--nj-core-color-yellow-700);
  --nj-semantic-color-icon-accent-yellow-primary-focused: var(--nj-core-color-yellow-700);
  --nj-semantic-color-icon-accent-yellow-primary-pressed: var(--nj-core-color-yellow-800);
  --nj-semantic-color-icon-accent-yellow-contrast-default: var(--nj-core-color-yellow-800);
  --nj-semantic-color-icon-accent-green-primary-default: var(--nj-core-color-green-600);
  --nj-semantic-color-icon-accent-green-primary-hovered: var(--nj-core-color-green-700);
  --nj-semantic-color-icon-accent-green-primary-focused: var(--nj-core-color-green-700);
  --nj-semantic-color-icon-accent-green-primary-pressed: var(--nj-core-color-green-800);
  --nj-semantic-color-icon-accent-green-contrast-default: var(--nj-core-color-green-800);
  --nj-semantic-color-icon-accent-grey-primary-default: var(--nj-core-color-grey-600);
  --nj-semantic-color-icon-accent-grey-primary-hovered: var(--nj-core-color-grey-700);
  --nj-semantic-color-icon-accent-grey-primary-focused: var(--nj-core-color-grey-700);
  --nj-semantic-color-icon-accent-grey-primary-pressed: var(--nj-core-color-grey-800);
  --nj-semantic-color-icon-accent-grey-contrast-default: var(--nj-core-color-grey-800);
  --nj-semantic-color-icon-accent-blue-primary-default: var(--nj-core-color-blue-600);
  --nj-semantic-color-icon-accent-blue-primary-hovered: var(--nj-core-color-blue-700);
  --nj-semantic-color-icon-accent-blue-primary-focused: var(--nj-core-color-blue-700);
  --nj-semantic-color-icon-accent-blue-primary-pressed: var(--nj-core-color-blue-800);
  --nj-semantic-color-icon-accent-blue-contrast-default: var(--nj-core-color-blue-800);
  --nj-semantic-color-icon-accent-ultramarine-primary-default: var(--nj-core-color-ultramarine-600);
  --nj-semantic-color-icon-accent-ultramarine-primary-hovered: var(--nj-core-color-ultramarine-700);
  --nj-semantic-color-icon-accent-ultramarine-primary-focused: var(--nj-core-color-ultramarine-700);
  --nj-semantic-color-icon-accent-ultramarine-primary-pressed: var(--nj-core-color-ultramarine-800);
  --nj-semantic-color-icon-accent-ultramarine-contrast-default: var(--nj-core-color-ultramarine-800);
  --nj-semantic-color-icon-accent-purple-primary-default: var(--nj-core-color-purple-600);
  --nj-semantic-color-icon-accent-purple-primary-hovered: var(--nj-core-color-purple-700);
  --nj-semantic-color-icon-accent-purple-primary-focused: var(--nj-core-color-purple-700);
  --nj-semantic-color-icon-accent-purple-primary-pressed: var(--nj-core-color-purple-800);
  --nj-semantic-color-icon-accent-purple-contrast-default: var(--nj-core-color-purple-800);
  --nj-semantic-color-icon-accent-teal-primary-default: var(--nj-core-color-teal-600);
  --nj-semantic-color-icon-accent-teal-primary-hovered: var(--nj-core-color-teal-700);
  --nj-semantic-color-icon-accent-teal-primary-focused: var(--nj-core-color-teal-700);
  --nj-semantic-color-icon-accent-teal-primary-pressed: var(--nj-core-color-teal-800);
  --nj-semantic-color-icon-accent-teal-contrast-default: var(--nj-core-color-teal-800);
  --nj-semantic-color-icon-accent-lime-primary-default: var(--nj-core-color-lime-600);
  --nj-semantic-color-icon-accent-lime-primary-hovered: var(--nj-core-color-lime-700);
  --nj-semantic-color-icon-accent-lime-primary-focused: var(--nj-core-color-lime-700);
  --nj-semantic-color-icon-accent-lime-primary-pressed: var(--nj-core-color-lime-800);
  --nj-semantic-color-icon-accent-lime-contrast-default: var(--nj-core-color-lime-800);
  --nj-semantic-color-icon-additional-signature-default: var(--nj-core-color-ultramarine-900);
  --nj-semantic-color-text-accent-pink-primary-default: var(--nj-core-color-pink-600);
  --nj-semantic-color-text-accent-pink-primary-hovered: var(--nj-core-color-pink-700);
  --nj-semantic-color-text-accent-pink-primary-focused: var(--nj-core-color-pink-700);
  --nj-semantic-color-text-accent-pink-primary-pressed: var(--nj-core-color-pink-800);
  --nj-semantic-color-text-accent-pink-contrast-default: var(--nj-core-color-pink-700);
  --nj-semantic-color-text-accent-pink-contrast-hovered: var(--nj-core-color-pink-800);
  --nj-semantic-color-text-accent-pink-contrast-focused: var(--nj-core-color-pink-800);
  --nj-semantic-color-text-accent-pink-contrast-pressed: var(--nj-core-color-pink-900);
  --nj-semantic-color-text-accent-red-primary-default: var(--nj-core-color-red-600);
  --nj-semantic-color-text-accent-red-primary-hovered: var(--nj-core-color-red-700);
  --nj-semantic-color-text-accent-red-primary-focused: var(--nj-core-color-red-700);
  --nj-semantic-color-text-accent-red-primary-pressed: var(--nj-core-color-red-800);
  --nj-semantic-color-text-accent-red-contrast-default: var(--nj-core-color-red-700);
  --nj-semantic-color-text-accent-red-contrast-hovered: var(--nj-core-color-red-800);
  --nj-semantic-color-text-accent-red-contrast-focused: var(--nj-core-color-red-800);
  --nj-semantic-color-text-accent-red-contrast-pressed: var(--nj-core-color-red-900);
  --nj-semantic-color-text-accent-orange-primary-default: var(--nj-core-color-orange-600);
  --nj-semantic-color-text-accent-orange-primary-hovered: var(--nj-core-color-orange-700);
  --nj-semantic-color-text-accent-orange-primary-focused: var(--nj-core-color-orange-700);
  --nj-semantic-color-text-accent-orange-primary-pressed: var(--nj-core-color-orange-800);
  --nj-semantic-color-text-accent-orange-contrast-default: var(--nj-core-color-orange-700);
  --nj-semantic-color-text-accent-orange-contrast-hovered: var(--nj-core-color-orange-800);
  --nj-semantic-color-text-accent-orange-contrast-focused: var(--nj-core-color-orange-800);
  --nj-semantic-color-text-accent-orange-contrast-pressed: var(--nj-core-color-orange-900);
  --nj-semantic-color-text-accent-yellow-primary-default: var(--nj-core-color-yellow-600);
  --nj-semantic-color-text-accent-yellow-primary-hovered: var(--nj-core-color-yellow-700);
  --nj-semantic-color-text-accent-yellow-primary-focused: var(--nj-core-color-yellow-700);
  --nj-semantic-color-text-accent-yellow-primary-pressed: var(--nj-core-color-yellow-800);
  --nj-semantic-color-text-accent-yellow-contrast-default: var(--nj-core-color-yellow-700);
  --nj-semantic-color-text-accent-yellow-contrast-hovered: var(--nj-core-color-yellow-800);
  --nj-semantic-color-text-accent-yellow-contrast-focused: var(--nj-core-color-yellow-800);
  --nj-semantic-color-text-accent-yellow-contrast-pressed: var(--nj-core-color-yellow-900);
  --nj-semantic-color-text-accent-green-primary-default: var(--nj-core-color-green-600);
  --nj-semantic-color-text-accent-green-primary-hovered: var(--nj-core-color-green-700);
  --nj-semantic-color-text-accent-green-primary-focused: var(--nj-core-color-green-700);
  --nj-semantic-color-text-accent-green-primary-pressed: var(--nj-core-color-green-800);
  --nj-semantic-color-text-accent-green-contrast-default: var(--nj-core-color-green-700);
  --nj-semantic-color-text-accent-green-contrast-hovered: var(--nj-core-color-green-800);
  --nj-semantic-color-text-accent-green-contrast-focused: var(--nj-core-color-green-800);
  --nj-semantic-color-text-accent-green-contrast-pressed: var(--nj-core-color-green-900);
  --nj-semantic-color-text-accent-grey-primary-default: var(--nj-core-color-grey-600);
  --nj-semantic-color-text-accent-grey-primary-hovered: var(--nj-core-color-grey-700);
  --nj-semantic-color-text-accent-grey-primary-focused: var(--nj-core-color-grey-700);
  --nj-semantic-color-text-accent-grey-primary-pressed: var(--nj-core-color-grey-800);
  --nj-semantic-color-text-accent-grey-contrast-default: var(--nj-core-color-grey-700);
  --nj-semantic-color-text-accent-grey-contrast-hovered: var(--nj-core-color-grey-800);
  --nj-semantic-color-text-accent-grey-contrast-focused: var(--nj-core-color-grey-800);
  --nj-semantic-color-text-accent-grey-contrast-pressed: var(--nj-core-color-grey-900);
  --nj-semantic-color-text-accent-blue-primary-default: var(--nj-core-color-blue-600);
  --nj-semantic-color-text-accent-blue-primary-hovered: var(--nj-core-color-blue-700);
  --nj-semantic-color-text-accent-blue-primary-focused: var(--nj-core-color-blue-700);
  --nj-semantic-color-text-accent-blue-primary-pressed: var(--nj-core-color-blue-800);
  --nj-semantic-color-text-accent-blue-contrast-default: var(--nj-core-color-blue-700);
  --nj-semantic-color-text-accent-blue-contrast-hovered: var(--nj-core-color-blue-800);
  --nj-semantic-color-text-accent-blue-contrast-focused: var(--nj-core-color-blue-800);
  --nj-semantic-color-text-accent-blue-contrast-pressed: var(--nj-core-color-blue-900);
  --nj-semantic-color-text-accent-ultramarine-primary-default: var(--nj-core-color-ultramarine-600);
  --nj-semantic-color-text-accent-ultramarine-primary-hovered: var(--nj-core-color-ultramarine-700);
  --nj-semantic-color-text-accent-ultramarine-primary-focused: var(--nj-core-color-ultramarine-700);
  --nj-semantic-color-text-accent-ultramarine-primary-pressed: var(--nj-core-color-ultramarine-800);
  --nj-semantic-color-text-accent-ultramarine-contrast-default: var(--nj-core-color-ultramarine-700);
  --nj-semantic-color-text-accent-ultramarine-contrast-hovered: var(--nj-core-color-ultramarine-800);
  --nj-semantic-color-text-accent-ultramarine-contrast-focused: var(--nj-core-color-ultramarine-800);
  --nj-semantic-color-text-accent-ultramarine-contrast-pressed: var(--nj-core-color-ultramarine-900);
  --nj-semantic-color-text-accent-purple-primary-default: var(--nj-core-color-purple-600);
  --nj-semantic-color-text-accent-purple-primary-hovered: var(--nj-core-color-purple-700);
  --nj-semantic-color-text-accent-purple-primary-focused: var(--nj-core-color-purple-700);
  --nj-semantic-color-text-accent-purple-primary-pressed: var(--nj-core-color-purple-800);
  --nj-semantic-color-text-accent-purple-contrast-default: var(--nj-core-color-purple-700);
  --nj-semantic-color-text-accent-purple-contrast-hovered: var(--nj-core-color-purple-800);
  --nj-semantic-color-text-accent-purple-contrast-focused: var(--nj-core-color-purple-800);
  --nj-semantic-color-text-accent-purple-contrast-pressed: var(--nj-core-color-purple-900);
  --nj-semantic-color-text-accent-teal-primary-default: var(--nj-core-color-teal-600);
  --nj-semantic-color-text-accent-teal-primary-hovered: var(--nj-core-color-teal-700);
  --nj-semantic-color-text-accent-teal-primary-focused: var(--nj-core-color-teal-700);
  --nj-semantic-color-text-accent-teal-primary-pressed: var(--nj-core-color-teal-800);
  --nj-semantic-color-text-accent-teal-contrast-default: var(--nj-core-color-teal-700);
  --nj-semantic-color-text-accent-teal-contrast-hovered: var(--nj-core-color-teal-800);
  --nj-semantic-color-text-accent-teal-contrast-focused: var(--nj-core-color-teal-800);
  --nj-semantic-color-text-accent-teal-contrast-pressed: var(--nj-core-color-teal-900);
  --nj-semantic-color-text-accent-lime-primary-default: var(--nj-core-color-lime-600);
  --nj-semantic-color-text-accent-lime-primary-hovered: var(--nj-core-color-lime-700);
  --nj-semantic-color-text-accent-lime-primary-focused: var(--nj-core-color-lime-700);
  --nj-semantic-color-text-accent-lime-primary-pressed: var(--nj-core-color-lime-800);
  --nj-semantic-color-text-accent-lime-contrast-default: var(--nj-core-color-lime-700);
  --nj-semantic-color-text-accent-lime-contrast-hovered: var(--nj-core-color-lime-800);
  --nj-semantic-color-text-accent-lime-contrast-focused: var(--nj-core-color-lime-800);
  --nj-semantic-color-text-accent-lime-contrast-pressed: var(--nj-core-color-lime-900);
  --nj-semantic-color-text-additional-signature-default: var(--nj-core-color-ultramarine-900);
  --nj-semantic-elevation-z-index-dropdown: var(--nj-core-elevation-z-index-1);
  --nj-semantic-elevation-z-index-sticky: var(--nj-core-elevation-z-index-20);
  --nj-semantic-elevation-z-index-fixed: var(--nj-core-elevation-z-index-30);
  --nj-semantic-elevation-z-index-modal-backdrop: var(--nj-core-elevation-z-index-40);
  --nj-semantic-elevation-z-index-modal: var(--nj-core-elevation-z-index-50);
  --nj-semantic-elevation-z-index-popover: var(--nj-core-elevation-z-index-60);
  --nj-semantic-elevation-z-index-tooltip: var(--nj-core-elevation-z-index-70);
  --nj-semantic-elevation-z-index-toast-container: var(--nj-core-elevation-z-index-80);
  --nj-semantic-elevation-z-index-toast: var(--nj-core-elevation-z-index-80);
  --nj-semantic-font-family-default: var(--nj-semantic-font-family-sans-serif);
  --nj-semantic-font-line-height-default: var(--nj-semantic-font-line-height-sans-serif);
  --nj-semantic-opacity-disabled: var(--nj-core-opacity-350);
  --nj-semantic-size-border-width: var(--nj-core-size-1);
  --nj-semantic-size-border-radius-none: var(--nj-core-size-0);
  --nj-semantic-size-border-radius-sm: var(--nj-core-size-4);
  --nj-semantic-size-border-radius-md: var(--nj-core-size-8);
  --nj-semantic-size-border-radius-lg: var(--nj-core-size-16);
  --nj-semantic-size-border-radius-xl: var(--nj-core-size-24);
  --nj-semantic-size-border-radius-xxl: var(--nj-core-size-32);
  --nj-semantic-size-border-radius-pill: var(--nj-core-size-9999);
  --nj-semantic-size-border-focus-ring-width: var(--nj-core-size-2);
  --nj-semantic-size-border-focus-ring-offset: var(--nj-core-size-2);
  --nj-semantic-size-font-content-1: var(--nj-core-size-16);
  --nj-semantic-size-font-content-2: var(--nj-core-size-14);
  --nj-semantic-size-font-content-3: var(--nj-core-size-12);
  --nj-semantic-size-font-content-4: var(--nj-core-size-10);
  --nj-semantic-size-font-heading-1: var(--nj-core-size-54);
  --nj-semantic-size-font-heading-2: var(--nj-core-size-36);
  --nj-semantic-size-font-heading-3: var(--nj-core-size-28);
  --nj-semantic-size-font-heading-4: var(--nj-core-size-24);
  --nj-semantic-size-font-heading-5: var(--nj-core-size-20);
  --nj-semantic-size-font-heading-6: var(--nj-core-size-18);
  --nj-semantic-size-font-display-1: var(--nj-core-size-76);
  --nj-semantic-size-icon-2xs: var(--nj-core-size-10);
  --nj-semantic-size-icon-xs: var(--nj-core-size-12);
  --nj-semantic-size-icon-sm: var(--nj-core-size-16);
  --nj-semantic-size-icon-md: var(--nj-core-size-24);
  --nj-semantic-size-icon-lg: var(--nj-core-size-32);
  --nj-semantic-size-icon-xl: var(--nj-core-size-48);
  --nj-semantic-size-icon-xxl: var(--nj-core-size-64);
  --nj-semantic-size-icon-3xl: var(--nj-core-size-80);
  --nj-semantic-size-icon-4xl: var(--nj-core-size-96);
  --nj-semantic-size-icon-5xl: var(--nj-core-size-112);
  --nj-semantic-size-icon-6xl: var(--nj-core-size-128);
  --nj-semantic-size-spacing-0: var(--nj-core-size-0);
  --nj-semantic-size-spacing-2: var(--nj-core-size-2);
  --nj-semantic-size-spacing-4: var(--nj-core-size-4);
  --nj-semantic-size-spacing-8: var(--nj-core-size-8);
  --nj-semantic-size-spacing-12: var(--nj-core-size-12);
  --nj-semantic-size-spacing-16: var(--nj-core-size-16);
  --nj-semantic-size-spacing-20: var(--nj-core-size-20);
  --nj-semantic-size-spacing-24: var(--nj-core-size-24);
  --nj-semantic-size-spacing-32: var(--nj-core-size-32);
  --nj-semantic-size-spacing-48: var(--nj-core-size-48);
  --nj-semantic-size-spacing-64: var(--nj-core-size-64);
  --nj-semantic-size-spacing-80: var(--nj-core-size-80);
  --nj-semantic-size-spacing-96: var(--nj-core-size-96);
  --nj-semantic-size-spacing-112: var(--nj-core-size-112);
  --nj-core-color-reference-brand-100: var(--nj-core-color-blue-100);
  --nj-core-color-reference-brand-200: var(--nj-core-color-blue-200);
  --nj-core-color-reference-brand-300: var(--nj-core-color-blue-300);
  --nj-core-color-reference-brand-400: var(--nj-core-color-blue-400);
  --nj-core-color-reference-brand-500: var(--nj-core-color-blue-500);
  --nj-core-color-reference-brand-600: var(--nj-core-color-blue-600);
  --nj-core-color-reference-brand-700: var(--nj-core-color-blue-700);
  --nj-core-color-reference-brand-800: var(--nj-core-color-blue-800);
  --nj-core-color-reference-brand-900: var(--nj-core-color-blue-900);
  --nj-core-color-reference-brand-alpha-0: var(--nj-core-color-blue-alpha-0);
  --nj-core-color-reference-brand-alpha-100: var(--nj-core-color-blue-alpha-100);
  --nj-core-color-reference-brand-alpha-200: var(--nj-core-color-blue-alpha-200);
  --nj-core-color-reference-brand-alpha-300: var(--nj-core-color-blue-alpha-300);
  --nj-core-color-reference-brand-alpha-400: var(--nj-core-color-blue-alpha-400);
  --nj-core-color-reference-neutral-0: var(--nj-core-color-grey-0);
  --nj-core-color-reference-neutral-100: var(--nj-core-color-grey-100);
  --nj-core-color-reference-neutral-200: var(--nj-core-color-grey-200);
  --nj-core-color-reference-neutral-300: var(--nj-core-color-grey-300);
  --nj-core-color-reference-neutral-400: var(--nj-core-color-grey-400);
  --nj-core-color-reference-neutral-500: var(--nj-core-color-grey-500);
  --nj-core-color-reference-neutral-600: var(--nj-core-color-grey-600);
  --nj-core-color-reference-neutral-700: var(--nj-core-color-grey-700);
  --nj-core-color-reference-neutral-800: var(--nj-core-color-grey-800);
  --nj-core-color-reference-neutral-900: var(--nj-core-color-grey-900);
  --nj-core-color-reference-neutral-1000: var(--nj-core-color-grey-1000);
  --nj-core-color-reference-neutral-alpha-0: var(--nj-core-color-grey-alpha-0);
  --nj-core-color-reference-neutral-alpha-100: var(--nj-core-color-grey-alpha-100);
  --nj-core-color-reference-neutral-alpha-200: var(--nj-core-color-grey-alpha-200);
  --nj-core-color-reference-neutral-alpha-300: var(--nj-core-color-grey-alpha-300);
  --nj-core-color-reference-neutral-alpha-400: var(--nj-core-color-grey-alpha-400);
  --nj-core-color-reference-neutral-alpha-500: var(--nj-core-color-grey-alpha-500);
  --nj-core-color-reference-neutral-alpha-inverse-0: var(--nj-core-color-grey-alpha-inverse-0);
  --nj-core-color-reference-neutral-alpha-inverse-100: var(--nj-core-color-grey-alpha-inverse-100);
  --nj-core-color-reference-neutral-alpha-inverse-200: var(--nj-core-color-grey-alpha-inverse-200);
  --nj-core-color-reference-neutral-alpha-inverse-300: var(--nj-core-color-grey-alpha-inverse-300);
  --nj-core-color-reference-neutral-alpha-inverse-400: var(--nj-core-color-grey-alpha-inverse-400);
  --nj-core-color-reference-neutral-alpha-inverse-500: var(--nj-core-color-grey-alpha-inverse-500);
  --nj-core-color-reference-status-danger-100: var(--nj-core-color-red-100);
  --nj-core-color-reference-status-danger-200: var(--nj-core-color-red-200);
  --nj-core-color-reference-status-danger-300: var(--nj-core-color-red-300);
  --nj-core-color-reference-status-danger-400: var(--nj-core-color-red-400);
  --nj-core-color-reference-status-danger-500: var(--nj-core-color-red-500);
  --nj-core-color-reference-status-danger-600: var(--nj-core-color-red-600);
  --nj-core-color-reference-status-danger-700: var(--nj-core-color-red-700);
  --nj-core-color-reference-status-danger-800: var(--nj-core-color-red-800);
  --nj-core-color-reference-status-danger-900: var(--nj-core-color-red-900);
  --nj-core-color-reference-status-danger-alpha-0: var(--nj-core-color-red-alpha-0);
  --nj-core-color-reference-status-danger-alpha-100: var(--nj-core-color-red-alpha-100);
  --nj-core-color-reference-status-danger-alpha-200: var(--nj-core-color-red-alpha-200);
  --nj-core-color-reference-status-danger-alpha-300: var(--nj-core-color-red-alpha-300);
  --nj-core-color-reference-status-danger-alpha-400: var(--nj-core-color-red-alpha-400);
  --nj-core-color-reference-status-success-100: var(--nj-core-color-green-100);
  --nj-core-color-reference-status-success-200: var(--nj-core-color-green-200);
  --nj-core-color-reference-status-success-300: var(--nj-core-color-green-300);
  --nj-core-color-reference-status-success-400: var(--nj-core-color-green-400);
  --nj-core-color-reference-status-success-500: var(--nj-core-color-green-500);
  --nj-core-color-reference-status-success-600: var(--nj-core-color-green-600);
  --nj-core-color-reference-status-success-700: var(--nj-core-color-green-700);
  --nj-core-color-reference-status-success-800: var(--nj-core-color-green-800);
  --nj-core-color-reference-status-success-900: var(--nj-core-color-green-900);
  --nj-core-color-reference-status-success-alpha-0: var(--nj-core-color-green-alpha-0);
  --nj-core-color-reference-status-success-alpha-100: var(--nj-core-color-green-alpha-100);
  --nj-core-color-reference-status-success-alpha-200: var(--nj-core-color-green-alpha-200);
  --nj-core-color-reference-status-success-alpha-300: var(--nj-core-color-green-alpha-300);
  --nj-core-color-reference-status-success-alpha-400: var(--nj-core-color-green-alpha-400);
  --nj-core-color-reference-status-warning-100: var(--nj-core-color-orange-100);
  --nj-core-color-reference-status-warning-200: var(--nj-core-color-orange-200);
  --nj-core-color-reference-status-warning-300: var(--nj-core-color-orange-300);
  --nj-core-color-reference-status-warning-400: var(--nj-core-color-orange-400);
  --nj-core-color-reference-status-warning-500: var(--nj-core-color-orange-500);
  --nj-core-color-reference-status-warning-600: var(--nj-core-color-orange-600);
  --nj-core-color-reference-status-warning-700: var(--nj-core-color-orange-700);
  --nj-core-color-reference-status-warning-800: var(--nj-core-color-orange-800);
  --nj-core-color-reference-status-warning-900: var(--nj-core-color-orange-900);
  --nj-core-color-reference-status-warning-alpha-0: var(--nj-core-color-orange-alpha-0);
  --nj-core-color-reference-status-warning-alpha-100: var(--nj-core-color-orange-alpha-100);
  --nj-core-color-reference-status-warning-alpha-200: var(--nj-core-color-orange-alpha-200);
  --nj-core-color-reference-status-warning-alpha-300: var(--nj-core-color-orange-alpha-300);
  --nj-core-color-reference-status-warning-alpha-400: var(--nj-core-color-orange-alpha-400);
  --nj-core-color-reference-status-discovery-100: var(--nj-core-color-purple-100);
  --nj-core-color-reference-status-discovery-200: var(--nj-core-color-purple-200);
  --nj-core-color-reference-status-discovery-300: var(--nj-core-color-purple-300);
  --nj-core-color-reference-status-discovery-400: var(--nj-core-color-purple-400);
  --nj-core-color-reference-status-discovery-500: var(--nj-core-color-purple-500);
  --nj-core-color-reference-status-discovery-600: var(--nj-core-color-purple-600);
  --nj-core-color-reference-status-discovery-700: var(--nj-core-color-purple-700);
  --nj-core-color-reference-status-discovery-800: var(--nj-core-color-purple-800);
  --nj-core-color-reference-status-discovery-900: var(--nj-core-color-purple-900);
  --nj-core-color-reference-status-discovery-alpha-0: var(--nj-core-color-purple-alpha-0);
  --nj-core-color-reference-status-discovery-alpha-100: var(--nj-core-color-purple-alpha-100);
  --nj-core-color-reference-status-discovery-alpha-200: var(--nj-core-color-purple-alpha-200);
  --nj-core-color-reference-status-discovery-alpha-300: var(--nj-core-color-purple-alpha-300);
  --nj-core-color-reference-status-discovery-alpha-400: var(--nj-core-color-purple-alpha-400);
  --nj-core-color-reference-status-information-100: var(--nj-core-color-blue-100);
  --nj-core-color-reference-status-information-200: var(--nj-core-color-blue-200);
  --nj-core-color-reference-status-information-300: var(--nj-core-color-blue-300);
  --nj-core-color-reference-status-information-400: var(--nj-core-color-blue-400);
  --nj-core-color-reference-status-information-500: var(--nj-core-color-blue-500);
  --nj-core-color-reference-status-information-600: var(--nj-core-color-blue-600);
  --nj-core-color-reference-status-information-700: var(--nj-core-color-blue-700);
  --nj-core-color-reference-status-information-800: var(--nj-core-color-blue-800);
  --nj-core-color-reference-status-information-900: var(--nj-core-color-blue-900);
  --nj-core-color-reference-status-information-alpha-0: var(--nj-core-color-blue-alpha-0);
  --nj-core-color-reference-status-information-alpha-100: var(--nj-core-color-blue-alpha-100);
  --nj-core-color-reference-status-information-alpha-200: var(--nj-core-color-blue-alpha-200);
  --nj-core-color-reference-status-information-alpha-300: var(--nj-core-color-blue-alpha-300);
  --nj-core-color-reference-status-information-alpha-400: var(--nj-core-color-blue-alpha-400);
  --nj-core-color-reference-status-planet-100: var(--nj-core-color-teal-100);
  --nj-core-color-reference-status-planet-200: var(--nj-core-color-teal-200);
  --nj-core-color-reference-status-planet-300: var(--nj-core-color-teal-300);
  --nj-core-color-reference-status-planet-400: var(--nj-core-color-teal-400);
  --nj-core-color-reference-status-planet-500: var(--nj-core-color-teal-500);
  --nj-core-color-reference-status-planet-600: var(--nj-core-color-teal-600);
  --nj-core-color-reference-status-planet-700: var(--nj-core-color-teal-700);
  --nj-core-color-reference-status-planet-800: var(--nj-core-color-teal-800);
  --nj-core-color-reference-status-planet-900: var(--nj-core-color-teal-900);
  --nj-core-color-reference-status-planet-alpha-0: var(--nj-core-color-teal-alpha-0);
  --nj-core-color-reference-status-planet-alpha-100: var(--nj-core-color-teal-alpha-100);
  --nj-core-color-reference-status-planet-alpha-200: var(--nj-core-color-teal-alpha-200);
  --nj-core-color-reference-status-planet-alpha-300: var(--nj-core-color-teal-alpha-300);
  --nj-core-color-reference-status-planet-alpha-400: var(--nj-core-color-teal-alpha-400);
  --nj-component-avatar-size-sm: var(--nj-core-size-32);
  --nj-component-avatar-size-base: var(--nj-core-size-48);
  --nj-component-avatar-size-lg: var(--nj-core-size-64);
  --nj-component-avatar-size-xl: var(--nj-core-size-96);
  --nj-component-fab-size-sm: var(--nj-core-size-48);
  --nj-component-fab-size-base: var(--nj-core-size-64);
  --nj-component-skeleton-color-background: linear-gradient(to right, var(--nj-core-color-grey-alpha-0) 0%, rgba(23, 29, 33, var(--nj-core-opacity-50)) 50%, var(--nj-core-color-grey-alpha-0) 100%);
  --nj-semantic-color-background-neutral-primary-default: var(--nj-core-color-reference-neutral-0); /* Sets the background color to white, provides a clean and minimalist canvas for the interface. Classic foundation for content and components. */
  --nj-semantic-color-background-neutral-primary-hovered: var(--nj-core-color-reference-neutral-200);
  --nj-semantic-color-background-neutral-primary-focused: var(--nj-core-color-reference-neutral-200);
  --nj-semantic-color-background-neutral-primary-pressed: var(--nj-core-color-reference-neutral-300);
  --nj-semantic-color-background-neutral-primary-selected: var(--nj-core-color-reference-brand-200);
  --nj-semantic-color-background-neutral-primary-translucent-default: var(--nj-core-color-reference-neutral-alpha-0);
  --nj-semantic-color-background-neutral-primary-translucent-hovered: var(--nj-core-color-reference-neutral-alpha-200);
  --nj-semantic-color-background-neutral-primary-translucent-focused: var(--nj-core-color-reference-neutral-alpha-200);
  --nj-semantic-color-background-neutral-primary-translucent-pressed: var(--nj-core-color-reference-neutral-alpha-300);
  --nj-semantic-color-background-neutral-primary-translucent-selected: var(--nj-core-color-reference-brand-alpha-200);
  --nj-semantic-color-background-neutral-secondary-default: var(--nj-core-color-reference-neutral-100); /* Provides a subtle contrast with the primary background. Use to add a touch of visual interest without overpowering the content. */
  --nj-semantic-color-background-neutral-secondary-hovered: var(--nj-core-color-reference-neutral-200);
  --nj-semantic-color-background-neutral-secondary-focused: var(--nj-core-color-reference-neutral-200);
  --nj-semantic-color-background-neutral-secondary-pressed: var(--nj-core-color-reference-neutral-300);
  --nj-semantic-color-background-neutral-secondary-translucent-default: var(--nj-core-color-reference-neutral-alpha-100);
  --nj-semantic-color-background-neutral-secondary-translucent-hovered: var(--nj-core-color-reference-neutral-alpha-200);
  --nj-semantic-color-background-neutral-secondary-translucent-focused: var(--nj-core-color-reference-neutral-alpha-200);
  --nj-semantic-color-background-neutral-secondary-translucent-pressed: var(--nj-core-color-reference-neutral-alpha-300);
  --nj-semantic-color-background-neutral-tertiary-default: var(--nj-core-color-reference-neutral-200); /* Provides a slightly stronger contrast with the primary background. Use to enhances the visual separation between different sections or elements. */
  --nj-semantic-color-background-neutral-tertiary-hovered: var(--nj-core-color-reference-neutral-300);
  --nj-semantic-color-background-neutral-tertiary-focused: var(--nj-core-color-reference-neutral-300);
  --nj-semantic-color-background-neutral-tertiary-pressed: var(--nj-core-color-reference-neutral-400);
  --nj-semantic-color-background-neutral-tertiary-translucent-default: var(--nj-core-color-reference-neutral-alpha-200);
  --nj-semantic-color-background-neutral-tertiary-translucent-hovered: var(--nj-core-color-reference-neutral-alpha-300);
  --nj-semantic-color-background-neutral-tertiary-translucent-focused: var(--nj-core-color-reference-neutral-alpha-300);
  --nj-semantic-color-background-neutral-tertiary-translucent-pressed: var(--nj-core-color-reference-neutral-alpha-400);
  --nj-semantic-color-background-neutral-solid-default: var(--nj-core-color-reference-neutral-600); /* Provides a distinct and noticeable contrast with the primary background. Adds a robust and substantial presence, use it to make the element stand out. */
  --nj-semantic-color-background-neutral-solid-hovered: var(--nj-core-color-reference-neutral-700);
  --nj-semantic-color-background-neutral-solid-focused: var(--nj-core-color-reference-neutral-700);
  --nj-semantic-color-background-neutral-solid-pressed: var(--nj-core-color-reference-neutral-800);
  --nj-semantic-color-background-neutral-inverse-default: var(--nj-core-color-reference-neutral-0); /* Applies white as the background color, creating a striking visual effect when used on a dark-colored surface. Use to ensure readability and visual appeal in specific UI components or sections. */
  --nj-semantic-color-background-neutral-inverse-hovered: var(--nj-core-color-reference-neutral-200);
  --nj-semantic-color-background-neutral-inverse-focused: var(--nj-core-color-reference-neutral-200);
  --nj-semantic-color-background-neutral-inverse-pressed: var(--nj-core-color-reference-neutral-300);
  --nj-semantic-color-background-neutral-inverse-translucent-default: var(--nj-core-color-reference-neutral-alpha-0);
  --nj-semantic-color-background-neutral-inverse-translucent-hovered: var(--nj-core-color-reference-neutral-alpha-300);
  --nj-semantic-color-background-neutral-inverse-translucent-focused: var(--nj-core-color-reference-neutral-alpha-300);
  --nj-semantic-color-background-neutral-inverse-translucent-pressed: var(--nj-core-color-reference-neutral-alpha-400);
  --nj-semantic-color-background-neutral-spotlight-default: var(--nj-core-color-reference-neutral-900); /* Creates a high contrast with the primary background. Use it for critical elements or components that require maximum emphasis and visual impact. */
  --nj-semantic-color-background-brand-primary-translucent-default: var(--nj-core-color-reference-brand-alpha-0);
  --nj-semantic-color-background-brand-primary-translucent-hovered: var(--nj-core-color-reference-brand-alpha-200);
  --nj-semantic-color-background-brand-primary-translucent-focused: var(--nj-core-color-reference-brand-alpha-200);
  --nj-semantic-color-background-brand-primary-translucent-pressed: var(--nj-core-color-reference-brand-alpha-300);
  --nj-semantic-color-background-brand-secondary-default: var(--nj-core-color-reference-brand-100); /* Establishes a subtle contrast with the primary background while using the brand color. Use it to add a touch of brand interest without overpowering the content. */
  --nj-semantic-color-background-brand-secondary-hovered: var(--nj-core-color-reference-brand-200);
  --nj-semantic-color-background-brand-secondary-focused: var(--nj-core-color-reference-brand-200);
  --nj-semantic-color-background-brand-secondary-pressed: var(--nj-core-color-reference-brand-300);
  --nj-semantic-color-background-brand-secondary-translucent-default: var(--nj-core-color-reference-brand-alpha-100);
  --nj-semantic-color-background-brand-secondary-translucent-hovered: var(--nj-core-color-reference-brand-alpha-200);
  --nj-semantic-color-background-brand-secondary-translucent-focused: var(--nj-core-color-reference-brand-alpha-200);
  --nj-semantic-color-background-brand-secondary-translucent-pressed: var(--nj-core-color-reference-brand-alpha-300);
  --nj-semantic-color-background-brand-tertiary-default: var(--nj-core-color-reference-brand-200); /* Creates a slightly stronger contrast with the primary background while using the brand color. Use it to enhances the visual separation between different sections or elements. */
  --nj-semantic-color-background-brand-tertiary-hovered: var(--nj-core-color-reference-brand-300);
  --nj-semantic-color-background-brand-tertiary-focused: var(--nj-core-color-reference-brand-300);
  --nj-semantic-color-background-brand-tertiary-pressed: var(--nj-core-color-reference-brand-400);
  --nj-semantic-color-background-brand-tertiary-translucent-default: var(--nj-core-color-reference-brand-alpha-200);
  --nj-semantic-color-background-brand-tertiary-translucent-hovered: var(--nj-core-color-reference-brand-alpha-300);
  --nj-semantic-color-background-brand-tertiary-translucent-focused: var(--nj-core-color-reference-brand-alpha-300);
  --nj-semantic-color-background-brand-tertiary-translucent-pressed: var(--nj-core-color-reference-brand-alpha-400);
  --nj-semantic-color-background-brand-solid-default: var(--nj-core-color-reference-brand-600); /* Use to add a robust and substantial brand presence, making the elements stand out using the brand color. */
  --nj-semantic-color-background-brand-solid-hovered: var(--nj-core-color-reference-brand-700);
  --nj-semantic-color-background-brand-solid-focused: var(--nj-core-color-reference-brand-700);
  --nj-semantic-color-background-brand-solid-pressed: var(--nj-core-color-reference-brand-800);
  --nj-semantic-color-background-brand-spotlight-default: var(--nj-core-color-reference-brand-900); /* Creates a high contrast with the primary background while reminiscing of the brand identity. Use it for critical elements or components that require maximum emphasis and visual impact. */
  --nj-semantic-color-background-status-danger-primary-translucent-default: var(--nj-core-color-reference-status-danger-alpha-0);
  --nj-semantic-color-background-status-danger-primary-translucent-hovered: var(--nj-core-color-reference-status-danger-alpha-200);
  --nj-semantic-color-background-status-danger-primary-translucent-focused: var(--nj-core-color-reference-status-danger-alpha-200);
  --nj-semantic-color-background-status-danger-primary-translucent-pressed: var(--nj-core-color-reference-status-danger-alpha-300);
  --nj-semantic-color-background-status-danger-primary-translucent-selected: var(--nj-core-color-reference-status-danger-alpha-200);
  --nj-semantic-color-background-status-danger-secondary-default: var(--nj-core-color-reference-status-danger-100);
  --nj-semantic-color-background-status-danger-secondary-hovered: var(--nj-core-color-reference-status-danger-200);
  --nj-semantic-color-background-status-danger-secondary-focused: var(--nj-core-color-reference-status-danger-200);
  --nj-semantic-color-background-status-danger-secondary-pressed: var(--nj-core-color-reference-status-danger-300);
  --nj-semantic-color-background-status-danger-tertiary-default: var(--nj-core-color-reference-status-danger-200);
  --nj-semantic-color-background-status-danger-tertiary-hovered: var(--nj-core-color-reference-status-danger-300);
  --nj-semantic-color-background-status-danger-tertiary-focused: var(--nj-core-color-reference-status-danger-300);
  --nj-semantic-color-background-status-danger-tertiary-pressed: var(--nj-core-color-reference-status-danger-400);
  --nj-semantic-color-background-status-danger-tertiary-translucent-default: var(--nj-core-color-reference-status-danger-alpha-200);
  --nj-semantic-color-background-status-danger-tertiary-translucent-hovered: var(--nj-core-color-reference-status-danger-alpha-300);
  --nj-semantic-color-background-status-danger-tertiary-translucent-focused: var(--nj-core-color-reference-status-danger-alpha-300);
  --nj-semantic-color-background-status-danger-tertiary-translucent-pressed: var(--nj-core-color-reference-status-danger-alpha-400);
  --nj-semantic-color-background-status-danger-solid-default: var(--nj-core-color-reference-status-danger-600); /* Indicate a state of danger or criticality in your interface. Use for elements that require immediate attention due to errors, warnings, or potentially harmful actions. Serves as a powerful visual cue to alert users to potential issues and encourages careful consideration of their actions. */
  --nj-semantic-color-background-status-danger-solid-hovered: var(--nj-core-color-reference-status-danger-700);
  --nj-semantic-color-background-status-danger-solid-pressed: var(--nj-core-color-reference-status-danger-800);
  --nj-semantic-color-background-status-danger-solid-focused: var(--nj-core-color-reference-status-danger-700);
  --nj-semantic-color-background-status-danger-spotlight-default: var(--nj-core-color-reference-status-danger-900);
  --nj-semantic-color-background-status-success-primary-translucent-default: var(--nj-core-color-reference-status-success-alpha-0);
  --nj-semantic-color-background-status-success-primary-translucent-hovered: var(--nj-core-color-reference-status-success-alpha-200);
  --nj-semantic-color-background-status-success-primary-translucent-focused: var(--nj-core-color-reference-status-success-alpha-200);
  --nj-semantic-color-background-status-success-primary-translucent-pressed: var(--nj-core-color-reference-status-success-alpha-300);
  --nj-semantic-color-background-status-success-primary-translucent-selected: var(--nj-core-color-reference-status-success-alpha-200);
  --nj-semantic-color-background-status-success-secondary-default: var(--nj-core-color-reference-status-success-100);
  --nj-semantic-color-background-status-success-secondary-hovered: var(--nj-core-color-reference-status-success-200);
  --nj-semantic-color-background-status-success-secondary-focused: var(--nj-core-color-reference-status-success-200);
  --nj-semantic-color-background-status-success-secondary-pressed: var(--nj-core-color-reference-status-success-300);
  --nj-semantic-color-background-status-success-tertiary-default: var(--nj-core-color-reference-status-success-200);
  --nj-semantic-color-background-status-success-tertiary-hovered: var(--nj-core-color-reference-status-success-300);
  --nj-semantic-color-background-status-success-tertiary-focused: var(--nj-core-color-reference-status-success-300);
  --nj-semantic-color-background-status-success-tertiary-pressed: var(--nj-core-color-reference-status-success-400);
  --nj-semantic-color-background-status-success-tertiary-translucent-default: var(--nj-core-color-reference-status-success-alpha-200);
  --nj-semantic-color-background-status-success-tertiary-translucent-hovered: var(--nj-core-color-reference-status-success-alpha-300);
  --nj-semantic-color-background-status-success-tertiary-translucent-focused: var(--nj-core-color-reference-status-success-alpha-300);
  --nj-semantic-color-background-status-success-tertiary-translucent-pressed: var(--nj-core-color-reference-status-success-alpha-400);
  --nj-semantic-color-background-status-success-solid-default: var(--nj-core-color-reference-status-success-600); /* Associated with successful or positive states in your interface. Apply it to elements or components that confirm successful actions or completion of tasks. */
  --nj-semantic-color-background-status-success-solid-hovered: var(--nj-core-color-reference-status-success-700);
  --nj-semantic-color-background-status-success-solid-focused: var(--nj-core-color-reference-status-success-700);
  --nj-semantic-color-background-status-success-solid-pressed: var(--nj-core-color-reference-status-success-800);
  --nj-semantic-color-background-status-success-spotlight-default: var(--nj-core-color-reference-status-success-900);
  --nj-semantic-color-background-status-warning-primary-translucent-default: var(--nj-core-color-reference-status-warning-alpha-0);
  --nj-semantic-color-background-status-warning-primary-translucent-hovered: var(--nj-core-color-reference-status-warning-alpha-200);
  --nj-semantic-color-background-status-warning-primary-translucent-focused: var(--nj-core-color-reference-status-warning-alpha-200);
  --nj-semantic-color-background-status-warning-primary-translucent-pressed: var(--nj-core-color-reference-status-warning-alpha-300);
  --nj-semantic-color-background-status-warning-primary-translucent-selected: var(--nj-core-color-reference-status-warning-alpha-200);
  --nj-semantic-color-background-status-warning-secondary-default: var(--nj-core-color-reference-status-warning-100);
  --nj-semantic-color-background-status-warning-secondary-hovered: var(--nj-core-color-reference-status-warning-200);
  --nj-semantic-color-background-status-warning-secondary-focused: var(--nj-core-color-reference-status-warning-200);
  --nj-semantic-color-background-status-warning-secondary-pressed: var(--nj-core-color-reference-status-warning-300);
  --nj-semantic-color-background-status-warning-tertiary-default: var(--nj-core-color-reference-status-warning-200);
  --nj-semantic-color-background-status-warning-tertiary-hovered: var(--nj-core-color-reference-status-warning-300);
  --nj-semantic-color-background-status-warning-tertiary-focused: var(--nj-core-color-reference-status-warning-300);
  --nj-semantic-color-background-status-warning-tertiary-pressed: var(--nj-core-color-reference-status-warning-400);
  --nj-semantic-color-background-status-warning-tertiary-translucent-default: var(--nj-core-color-reference-status-warning-alpha-200);
  --nj-semantic-color-background-status-warning-tertiary-translucent-hovered: var(--nj-core-color-reference-status-warning-alpha-300);
  --nj-semantic-color-background-status-warning-tertiary-translucent-focused: var(--nj-core-color-reference-status-warning-alpha-300);
  --nj-semantic-color-background-status-warning-tertiary-translucent-pressed: var(--nj-core-color-reference-status-warning-alpha-400);
  --nj-semantic-color-background-status-warning-solid-default: var(--nj-core-color-reference-status-warning-400); /* Conveys a warning or cautionary state in your interface. Use for elements that signify non-critical but important information, such as alerts, notices, or reminders. Helps users recognize situations that require their attention without implying immediate danger. */
  --nj-semantic-color-background-status-warning-solid-hovered: var(--nj-core-color-reference-status-warning-500);
  --nj-semantic-color-background-status-warning-solid-focused: var(--nj-core-color-reference-status-warning-500);
  --nj-semantic-color-background-status-warning-solid-pressed: var(--nj-core-color-reference-status-warning-600);
  --nj-semantic-color-background-status-warning-spotlight-default: var(--nj-core-color-reference-status-warning-900);
  --nj-semantic-color-background-status-discovery-primary-translucent-default: var(--nj-core-color-reference-status-discovery-alpha-0);
  --nj-semantic-color-background-status-discovery-primary-translucent-hovered: var(--nj-core-color-reference-status-discovery-alpha-200);
  --nj-semantic-color-background-status-discovery-primary-translucent-focused: var(--nj-core-color-reference-status-discovery-alpha-200);
  --nj-semantic-color-background-status-discovery-primary-translucent-pressed: var(--nj-core-color-reference-status-discovery-alpha-300);
  --nj-semantic-color-background-status-discovery-primary-translucent-selected: var(--nj-core-color-reference-status-discovery-alpha-200);
  --nj-semantic-color-background-status-discovery-secondary-default: var(--nj-core-color-reference-status-discovery-100);
  --nj-semantic-color-background-status-discovery-secondary-hovered: var(--nj-core-color-reference-status-discovery-200);
  --nj-semantic-color-background-status-discovery-secondary-focused: var(--nj-core-color-reference-status-discovery-200);
  --nj-semantic-color-background-status-discovery-secondary-pressed: var(--nj-core-color-reference-status-discovery-300);
  --nj-semantic-color-background-status-discovery-tertiary-default: var(--nj-core-color-reference-status-discovery-200);
  --nj-semantic-color-background-status-discovery-tertiary-hovered: var(--nj-core-color-reference-status-discovery-300);
  --nj-semantic-color-background-status-discovery-tertiary-focused: var(--nj-core-color-reference-status-discovery-300);
  --nj-semantic-color-background-status-discovery-tertiary-pressed: var(--nj-core-color-reference-status-discovery-400);
  --nj-semantic-color-background-status-discovery-tertiary-translucent-default: var(--nj-core-color-reference-status-discovery-alpha-200);
  --nj-semantic-color-background-status-discovery-tertiary-translucent-hovered: var(--nj-core-color-reference-status-discovery-alpha-300);
  --nj-semantic-color-background-status-discovery-tertiary-translucent-focused: var(--nj-core-color-reference-status-discovery-alpha-300);
  --nj-semantic-color-background-status-discovery-tertiary-translucent-pressed: var(--nj-core-color-reference-status-discovery-alpha-400);
  --nj-semantic-color-background-status-discovery-solid-default: var(--nj-core-color-reference-status-discovery-600); /* Employed to highlight discovery or exploration-related content in your interface. Use to draw attention to new features, recommendations, or content suggestions. Invites users to explore and engage with new offerings, creating an exciting and engaging experience. */
  --nj-semantic-color-background-status-discovery-solid-hovered: var(--nj-core-color-reference-status-discovery-700);
  --nj-semantic-color-background-status-discovery-solid-focused: var(--nj-core-color-reference-status-discovery-700);
  --nj-semantic-color-background-status-discovery-solid-pressed: var(--nj-core-color-reference-status-discovery-800);
  --nj-semantic-color-background-status-discovery-spotlight-default: var(--nj-core-color-reference-status-discovery-900);
  --nj-semantic-color-background-status-information-primary-translucent-default: var(--nj-core-color-reference-status-information-alpha-0);
  --nj-semantic-color-background-status-information-primary-translucent-hovered: var(--nj-core-color-reference-status-information-alpha-200);
  --nj-semantic-color-background-status-information-primary-translucent-focused: var(--nj-core-color-reference-status-information-alpha-200);
  --nj-semantic-color-background-status-information-primary-translucent-pressed: var(--nj-core-color-reference-status-information-alpha-300);
  --nj-semantic-color-background-status-information-primary-translucent-selected: var(--nj-core-color-reference-status-information-alpha-200);
  --nj-semantic-color-background-status-information-solid-default: var(--nj-core-color-reference-status-information-600); /* Used for informational elements in your interface. Conveys non-critical information or provides additional details. Use for components or supplementary content that enhances the user's understanding of the interface without causing distraction. */
  --nj-semantic-color-background-status-information-solid-hovered: var(--nj-core-color-reference-status-information-700);
  --nj-semantic-color-background-status-information-solid-focused: var(--nj-core-color-reference-status-information-700);
  --nj-semantic-color-background-status-information-solid-pressed: var(--nj-core-color-reference-status-information-800);
  --nj-semantic-color-background-status-information-secondary-default: var(--nj-core-color-reference-status-information-100);
  --nj-semantic-color-background-status-information-secondary-hovered: var(--nj-core-color-reference-status-information-200);
  --nj-semantic-color-background-status-information-secondary-focused: var(--nj-core-color-reference-status-information-200);
  --nj-semantic-color-background-status-information-secondary-pressed: var(--nj-core-color-reference-status-information-300);
  --nj-semantic-color-background-status-information-tertiary-default: var(--nj-core-color-reference-status-information-200);
  --nj-semantic-color-background-status-information-tertiary-hovered: var(--nj-core-color-reference-status-information-300);
  --nj-semantic-color-background-status-information-tertiary-focused: var(--nj-core-color-reference-status-information-300);
  --nj-semantic-color-background-status-information-tertiary-pressed: var(--nj-core-color-reference-status-information-400);
  --nj-semantic-color-background-status-information-tertiary-translucent-default: var(--nj-core-color-reference-status-information-alpha-200);
  --nj-semantic-color-background-status-information-tertiary-translucent-hovered: var(--nj-core-color-reference-status-information-alpha-300);
  --nj-semantic-color-background-status-information-tertiary-translucent-focused: var(--nj-core-color-reference-status-information-alpha-300);
  --nj-semantic-color-background-status-information-tertiary-translucent-pressed: var(--nj-core-color-reference-status-information-alpha-400);
  --nj-semantic-color-background-status-information-spotlight-default: var(--nj-core-color-reference-status-information-900);
  --nj-semantic-color-background-status-planet-primary-translucent-default: var(--nj-core-color-reference-status-planet-alpha-0);
  --nj-semantic-color-background-status-planet-primary-translucent-hovered: var(--nj-core-color-reference-status-planet-alpha-200);
  --nj-semantic-color-background-status-planet-primary-translucent-focused: var(--nj-core-color-reference-status-planet-alpha-200);
  --nj-semantic-color-background-status-planet-primary-translucent-pressed: var(--nj-core-color-reference-status-planet-alpha-300);
  --nj-semantic-color-background-status-planet-primary-translucent-selected: var(--nj-core-color-reference-status-planet-alpha-200);
  --nj-semantic-color-background-status-planet-solid-default: var(--nj-core-color-reference-status-planet-600);
  --nj-semantic-color-background-status-planet-solid-hovered: var(--nj-core-color-reference-status-planet-700);
  --nj-semantic-color-background-status-planet-solid-pressed: var(--nj-core-color-reference-status-planet-800);
  --nj-semantic-color-background-status-planet-solid-focused: var(--nj-core-color-reference-status-planet-700);
  --nj-semantic-color-background-status-planet-secondary-default: var(--nj-core-color-reference-status-planet-100);
  --nj-semantic-color-background-status-planet-secondary-hovered: var(--nj-core-color-reference-status-planet-200);
  --nj-semantic-color-background-status-planet-secondary-focused: var(--nj-core-color-reference-status-planet-200);
  --nj-semantic-color-background-status-planet-secondary-pressed: var(--nj-core-color-reference-status-planet-300);
  --nj-semantic-color-background-status-planet-tertiary-default: var(--nj-core-color-reference-status-planet-200);
  --nj-semantic-color-background-status-planet-tertiary-hovered: var(--nj-core-color-reference-status-planet-300);
  --nj-semantic-color-background-status-planet-tertiary-focused: var(--nj-core-color-reference-status-planet-300);
  --nj-semantic-color-background-status-planet-tertiary-pressed: var(--nj-core-color-reference-status-planet-400);
  --nj-semantic-color-background-status-planet-tertiary-translucent-default: var(--nj-core-color-reference-status-planet-alpha-200);
  --nj-semantic-color-background-status-planet-tertiary-translucent-hovered: var(--nj-core-color-reference-status-planet-alpha-300);
  --nj-semantic-color-background-status-planet-tertiary-translucent-focused: var(--nj-core-color-reference-status-planet-alpha-300);
  --nj-semantic-color-background-status-planet-tertiary-translucent-pressed: var(--nj-core-color-reference-status-planet-alpha-400);
  --nj-semantic-color-background-status-planet-spotlight-default: var(--nj-core-color-reference-status-planet-900);
  --nj-semantic-color-border-neutral-minimal-default: var(--nj-core-color-reference-neutral-200); /* Almost imperceptible, provides a gentle visual separation between elements without drawing much attention to itself. Used for separators. */
  --nj-semantic-color-border-neutral-minimal-hovered: var(--nj-core-color-reference-neutral-300);
  --nj-semantic-color-border-neutral-minimal-focused: var(--nj-core-color-reference-neutral-300);
  --nj-semantic-color-border-neutral-minimal-pressed: var(--nj-core-color-reference-neutral-400);
  --nj-semantic-color-border-neutral-minimal-selected: var(--nj-core-color-reference-neutral-400);
  --nj-semantic-color-border-neutral-subtle-default: var(--nj-core-color-reference-neutral-300); /* Offers a subtle visual distinction between elements, without overpowering the content. Used for separators and cards. */
  --nj-semantic-color-border-neutral-subtle-hovered: var(--nj-core-color-reference-neutral-400);
  --nj-semantic-color-border-neutral-subtle-focused: var(--nj-core-color-reference-neutral-400);
  --nj-semantic-color-border-neutral-subtle-pressed: var(--nj-core-color-reference-neutral-500);
  --nj-semantic-color-border-neutral-subtle-selected: var(--nj-core-color-reference-neutral-500);
  --nj-semantic-color-border-neutral-moderate-default: var(--nj-core-color-reference-neutral-400); /* Provides a clear separation between elements, ensuring they stand out without becoming too overwhelming. Use for tags and inputs. */
  --nj-semantic-color-border-neutral-moderate-hovered: var(--nj-core-color-reference-neutral-500);
  --nj-semantic-color-border-neutral-moderate-focused: var(--nj-core-color-reference-neutral-500);
  --nj-semantic-color-border-neutral-moderate-pressed: var(--nj-core-color-reference-neutral-600);
  --nj-semantic-color-border-neutral-moderate-selected: var(--nj-core-color-reference-neutral-600);
  --nj-semantic-color-border-neutral-strong-default: var(--nj-core-color-reference-neutral-600); /* Bold border, creates a striking visual division between elements. Use for notifications, inline messages and focus ring. */
  --nj-semantic-color-border-neutral-strong-hovered: var(--nj-core-color-reference-neutral-700);
  --nj-semantic-color-border-neutral-strong-focused: var(--nj-core-color-reference-neutral-700);
  --nj-semantic-color-border-neutral-strong-pressed: var(--nj-core-color-reference-neutral-800);
  --nj-semantic-color-border-neutral-strong-selected: var(--nj-core-color-reference-neutral-800);
  --nj-semantic-color-border-neutral-heavy-default: var(--nj-core-color-reference-neutral-900); /* Highest level of visual differentiation. Has a strong contrast with the background, making it visually prominent and attention-grabbing. Use for important alerts. */
  --nj-semantic-color-border-neutral-inverse-default: var(--nj-core-color-reference-neutral-0); /* Allows the application of a border when used on a contrasted background. Use for inverse buttons or inverse cards. */
  --nj-semantic-color-border-neutral-inverse-hovered: var(--nj-core-color-reference-neutral-200);
  --nj-semantic-color-border-neutral-inverse-focused: var(--nj-core-color-reference-neutral-200);
  --nj-semantic-color-border-neutral-inverse-pressed: var(--nj-core-color-reference-neutral-300);
  --nj-semantic-color-border-neutral-inverse-selected: var(--nj-core-color-reference-neutral-300);
  --nj-semantic-color-border-brand-subtle-default: var(--nj-core-color-reference-brand-300); /* Provides a gentle visual separation between elements, with a touch of Engie's brand identity.Suitable for elements where a subtle brand presence is desired. */
  --nj-semantic-color-border-brand-subtle-hovered: var(--nj-core-color-reference-brand-400);
  --nj-semantic-color-border-brand-subtle-focused: var(--nj-core-color-reference-brand-400);
  --nj-semantic-color-border-brand-subtle-pressed: var(--nj-core-color-reference-brand-500);
  --nj-semantic-color-border-brand-subtle-selected: var(--nj-core-color-reference-brand-500);
  --nj-semantic-color-border-brand-moderate-default: var(--nj-core-color-reference-brand-400); /* Provides a clear separation between elements with the brand identity. Use for tags and inputs. */
  --nj-semantic-color-border-brand-moderate-hovered: var(--nj-core-color-reference-brand-500);
  --nj-semantic-color-border-brand-moderate-focused: var(--nj-core-color-reference-brand-500);
  --nj-semantic-color-border-brand-moderate-pressed: var(--nj-core-color-reference-brand-600);
  --nj-semantic-color-border-brand-moderate-selected: var(--nj-core-color-reference-brand-600);
  --nj-semantic-color-border-brand-strong-default: var(--nj-core-color-reference-brand-600); /* Bold brand border, creates a striking visual division between elements. Use for borders or visual indicators of elements that reinforce Engie's brand, such as notifications, inline messages and focus ring. */
  --nj-semantic-color-border-brand-strong-hovered: var(--nj-core-color-reference-brand-700);
  --nj-semantic-color-border-brand-strong-focused: var(--nj-core-color-reference-brand-700);
  --nj-semantic-color-border-brand-strong-pressed: var(--nj-core-color-reference-brand-800);
  --nj-semantic-color-border-brand-strong-selected: var(--nj-core-color-reference-brand-800);
  --nj-semantic-color-border-status-danger-subtle-default: var(--nj-core-color-reference-status-danger-300); /* Subtle way to communicate critical information without overpowering the content. Use for separators and cards. */
  --nj-semantic-color-border-status-danger-subtle-hovered: var(--nj-core-color-reference-status-danger-400);
  --nj-semantic-color-border-status-danger-subtle-focused: var(--nj-core-color-reference-status-danger-400);
  --nj-semantic-color-border-status-danger-subtle-pressed: var(--nj-core-color-reference-status-danger-500);
  --nj-semantic-color-border-status-danger-subtle-selected: var(--nj-core-color-reference-status-danger-500);
  --nj-semantic-color-border-status-danger-moderate-default: var(--nj-core-color-reference-status-danger-400); /* Communicates critical information in your interface. Provides a clear separation between elements, ensuring they stand out without becoming too overwhelming. Use for tags and inputs. */
  --nj-semantic-color-border-status-danger-moderate-hovered: var(--nj-core-color-reference-status-danger-500);
  --nj-semantic-color-border-status-danger-moderate-focused: var(--nj-core-color-reference-status-danger-500);
  --nj-semantic-color-border-status-danger-moderate-pressed: var(--nj-core-color-reference-status-danger-600);
  --nj-semantic-color-border-status-danger-moderate-selected: var(--nj-core-color-reference-status-danger-600);
  --nj-semantic-color-border-status-danger-strong-default: var(--nj-core-color-reference-status-danger-600); /* Intended to indicate a state of danger or criticality in your interface. Use for elements that require immediate attention due to errors, warnings, or potentially harmful actions. Serves as a powerful visual cue to alert users to potential issues and encourages careful consideration of their actions. */
  --nj-semantic-color-border-status-danger-strong-hovered: var(--nj-core-color-reference-status-danger-700);
  --nj-semantic-color-border-status-danger-strong-focused: var(--nj-core-color-reference-status-danger-700);
  --nj-semantic-color-border-status-danger-strong-pressed: var(--nj-core-color-reference-status-danger-800);
  --nj-semantic-color-border-status-danger-strong-selected: var(--nj-core-color-reference-status-danger-800);
  --nj-semantic-color-border-status-warning-subtle-default: var(--nj-core-color-reference-status-warning-300); /* Subtle way to communicate warning information without overpowering the content. Use for separators and cards. */
  --nj-semantic-color-border-status-warning-subtle-hovered: var(--nj-core-color-reference-status-warning-400);
  --nj-semantic-color-border-status-warning-subtle-focused: var(--nj-core-color-reference-status-warning-400);
  --nj-semantic-color-border-status-warning-subtle-pressed: var(--nj-core-color-reference-status-warning-500);
  --nj-semantic-color-border-status-warning-subtle-selected: var(--nj-core-color-reference-status-warning-500);
  --nj-semantic-color-border-status-warning-moderate-default: var(--nj-core-color-reference-status-warning-400); /* Communicates warning information in your interface. Provides a clear separation between elements, ensuring they stand out without becoming too overwhelming. */
  --nj-semantic-color-border-status-warning-moderate-hovered: var(--nj-core-color-reference-status-warning-500);
  --nj-semantic-color-border-status-warning-moderate-focused: var(--nj-core-color-reference-status-warning-500);
  --nj-semantic-color-border-status-warning-moderate-pressed: var(--nj-core-color-reference-status-warning-600);
  --nj-semantic-color-border-status-warning-moderate-selected: var(--nj-core-color-reference-status-warning-600);
  --nj-semantic-color-border-status-warning-strong-default: var(--nj-core-color-reference-status-warning-600); /* Conveys a warning or cautionary state in your interface. Use for elements that signify non-critical but important information, such as alerts, notices, or reminders. Helps users recognize situations that require their attention without implying immediate danger. */
  --nj-semantic-color-border-status-warning-strong-hovered: var(--nj-core-color-reference-status-warning-700);
  --nj-semantic-color-border-status-warning-strong-focused: var(--nj-core-color-reference-status-warning-700);
  --nj-semantic-color-border-status-warning-strong-pressed: var(--nj-core-color-reference-status-warning-800);
  --nj-semantic-color-border-status-warning-strong-selected: var(--nj-core-color-reference-status-warning-800);
  --nj-semantic-color-border-status-success-subtle-default: var(--nj-core-color-reference-status-success-300); /* Subtle way to communicate success information or positive states without overpowering the content. Use for separators and cards. */
  --nj-semantic-color-border-status-success-subtle-hovered: var(--nj-core-color-reference-status-success-400);
  --nj-semantic-color-border-status-success-subtle-focused: var(--nj-core-color-reference-status-success-400);
  --nj-semantic-color-border-status-success-subtle-pressed: var(--nj-core-color-reference-status-success-500);
  --nj-semantic-color-border-status-success-subtle-selected: var(--nj-core-color-reference-status-success-500);
  --nj-semantic-color-border-status-success-moderate-default: var(--nj-core-color-reference-status-success-400); /* Communicates successful or positive states in your interface. Provides a clear separation between elements, ensuring they stand out without becoming too overwhelming. */
  --nj-semantic-color-border-status-success-moderate-hovered: var(--nj-core-color-reference-status-success-500);
  --nj-semantic-color-border-status-success-moderate-focused: var(--nj-core-color-reference-status-success-500);
  --nj-semantic-color-border-status-success-moderate-pressed: var(--nj-core-color-reference-status-success-600);
  --nj-semantic-color-border-status-success-moderate-selected: var(--nj-core-color-reference-status-success-600);
  --nj-semantic-color-border-status-success-strong-default: var(--nj-core-color-reference-status-success-600); /* Associated with successful or positive states in your interface. Apply it to elements or components that confirm successful actions or completion of tasks. */
  --nj-semantic-color-border-status-success-strong-hovered: var(--nj-core-color-reference-status-success-700);
  --nj-semantic-color-border-status-success-strong-focused: var(--nj-core-color-reference-status-success-700);
  --nj-semantic-color-border-status-success-strong-pressed: var(--nj-core-color-reference-status-success-800);
  --nj-semantic-color-border-status-success-strong-selected: var(--nj-core-color-reference-status-success-800);
  --nj-semantic-color-border-status-discovery-subtle-default: var(--nj-core-color-reference-status-discovery-300); /* Subtle way to highlight discovery or exploration-related content in your interface without overpowering the content. Use for separators and cards. */
  --nj-semantic-color-border-status-discovery-subtle-hovered: var(--nj-core-color-reference-status-discovery-400);
  --nj-semantic-color-border-status-discovery-subtle-focused: var(--nj-core-color-reference-status-discovery-400);
  --nj-semantic-color-border-status-discovery-subtle-pressed: var(--nj-core-color-reference-status-discovery-500);
  --nj-semantic-color-border-status-discovery-subtle-selected: var(--nj-core-color-reference-status-discovery-500);
  --nj-semantic-color-border-status-discovery-moderate-default: var(--nj-core-color-reference-status-discovery-400); /* Highlights discovery or communicates exploration-related content in your interface. Provides a clear separation between elements, ensuring they stand out without becoming too overwhelming. */
  --nj-semantic-color-border-status-discovery-moderate-hovered: var(--nj-core-color-reference-status-discovery-500);
  --nj-semantic-color-border-status-discovery-moderate-focused: var(--nj-core-color-reference-status-discovery-500);
  --nj-semantic-color-border-status-discovery-moderate-pressed: var(--nj-core-color-reference-status-discovery-600);
  --nj-semantic-color-border-status-discovery-moderate-selected: var(--nj-core-color-reference-status-discovery-600);
  --nj-semantic-color-border-status-discovery-strong-default: var(--nj-core-color-reference-status-discovery-600); /* Employed to highlight discovery or exploration-related content in your interface. Use to draw attention to new features, recommendations, or content suggestions. Invites users to explore and engage with new offerings, creating an exciting and engaging experience. */
  --nj-semantic-color-border-status-discovery-strong-hovered: var(--nj-core-color-reference-status-discovery-700);
  --nj-semantic-color-border-status-discovery-strong-focused: var(--nj-core-color-reference-status-discovery-700);
  --nj-semantic-color-border-status-discovery-strong-pressed: var(--nj-core-color-reference-status-discovery-800);
  --nj-semantic-color-border-status-discovery-strong-selected: var(--nj-core-color-reference-status-discovery-800);
  --nj-semantic-color-border-status-information-subtle-default: var(--nj-core-color-reference-status-information-300); /* Subtle way to highlight informational elements in your interface without overpowering the content. Use for separators and cards. */
  --nj-semantic-color-border-status-information-subtle-hovered: var(--nj-core-color-reference-status-information-400);
  --nj-semantic-color-border-status-information-subtle-focused: var(--nj-core-color-reference-status-information-400);
  --nj-semantic-color-border-status-information-subtle-pressed: var(--nj-core-color-reference-status-information-500);
  --nj-semantic-color-border-status-information-subtle-selected: var(--nj-core-color-reference-status-information-500);
  --nj-semantic-color-border-status-information-moderate-default: var(--nj-core-color-reference-status-information-400); /* Highlights informational elements in your interface. Provides a clear separation between elements, ensuring they stand out without becoming too overwhelming. */
  --nj-semantic-color-border-status-information-moderate-hovered: var(--nj-core-color-reference-status-information-500);
  --nj-semantic-color-border-status-information-moderate-focused: var(--nj-core-color-reference-status-information-500);
  --nj-semantic-color-border-status-information-moderate-pressed: var(--nj-core-color-reference-status-information-600);
  --nj-semantic-color-border-status-information-moderate-selected: var(--nj-core-color-reference-status-information-600);
  --nj-semantic-color-border-status-information-strong-default: var(--nj-core-color-reference-status-information-600); /* Used for informational elements in your interface. Conveys non-critical information or provides additional details. Use for components or supplementary content that enhances the user's understanding of the interface without causing distraction. */
  --nj-semantic-color-border-status-information-strong-hovered: var(--nj-core-color-reference-status-information-700);
  --nj-semantic-color-border-status-information-strong-focused: var(--nj-core-color-reference-status-information-700);
  --nj-semantic-color-border-status-information-strong-pressed: var(--nj-core-color-reference-status-information-800);
  --nj-semantic-color-border-status-information-strong-selected: var(--nj-core-color-reference-status-information-800);
  --nj-semantic-color-border-status-planet-subtle-default: var(--nj-core-color-reference-status-planet-300);
  --nj-semantic-color-border-status-planet-subtle-hovered: var(--nj-core-color-reference-status-planet-400);
  --nj-semantic-color-border-status-planet-subtle-focused: var(--nj-core-color-reference-status-planet-400);
  --nj-semantic-color-border-status-planet-subtle-pressed: var(--nj-core-color-reference-status-planet-500);
  --nj-semantic-color-border-status-planet-subtle-selected: var(--nj-core-color-reference-status-planet-500);
  --nj-semantic-color-border-status-planet-moderate-default: var(--nj-core-color-reference-status-planet-400);
  --nj-semantic-color-border-status-planet-moderate-hovered: var(--nj-core-color-reference-status-planet-500);
  --nj-semantic-color-border-status-planet-moderate-focused: var(--nj-core-color-reference-status-planet-500);
  --nj-semantic-color-border-status-planet-moderate-pressed: var(--nj-core-color-reference-status-planet-600);
  --nj-semantic-color-border-status-planet-moderate-selected: var(--nj-core-color-reference-status-planet-600);
  --nj-semantic-color-border-status-planet-strong-default: var(--nj-core-color-reference-status-planet-600);
  --nj-semantic-color-border-status-planet-strong-hovered: var(--nj-core-color-reference-status-planet-700);
  --nj-semantic-color-border-status-planet-strong-focused: var(--nj-core-color-reference-status-planet-700);
  --nj-semantic-color-border-status-planet-strong-pressed: var(--nj-core-color-reference-status-planet-800);
  --nj-semantic-color-border-status-planet-strong-selected: var(--nj-core-color-reference-status-planet-800);
  --nj-semantic-color-icon-neutral-primary-default: var(--nj-core-color-reference-neutral-1000); /* Use for visible and prominent icons, ensures they are easily recognizable and stand out. Typically used for essential actions or navigation elements that require immediate user attention. */
  --nj-semantic-color-icon-neutral-primary-hovered: var(--nj-core-color-reference-brand-700);
  --nj-semantic-color-icon-neutral-primary-focused: var(--nj-core-color-reference-brand-700);
  --nj-semantic-color-icon-neutral-primary-pressed: var(--nj-core-color-reference-brand-800);
  --nj-semantic-color-icon-neutral-secondary-default: var(--nj-core-color-reference-neutral-800); /* Use for less visible icons, offering a subtle presence that complements the primary content. Used for secondary actions or to support elements within the interface. */
  --nj-semantic-color-icon-neutral-secondary-hovered: var(--nj-core-color-reference-neutral-900);
  --nj-semantic-color-icon-neutral-secondary-focused: var(--nj-core-color-reference-neutral-900);
  --nj-semantic-color-icon-neutral-secondary-pressed: var(--nj-core-color-reference-neutral-1000);
  --nj-semantic-color-icon-neutral-tertiary-default: var(--nj-core-color-reference-neutral-600); /* Use for icons with even lower visibility, providing a more understated appearance. These icons are used for tertiary actions or optional elements, contributing to a more streamlined and unobtrusive user experience. */
  --nj-semantic-color-icon-neutral-tertiary-hovered: var(--nj-core-color-reference-neutral-700);
  --nj-semantic-color-icon-neutral-tertiary-focused: var(--nj-core-color-reference-neutral-700);
  --nj-semantic-color-icon-neutral-tertiary-pressed: var(--nj-core-color-reference-neutral-800);
  --nj-semantic-color-icon-neutral-contrast-default: var(--nj-core-color-reference-neutral-700); /* These icons utilizes higher contrast or distinct visual treatments to create emphasis and draw attention. It is employed for icons that require enhanced visibility or a stronger visual impact. */
  --nj-semantic-color-icon-neutral-contrast-hovered: var(--nj-core-color-reference-neutral-800);
  --nj-semantic-color-icon-neutral-contrast-focused: var(--nj-core-color-reference-neutral-800);
  --nj-semantic-color-icon-neutral-contrast-pressed: var(--nj-core-color-reference-neutral-900);
  --nj-semantic-color-icon-neutral-inverse-default: var(--nj-core-color-reference-neutral-0); /* Use for icons on dark backgrounds. Ensures readability and visual appeal, particularly in scenarios where icons are placed on contrasting surfaces. */
  --nj-semantic-color-icon-neutral-inverse-hovered: var(--nj-core-color-reference-neutral-200);
  --nj-semantic-color-icon-neutral-inverse-focused: var(--nj-core-color-reference-neutral-200);
  --nj-semantic-color-icon-neutral-inverse-pressed: var(--nj-core-color-reference-neutral-300);
  --nj-semantic-color-icon-brand-primary-default: var(--nj-core-color-reference-brand-600);
  --nj-semantic-color-icon-brand-primary-hovered: var(--nj-core-color-reference-brand-700);
  --nj-semantic-color-icon-brand-primary-focused: var(--nj-core-color-reference-brand-700);
  --nj-semantic-color-icon-brand-primary-pressed: var(--nj-core-color-reference-brand-800);
  --nj-semantic-color-icon-brand-contrast-default: var(--nj-core-color-reference-brand-700);
  --nj-semantic-color-icon-brand-contrast-hovered: var(--nj-core-color-reference-brand-800);
  --nj-semantic-color-icon-brand-contrast-focused: var(--nj-core-color-reference-brand-800);
  --nj-semantic-color-icon-brand-contrast-pressed: var(--nj-core-color-reference-brand-900);
  --nj-semantic-color-icon-status-danger-primary-default: var(--nj-core-color-reference-status-danger-600);
  --nj-semantic-color-icon-status-danger-primary-hovered: var(--nj-core-color-reference-status-danger-700);
  --nj-semantic-color-icon-status-danger-primary-focused: var(--nj-core-color-reference-status-danger-700);
  --nj-semantic-color-icon-status-danger-primary-pressed: var(--nj-core-color-reference-status-danger-800);
  --nj-semantic-color-icon-status-danger-contrast-default: var(--nj-core-color-reference-status-danger-800);
  --nj-semantic-color-icon-status-success-primary-default: var(--nj-core-color-reference-status-success-600);
  --nj-semantic-color-icon-status-success-primary-hovered: var(--nj-core-color-reference-status-success-700);
  --nj-semantic-color-icon-status-success-primary-focused: var(--nj-core-color-reference-status-success-700);
  --nj-semantic-color-icon-status-success-primary-pressed: var(--nj-core-color-reference-status-success-800);
  --nj-semantic-color-icon-status-success-contrast-default: var(--nj-core-color-reference-status-success-800);
  --nj-semantic-color-icon-status-warning-primary-default: var(--nj-core-color-reference-status-warning-600);
  --nj-semantic-color-icon-status-warning-primary-hovered: var(--nj-core-color-reference-status-warning-700);
  --nj-semantic-color-icon-status-warning-primary-focused: var(--nj-core-color-reference-status-warning-700);
  --nj-semantic-color-icon-status-warning-primary-pressed: var(--nj-core-color-reference-status-warning-800);
  --nj-semantic-color-icon-status-warning-contrast-default: var(--nj-core-color-reference-status-warning-800);
  --nj-semantic-color-icon-status-discovery-primary-default: var(--nj-core-color-reference-status-discovery-600);
  --nj-semantic-color-icon-status-discovery-primary-hovered: var(--nj-core-color-reference-status-discovery-700);
  --nj-semantic-color-icon-status-discovery-primary-focused: var(--nj-core-color-reference-status-discovery-700);
  --nj-semantic-color-icon-status-discovery-primary-pressed: var(--nj-core-color-reference-status-discovery-800);
  --nj-semantic-color-icon-status-discovery-contrast-default: var(--nj-core-color-reference-status-discovery-800);
  --nj-semantic-color-icon-status-information-primary-default: var(--nj-core-color-reference-status-information-600);
  --nj-semantic-color-icon-status-information-primary-hovered: var(--nj-core-color-reference-status-information-700);
  --nj-semantic-color-icon-status-information-primary-focused: var(--nj-core-color-reference-status-information-700);
  --nj-semantic-color-icon-status-information-primary-pressed: var(--nj-core-color-reference-status-information-800);
  --nj-semantic-color-icon-status-information-contrast-default: var(--nj-core-color-reference-status-information-800);
  --nj-semantic-color-icon-status-planet-primary-default: var(--nj-core-color-reference-status-planet-600);
  --nj-semantic-color-icon-status-planet-primary-hovered: var(--nj-core-color-reference-status-planet-700);
  --nj-semantic-color-icon-status-planet-primary-focused: var(--nj-core-color-reference-status-planet-700);
  --nj-semantic-color-icon-status-planet-primary-pressed: var(--nj-core-color-reference-status-planet-800);
  --nj-semantic-color-icon-status-planet-contrast-default: var(--nj-core-color-reference-status-planet-800);
  --nj-semantic-color-text-neutral-primary-default: var(--nj-core-color-reference-neutral-1000); /* Reserved for the most critical and visually prominent content in the interface. Should be employed for elements like page titles and section headings, where it commands attention and establishes hierarchy. */
  --nj-semantic-color-text-neutral-primary-hovered: var(--nj-core-color-reference-brand-700);
  --nj-semantic-color-text-neutral-primary-focused: var(--nj-core-color-reference-brand-700);
  --nj-semantic-color-text-neutral-primary-pressed: var(--nj-core-color-reference-brand-800);
  --nj-semantic-color-text-neutral-primary-not-invertible-default: var(--nj-core-color-reference-neutral-1000);
  --nj-semantic-color-text-neutral-primary-not-invertible-hovered: var(--nj-core-color-reference-brand-600);
  --nj-semantic-color-text-neutral-primary-not-invertible-focused: var(--nj-core-color-reference-brand-600);
  --nj-semantic-color-text-neutral-primary-not-invertible-pressed: var(--nj-core-color-reference-brand-700);
  --nj-semantic-color-text-neutral-secondary-default: var(--nj-core-color-reference-neutral-800); /* Harmonious and legible contrast for various content types. Well-suited for subtitles, subheadings, and regular content, ensures a balanced and readable appearance throughout the interface. */
  --nj-semantic-color-text-neutral-tertiary-default: var(--nj-core-color-reference-neutral-600); /* Slightly lighter, suitable for secondary subtitles or contextual information. Ideal for additional information. */
  --nj-semantic-color-text-neutral-tertiary-hovered: var(--nj-core-color-reference-brand-700);
  --nj-semantic-color-text-neutral-tertiary-focused: var(--nj-core-color-reference-brand-700);
  --nj-semantic-color-text-neutral-tertiary-pressed: var(--nj-core-color-reference-brand-800);
  --nj-semantic-color-text-neutral-contrast-default: var(--nj-core-color-reference-neutral-700); /* Emphasizes elements with higher contrast to create visual hierarchy and draw attention. */
  --nj-semantic-color-text-neutral-contrast-hovered: var(--nj-core-color-reference-brand-800);
  --nj-semantic-color-text-neutral-contrast-focused: var(--nj-core-color-reference-brand-800);
  --nj-semantic-color-text-neutral-contrast-pressed: var(--nj-core-color-reference-brand-900);
  --nj-semantic-color-text-neutral-inverse-default: var(--nj-core-color-reference-neutral-0); /* Used for light text on a dark background for readability and visual appeal in specific UI components. */
  --nj-semantic-color-text-neutral-inverse-hovered: var(--nj-core-color-reference-neutral-200);
  --nj-semantic-color-text-neutral-inverse-focused: var(--nj-core-color-reference-neutral-200);
  --nj-semantic-color-text-neutral-inverse-pressed: var(--nj-core-color-reference-neutral-300);
  --nj-semantic-color-text-neutral-inverse-not-invertible-default: var(--nj-core-color-reference-neutral-0);
  --nj-semantic-color-text-neutral-inverse-not-invertible-hovered: var(--nj-core-color-reference-neutral-200);
  --nj-semantic-color-text-neutral-inverse-not-invertible-focused: var(--nj-core-color-reference-neutral-200);
  --nj-semantic-color-text-neutral-inverse-not-invertible-pressed: var(--nj-core-color-reference-neutral-300);
  --nj-semantic-color-text-brand-primary-default: var(--nj-core-color-reference-brand-600); /* Powerful tool to reinforce the brand's presence and create visual emphasis. Use strategically for text elements that are central to the brand identity or require heightened attention, such as brand names, key headlines, or links. */
  --nj-semantic-color-text-brand-primary-hovered: var(--nj-core-color-reference-brand-700);
  --nj-semantic-color-text-brand-primary-focused: var(--nj-core-color-reference-brand-700);
  --nj-semantic-color-text-brand-primary-pressed: var(--nj-core-color-reference-brand-800);
  --nj-semantic-color-text-brand-contrast-default: var(--nj-core-color-reference-brand-700); /* Used on secondary backgrounds to keep the the contrast ratio for accessibility reasons. */
  --nj-semantic-color-text-brand-contrast-hovered: var(--nj-core-color-reference-brand-800);
  --nj-semantic-color-text-brand-contrast-focused: var(--nj-core-color-reference-brand-800);
  --nj-semantic-color-text-brand-contrast-pressed: var(--nj-core-color-reference-brand-900);
  --nj-semantic-color-text-status-danger-primary-default: var(--nj-core-color-reference-status-danger-600);
  --nj-semantic-color-text-status-danger-primary-hovered: var(--nj-core-color-reference-status-danger-700);
  --nj-semantic-color-text-status-danger-primary-focused: var(--nj-core-color-reference-status-danger-700);
  --nj-semantic-color-text-status-danger-primary-pressed: var(--nj-core-color-reference-status-danger-800);
  --nj-semantic-color-text-status-danger-contrast-default: var(--nj-core-color-reference-status-danger-700);
  --nj-semantic-color-text-status-danger-contrast-hovered: var(--nj-core-color-reference-status-danger-800);
  --nj-semantic-color-text-status-danger-contrast-focused: var(--nj-core-color-reference-status-danger-800);
  --nj-semantic-color-text-status-danger-contrast-pressed: var(--nj-core-color-reference-status-danger-900);
  --nj-semantic-color-text-status-warning-primary-default: var(--nj-core-color-reference-status-warning-600);
  --nj-semantic-color-text-status-warning-primary-hovered: var(--nj-core-color-reference-status-warning-700);
  --nj-semantic-color-text-status-warning-primary-focused: var(--nj-core-color-reference-status-warning-700);
  --nj-semantic-color-text-status-warning-primary-pressed: var(--nj-core-color-reference-status-warning-800);
  --nj-semantic-color-text-status-warning-contrast-default: var(--nj-core-color-reference-status-warning-700);
  --nj-semantic-color-text-status-warning-contrast-hovered: var(--nj-core-color-reference-status-warning-800);
  --nj-semantic-color-text-status-warning-contrast-focused: var(--nj-core-color-reference-status-warning-800);
  --nj-semantic-color-text-status-warning-contrast-pressed: var(--nj-core-color-reference-status-warning-900);
  --nj-semantic-color-text-status-success-primary-default: var(--nj-core-color-reference-status-success-600);
  --nj-semantic-color-text-status-success-primary-hovered: var(--nj-core-color-reference-status-success-700);
  --nj-semantic-color-text-status-success-primary-focused: var(--nj-core-color-reference-status-success-700);
  --nj-semantic-color-text-status-success-primary-pressed: var(--nj-core-color-reference-status-success-800);
  --nj-semantic-color-text-status-success-contrast-default: var(--nj-core-color-reference-status-success-700);
  --nj-semantic-color-text-status-success-contrast-hovered: var(--nj-core-color-reference-status-success-800);
  --nj-semantic-color-text-status-success-contrast-focused: var(--nj-core-color-reference-status-success-800);
  --nj-semantic-color-text-status-success-contrast-pressed: var(--nj-core-color-reference-status-success-900);
  --nj-semantic-color-text-status-information-primary-default: var(--nj-core-color-reference-status-information-600);
  --nj-semantic-color-text-status-information-primary-hovered: var(--nj-core-color-reference-status-information-700);
  --nj-semantic-color-text-status-information-primary-focused: var(--nj-core-color-reference-status-information-700);
  --nj-semantic-color-text-status-information-primary-pressed: var(--nj-core-color-reference-status-information-800);
  --nj-semantic-color-text-status-information-contrast-default: var(--nj-core-color-reference-status-information-700);
  --nj-semantic-color-text-status-information-contrast-hovered: var(--nj-core-color-reference-status-information-800);
  --nj-semantic-color-text-status-information-contrast-focused: var(--nj-core-color-reference-status-information-800);
  --nj-semantic-color-text-status-information-contrast-pressed: var(--nj-core-color-reference-status-information-900);
  --nj-semantic-color-text-status-discovery-primary-default: var(--nj-core-color-reference-status-discovery-600);
  --nj-semantic-color-text-status-discovery-primary-hovered: var(--nj-core-color-reference-status-discovery-700);
  --nj-semantic-color-text-status-discovery-primary-focused: var(--nj-core-color-reference-status-discovery-700);
  --nj-semantic-color-text-status-discovery-primary-pressed: var(--nj-core-color-reference-status-discovery-800);
  --nj-semantic-color-text-status-discovery-contrast-default: var(--nj-core-color-reference-status-discovery-700);
  --nj-semantic-color-text-status-discovery-contrast-hovered: var(--nj-core-color-reference-status-discovery-800);
  --nj-semantic-color-text-status-discovery-contrast-focused: var(--nj-core-color-reference-status-discovery-800);
  --nj-semantic-color-text-status-discovery-contrast-pressed: var(--nj-core-color-reference-status-discovery-900);
  --nj-semantic-color-text-status-planet-primary-default: var(--nj-core-color-reference-status-planet-600);
  --nj-semantic-color-text-status-planet-primary-hovered: var(--nj-core-color-reference-status-planet-700);
  --nj-semantic-color-text-status-planet-primary-focused: var(--nj-core-color-reference-status-planet-700);
  --nj-semantic-color-text-status-planet-primary-pressed: var(--nj-core-color-reference-status-planet-800);
  --nj-semantic-color-text-status-planet-contrast-default: var(--nj-core-color-reference-status-planet-700);
  --nj-semantic-color-text-status-planet-contrast-hovered: var(--nj-core-color-reference-status-planet-800);
  --nj-semantic-color-text-status-planet-contrast-focused: var(--nj-core-color-reference-status-planet-800);
  --nj-semantic-color-text-status-planet-contrast-pressed: var(--nj-core-color-reference-status-planet-900);
  --nj-component-backdrop-color-background: var(--nj-core-color-reference-neutral-alpha-500);
}

[data-theme="dark"] {
  --nj-semantic-elevation-shadow-2-dp: 0 3px 0 rgba(0, 0, 0, .06),  0 2px 2px rgba(0, 0, 0, .3),  0 1px 5px rgba(0, 0, 0, .3);
  --nj-semantic-elevation-shadow-4-dp: 0 1px 10px rgba(0, 0, 0, .3),  0 4px 5px rgba(0, 0, 0, .3),  0 2px 4px rgba(0, 0, 0, .35);
  --nj-semantic-elevation-shadow-6-dp: 0 1px 18px rgba(0, 0, 0, .3),  0 6px 10px rgba(0, 0, 0, .3),  0 3px 5px rgba(0, 0, 0, .3);
  --nj-semantic-elevation-shadow-8-dp: 0 3px 14px rgba(0, 0, 0, .3),  0 8px 10px rgba(0, 0, 0, .3),  0 5px 5px rgba(0, 0, 0, .3);
  --nj-semantic-elevation-shadow-16-dp: 0 6px 30px rgba(0, 0, 0, .3),  0 16px 24px rgba(0, 0, 0, .3),  0 8px 10px rgba(0, 0, 0, .35);
  --nj-semantic-elevation-shadow-24-dp: 0 9px 46px rgba(0, 0, 0, .3),  0 24px 38px rgba(0, 0, 0, .3),  0 11px 15px rgba(0, 0, 0, .3);
  --nj-core-color-grey-0: #15191d;
  --nj-core-color-grey-100: #1a1f23;
  --nj-core-color-grey-200: #1f262b;
  --nj-core-color-grey-300: #2e3942;
  --nj-core-color-grey-400: #425663;
  --nj-core-color-grey-500: #5c7181;
  --nj-core-color-grey-600: #718492;
  --nj-core-color-grey-700: #97a5af;
  --nj-core-color-grey-800: #bcc4cb;
  --nj-core-color-grey-900: #e2e5e9;
  --nj-core-color-grey-1000: #fafafb;
  --nj-core-color-grey-alpha-0: rgba(0, 0, 0, 0);
  --nj-core-color-grey-alpha-100: rgba(188, 225, 229, 0.03);
  --nj-core-color-grey-alpha-200: rgba(164, 211, 229, 0.07);
  --nj-core-color-grey-alpha-300: rgba(168, 213, 247, 0.17);
  --nj-core-color-grey-alpha-400: rgba(166, 222, 255, 0.31);
  --nj-core-color-grey-alpha-500: rgba(179, 221, 251, 0.45);
  --nj-core-color-grey-alpha-inverse-0: rgba(0, 0, 0, 0);
  --nj-core-color-grey-alpha-inverse-100: rgba(30, 80, 105, 0.04);
  --nj-core-color-grey-alpha-inverse-200: rgba(5, 43, 80, 0.08);
  --nj-core-color-grey-alpha-inverse-300: rgba(0, 40, 70, 0.2);
  --nj-core-color-grey-alpha-inverse-400: rgba(6, 45, 73, 0.39);
  --nj-core-color-grey-alpha-inverse-500: rgba(3, 42, 70, 0.54);
  --nj-core-color-pink-100: #211d1e;
  --nj-core-color-pink-200: #2a2326;
  --nj-core-color-pink-300: #45333a;
  --nj-core-color-pink-400: #7b4159;
  --nj-core-color-pink-500: #c13c72;
  --nj-core-color-pink-600: #e44284;
  --nj-core-color-pink-700: #f779ad;
  --nj-core-color-pink-800: #fbaccc;
  --nj-core-color-pink-900: #fddcea;
  --nj-core-color-red-100: #321613;
  --nj-core-color-red-200: #411a16;
  --nj-core-color-red-300: #63221e;
  --nj-core-color-red-400: #95302c;
  --nj-core-color-red-500: #c3423c;
  --nj-core-color-red-600: #dd534b;
  --nj-core-color-red-700: #fa7e72;
  --nj-core-color-red-800: #ffaea3;
  --nj-core-color-red-900: #ffddd7;
  --nj-core-color-red-alpha-0: rgba(0, 0, 0, 0);
  --nj-core-color-red-alpha-100: rgba(104, 16, 0, 0.35);
  --nj-core-color-red-alpha-200: rgba(197, 29, 1, 0.25);
  --nj-core-color-red-alpha-300: rgba(250, 51, 32, 0.34);
  --nj-core-color-red-alpha-400: rgba(254, 67, 56, 0.55);
  --nj-core-color-orange-100: #2c1b12;
  --nj-core-color-orange-200: #372015;
  --nj-core-color-orange-300: #542f1b;
  --nj-core-color-orange-400: #7e4425;
  --nj-core-color-orange-500: #a85a31;
  --nj-core-color-orange-600: #c3693a;
  --nj-core-color-orange-700: #f08750;
  --nj-core-color-orange-800: #ffb182;
  --nj-core-color-orange-900: #ffdfc8;
  --nj-core-color-orange-alpha-0: rgba(0, 0, 0, 0);
  --nj-core-color-orange-alpha-100: rgba(82, 30, 0, 0.38);
  --nj-core-color-orange-alpha-200: rgba(142, 50, 0, 0.28);
  --nj-core-color-orange-alpha-300: rgba(254, 106, 22, 0.27);
  --nj-core-color-orange-alpha-400: rgba(254, 121, 47, 0.45);
  --nj-core-color-yellow-100: #251e13;
  --nj-core-color-yellow-200: #2c2416;
  --nj-core-color-yellow-300: #43361d;
  --nj-core-color-yellow-400: #655027;
  --nj-core-color-yellow-500: #866b32;
  --nj-core-color-yellow-600: #9d7d39;
  --nj-core-color-yellow-700: #c59d4a;
  --nj-core-color-yellow-800: #eabc5f;
  --nj-core-color-yellow-900: #ffe299;
  --nj-core-color-green-100: #102313;
  --nj-core-color-green-200: #112b16;
  --nj-core-color-green-300: #12401e;
  --nj-core-color-green-400: #12602b;
  --nj-core-color-green-500: #1d7f3c;
  --nj-core-color-green-600: #30934b;
  --nj-core-color-green-700: #63b473;
  --nj-core-color-green-800: #99d0a0;
  --nj-core-color-green-900: #d4ebd6;
  --nj-core-color-green-alpha-0: rgba(0, 0, 0, 0);
  --nj-core-color-green-alpha-100: rgba(7, 54, 0, 0.35);
  --nj-core-color-green-alpha-200: rgba(5, 97, 1, 0.25);
  --nj-core-color-green-alpha-300: rgba(3, 254, 35, 0.17);
  --nj-core-color-green-alpha-400: rgba(11, 254, 74, 0.31);
  --nj-core-color-blue-100: #111f2e;
  --nj-core-color-blue-200: #12263b;
  --nj-core-color-blue-300: #0f3a5e;
  --nj-core-color-blue-400: #04568e;
  --nj-core-color-blue-500: #1c73b6;
  --nj-core-color-blue-600: #3d85ca;
  --nj-core-color-blue-700: #77a6e1;
  --nj-core-color-blue-800: #a9c4ee;
  --nj-core-color-blue-900: #dbe5f8;
  --nj-core-color-blue-alpha-0: rgba(0, 0, 0, 0);
  --nj-core-color-blue-alpha-100: rgba(1, 55, 114, 0.2);
  --nj-core-color-blue-alpha-200: rgba(1, 112, 229, 0.15);
  --nj-core-color-blue-alpha-300: rgba(0, 139, 253, 0.29);
  --nj-core-color-blue-alpha-400: rgba(0, 100, 169, 0.81);
  --nj-core-color-ultramarine-100: #171d37;
  --nj-core-color-ultramarine-200: #17224b;
  --nj-core-color-ultramarine-300: #25346e;
  --nj-core-color-ultramarine-400: #3f508e;
  --nj-core-color-ultramarine-500: #5d6ca7;
  --nj-core-color-ultramarine-600: #717fb5;
  --nj-core-color-ultramarine-700: #96a2cc;
  --nj-core-color-ultramarine-800: #bbc2df;
  --nj-core-color-ultramarine-900: #e1e4f1;
  --nj-core-color-purple-100: #201d22;
  --nj-core-color-purple-200: #28232c;
  --nj-core-color-purple-300: #41324e;
  --nj-core-color-purple-400: #694288;
  --nj-core-color-purple-500: #875da9;
  --nj-core-color-purple-600: #9971b8;
  --nj-core-color-purple-700: #b697cf;
  --nj-core-color-purple-800: #d0bbe1;
  --nj-core-color-purple-900: #ebe1f2;
  --nj-core-color-purple-alpha-0: rgba(0, 0, 0, 0);
  --nj-core-color-purple-alpha-100: rgba(241, 105, 129, 0.05);
  --nj-core-color-purple-alpha-200: rgba(232, 136, 196, 0.09);
  --nj-core-color-purple-alpha-300: rgba(221, 139, 252, 0.22);
  --nj-core-color-purple-alpha-400: rgba(196, 110, 252, 0.48);
  --nj-core-color-teal-100: #191f1f;
  --nj-core-color-teal-200: #1d2727;
  --nj-core-color-teal-300: #243c3b;
  --nj-core-color-teal-400: #275b59;
  --nj-core-color-teal-500: #297a77;
  --nj-core-color-teal-600: #328e8a;
  --nj-core-color-teal-700: #58b1ad;
  --nj-core-color-teal-800: #8bcfcb;
  --nj-core-color-teal-900: #ccebea;
  --nj-core-color-teal-alpha-0: rgba(0, 0, 0, 0);
  --nj-core-color-teal-alpha-100: rgba(154, 225, 96, 0.03);
  --nj-core-color-teal-alpha-200: rgba(135, 225, 172, 0.07);
  --nj-core-color-teal-alpha-300: rgba(115, 244, 217, 0.16);
  --nj-core-color-teal-alpha-400: rgba(83, 253, 236, 0.29);
  --nj-core-color-lime-100: #1e2010;
  --nj-core-color-lime-200: #242713;
  --nj-core-color-lime-300: #353b18;
  --nj-core-color-lime-400: #4e581e;
  --nj-core-color-lime-500: #677525;
  --nj-core-color-lime-600: #78892a;
  --nj-core-color-lime-700: #97ac37;
  --nj-core-color-lime-800: #b7cd4f;
  --nj-core-color-lime-900: #dfed90;
  --nj-core-color-engie-blue: #00aaff;
  --nj-core-color-engie-green: #23d2b5;
  --nj-semantic-color-background-accent-yellow-solid-default: var(--nj-core-color-yellow-700); /* Suitable for yellow backgrounds when there is no meaning tied to the color. No minimum contrast requirement met! */
  --nj-semantic-color-background-accent-yellow-solid-hovered: var(--nj-core-color-yellow-800);
  --nj-semantic-color-background-accent-yellow-solid-focused: var(--nj-core-color-yellow-800);
  --nj-semantic-color-background-accent-yellow-solid-pressed: var(--nj-core-color-yellow-900);
  --nj-component-skeleton-color-background: linear-gradient(to right, var(--nj-core-color-grey-alpha-0) 0%, rgba(250, 250, 251, var(--nj-core-opacity-50)) 50%, var(--nj-core-color-grey-alpha-0) 100%);
  --nj-semantic-color-background-status-warning-solid-default: var(--nj-core-color-reference-status-warning-600); /* Conveys a warning or cautionary state in your interface. Use for elements that signify non-critical but important information, such as alerts, notices, or reminders. Helps users recognize situations that require their attention without implying immediate danger. */
  --nj-semantic-color-background-status-warning-solid-hovered: var(--nj-core-color-reference-status-warning-700);
  --nj-semantic-color-background-status-warning-solid-focused: var(--nj-core-color-reference-status-warning-700);
  --nj-semantic-color-background-status-warning-solid-pressed: var(--nj-core-color-reference-status-warning-800);
  --nj-semantic-color-text-neutral-primary-not-invertible-default: var(--nj-core-color-reference-neutral-0);
  --nj-semantic-color-text-neutral-primary-not-invertible-hovered: var(--nj-core-color-reference-brand-400);
  --nj-semantic-color-text-neutral-primary-not-invertible-focused: var(--nj-core-color-reference-brand-400);
  --nj-semantic-color-text-neutral-primary-not-invertible-pressed: var(--nj-core-color-reference-brand-300);
  --nj-semantic-color-text-neutral-inverse-not-invertible-default: var(--nj-core-color-reference-neutral-1000);
  --nj-semantic-color-text-neutral-inverse-not-invertible-hovered: var(--nj-core-color-reference-neutral-800);
  --nj-semantic-color-text-neutral-inverse-not-invertible-focused: var(--nj-core-color-reference-neutral-800);
  --nj-semantic-color-text-neutral-inverse-not-invertible-pressed: var(--nj-core-color-reference-neutral-700);
  --nj-component-backdrop-color-background: var(--nj-core-color-reference-neutral-alpha-300);
  --nj-semantic-color-background-additional-signature-default: var(--nj-semantic-color-background-neutral-tertiary-default); /* ENGIE's additional brand color. We strongly advise to refer to the brand guidelines for its usage. */
  --nj-semantic-color-icon-additional-signature-default: var(--nj-semantic-color-icon-neutral-primary-default);
  --nj-semantic-color-additional-signature-default: var(--nj-semantic-color-text-neutral-primary-default);
}