: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-weight-light: 300; /* DEPRECATED: will be removed in the next major version. Please don’t use this value anymore. */
  --nj-semantic-font-weight-regular: 400;
  --nj-semantic-font-weight-bold: 700;
  --nj-semantic-font-weight-black: 900; /* DEPRECATED: will be removed in the next major version. Please don’t use this value anymore. */
  --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-color-white-alpha-300: rgba(255, 255, 255, 0.25);
  --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-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-core-font-family-monospace: "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
  --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-72: 4.5rem;
  --nj-core-size-76: 4.75rem;
  --nj-core-size-80: 5rem;
  --nj-core-size-88: 5.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-core-font-family-sans-serif);
  --nj-semantic-font-family-code: var(--nj-core-font-family-monospace);
  --nj-semantic-font-line-height-default: var(--nj-semantic-font-line-height-sans-serif);
  --nj-semantic-font-line-height-text-xs-desktop: var(--nj-core-size-16);
  --nj-semantic-font-line-height-text-xs-mobile: var(--nj-core-size-16);
  --nj-semantic-font-line-height-text-sm-desktop: var(--nj-core-size-20);
  --nj-semantic-font-line-height-text-sm-mobile: var(--nj-core-size-20);
  --nj-semantic-font-line-height-text-md-desktop: var(--nj-core-size-24);
  --nj-semantic-font-line-height-text-md-mobile: var(--nj-core-size-24);
  --nj-semantic-font-line-height-text-lg-desktop: var(--nj-core-size-24);
  --nj-semantic-font-line-height-text-lg-mobile: var(--nj-core-size-24);
  --nj-semantic-font-line-height-heading-xs-desktop: var(--nj-core-size-28);
  --nj-semantic-font-line-height-heading-xs-mobile: var(--nj-core-size-28);
  --nj-semantic-font-line-height-heading-sm-desktop: var(--nj-core-size-32);
  --nj-semantic-font-line-height-heading-sm-mobile: var(--nj-core-size-32);
  --nj-semantic-font-line-height-heading-md-desktop: var(--nj-core-size-36);
  --nj-semantic-font-line-height-heading-md-mobile: var(--nj-core-size-36);
  --nj-semantic-font-line-height-heading-lg-desktop: var(--nj-core-size-40);
  --nj-semantic-font-line-height-heading-lg-mobile: var(--nj-core-size-36);
  --nj-semantic-font-line-height-heading-xl-desktop: var(--nj-core-size-48);
  --nj-semantic-font-line-height-heading-xl-mobile: var(--nj-core-size-40);
  --nj-semantic-font-line-height-display-xs-desktop: var(--nj-core-size-48);
  --nj-semantic-font-line-height-display-xs-mobile: var(--nj-core-size-40);
  --nj-semantic-font-line-height-display-sm-desktop: var(--nj-core-size-56);
  --nj-semantic-font-line-height-display-sm-mobile: var(--nj-core-size-48);
  --nj-semantic-font-line-height-display-md-desktop: var(--nj-core-size-64);
  --nj-semantic-font-line-height-display-md-mobile: var(--nj-core-size-56);
  --nj-semantic-font-line-height-display-xl-desktop: var(--nj-core-size-72);
  --nj-semantic-font-line-height-display-xl-mobile: var(--nj-core-size-64);
  --nj-semantic-font-line-height-display-2xl-desktop: var(--nj-core-size-88);
  --nj-semantic-font-line-height-display-2xl-mobile: var(--nj-core-size-72);
  --nj-semantic-font-size-text-xs-desktop: var(--nj-core-size-12);
  --nj-semantic-font-size-text-xs-mobile: var(--nj-core-size-12);
  --nj-semantic-font-size-text-sm-desktop: var(--nj-core-size-14);
  --nj-semantic-font-size-text-sm-mobile: var(--nj-core-size-14);
  --nj-semantic-font-size-text-md-desktop: var(--nj-core-size-16);
  --nj-semantic-font-size-text-md-mobile: var(--nj-core-size-16);
  --nj-semantic-font-size-text-lg-desktop: var(--nj-core-size-18);
  --nj-semantic-font-size-text-lg-mobile: var(--nj-core-size-18);
  --nj-semantic-font-size-content-4: var(--nj-core-size-10);
  --nj-semantic-font-size-heading-6: var(--nj-core-size-18);
  --nj-semantic-font-size-heading-xs-desktop: var(--nj-core-size-20);
  --nj-semantic-font-size-heading-xs-mobile: var(--nj-core-size-20);
  --nj-semantic-font-size-heading-sm-desktop: var(--nj-core-size-24);
  --nj-semantic-font-size-heading-sm-mobile: var(--nj-core-size-24);
  --nj-semantic-font-size-heading-md-desktop: var(--nj-core-size-28);
  --nj-semantic-font-size-heading-md-mobile: var(--nj-core-size-28);
  --nj-semantic-font-size-heading-lg-desktop: var(--nj-core-size-32);
  --nj-semantic-font-size-heading-lg-mobile: var(--nj-core-size-28);
  --nj-semantic-font-size-heading-xl-desktop: var(--nj-core-size-36);
  --nj-semantic-font-size-heading-xl-mobile: var(--nj-core-size-32);
  --nj-semantic-font-size-display-xs-desktop: var(--nj-core-size-40);
  --nj-semantic-font-size-display-xs-mobile: var(--nj-core-size-36);
  --nj-semantic-font-size-display-sm-desktop: var(--nj-core-size-48);
  --nj-semantic-font-size-display-sm-mobile: var(--nj-core-size-40);
  --nj-semantic-font-size-display-md-desktop: var(--nj-core-size-56);
  --nj-semantic-font-size-display-md-mobile: var(--nj-core-size-48);
  --nj-semantic-font-size-display-xl-desktop: var(--nj-core-size-72);
  --nj-semantic-font-size-display-xl-mobile: var(--nj-core-size-64);
  --nj-semantic-font-size-display-2xl-desktop: var(--nj-core-size-88);
  --nj-semantic-font-size-display-2xl-mobile: var(--nj-core-size-72);
  --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-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-2xl: 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-40: var(--nj-core-size-40);
  --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-semantic-size-spacing-128: var(--nj-core-size-128);
  --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-core-color-reference-additional-ai-default: linear-gradient(90deg, var(--nj-core-color-blue-600) 25%, var(--nj-core-color-purple-600) 75%);
  --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-background-additional-ai-default: var(--nj-core-color-reference-additional-ai-default); /* Artificial Intelligence brand gradient. We strongly advise to refer to the brand guidelines for its usage. */
  --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-border-additional-ai-default: var(--nj-core-color-reference-additional-ai-default); /* Artificial Intelligence brand gradient. We strongly advise to refer to the brand guidelines for its usage. */
  --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-icon-additional-ai-default: var(--nj-core-color-reference-additional-ai-default); /* Artificial Intelligence brand gradient. We strongly advise to refer to the brand guidelines for its usage. */
  --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-core-color-white-alpha-300: rgba(255, 255, 255, 0.25);
  --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-semantic-color-background-additional-signature-default: var(--nj-core-color-ultramarine-100); /* ENGIE's additional brand color. We strongly advise to refer to the brand guidelines for its usage. */
  --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-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);
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] {
          --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-core-color-white-alpha-300: rgba(255, 255, 255, 0.25);
  --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-semantic-color-background-additional-signature-default: var(--nj-core-color-ultramarine-100); /* ENGIE's additional brand color. We strongly advise to refer to the brand guidelines for its usage. */
  --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-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);
    }
}