.ric-variables {
  --ric-color-grey-0: #ffffff;
  --ric-color-grey-20: #f7f7f7;
  --ric-color-grey-50: #f5f7f9;
  --ric-color-grey-100: #eff0f1;
  --ric-color-grey-150: #e6e8eb;
  --ric-color-grey-200: #e4e5e5;
  --ric-color-grey-300: #bec2c8;
  --ric-color-grey-400: #a9aeb5;
  --ric-color-grey-500: #939aa3;
  --ric-color-grey-600: #777d84;
  --ric-color-grey-700: #5e646b;
  --ric-color-grey-800: #41454d;
  --ric-color-grey-850: #2c3038;
  --ric-color-grey-900: #1e1f21;
  --ric-color-grey-950: #121212;
  --ric-color-primary-50: #ebf5ff;
  --ric-color-primary-60: #e4edf7;
  --ric-color-primary-200: #c9e2ff;
  --ric-color-primary-300: #9cc3fb;
  --ric-color-primary-500: #2986ff;
  --ric-color-primary-600: #086de0;
  --ric-color-primary-650: #2460b2;
  --ric-color-primary-700: #005fdb;
  --ric-color-primary-800: #003f92;
  --ric-color-primary-850: #202f40;
  --ric-color-primary-900: #203040;
  --ric-color-green-50: #e1f5d7;
  --ric-color-green-55: #d3e5c9;
  --ric-color-green-200: #b9e3a5;
  --ric-color-green-300: #9ad57d;
  --ric-color-green-400: #80cf59;
  --ric-color-green-500: #5cbb2d;
  --ric-color-green-600: #4a9624;
  --ric-color-orange-50: #ffedd2;
  --ric-color-orange-55: #ebdac1;
  --ric-color-orange-200: #ffdba4;
  --ric-color-orange-300: #ffc877;
  --ric-color-orange-400: #ffb64a;
  --ric-color-orange-500: #f59e1b;
  --ric-color-orange-600: #c77f15;
  --ric-color-red-50: #fde4e3;
  --ric-color-red-55: #ebd3d2;
  --ric-color-red-200: #f7bcb9;
  --ric-color-red-300: #f49a96;
  --ric-color-red-400: #fa7670;
  --ric-color-red-500: #ec5750;
  --ric-color-red-600: #c64741;
  --ric-color-red-800: #7a2723;
  --ric-color-ocean-50: #def3fc;
  --ric-color-ocean-55: #cadde5;
  --ric-color-ocean-200: #a3e4f9;
  --ric-color-ocean-300: #70d8f9;
  --ric-color-ocean-400: #4acef7;
  --ric-color-ocean-500: #1abbf1;
  --ric-color-ocean-600: #0c9ecf;
  --ric-color-lavender-50: #f3e5ff;
  --ric-color-lavender-55: #e0d3eb;
  --ric-color-lavender-200: #becbf5;
  --ric-color-lavender-300: #a1b5f7;
  --ric-color-lavender-500: #5d7ce5;
  --ric-color-violet-600: #932df2;
  --ric-color-yellow-500: #f3d54e;
  --ric-color-brown-500: #746060;
  --ric-font-header-2xl: normal 600 24px/32px sans-serif;
  --ric-font-header-xl: normal 600 18px/24px sans-serif;
  --ric-font-header-l: normal 600 16px/24px sans-serif;
  --ric-font-header-m: normal 600 14px/20px sans-serif;
  --ric-font-header-s: normal 600 12px/16px sans-serif;
  --ric-font-body-l: normal 400 16px/24px sans-serif;
  --ric-font-body-m: normal 400 14px/20px sans-serif;
  --ric-font-body-sm: normal 400 13px/16px sans-serif;
  --ric-font-body-s: normal 400 12px/16px sans-serif;
  --ric-font-body-xs: normal 400 11px/14px sans-serif;
  --ric-font-body-2xs: normal 400 10px/14px sans-serif;
  --ric-font-label-m: normal 400 14px/18px sans-serif;
  --ric-font-label-m-italic: italic 400 14px/18px sans-serif;
  --ric-font-note-s: normal 400 12px/16px sans-serif;
  --ric-font-note-s-italic: italic 400 12px/16px sans-serif;
  --ric-font-note-2xs: normal 600 10px/11px sans-serif;
}

.ric-variables {
  --ric-bg-overlay-default: rgba(8, 30, 47, 0.8); /** Work In Progress */
  --ric-bg-overlay-slight: rgba(8, 30, 47, 0.1); /** Work In Progress */
  --ric-shadow-default-color: rgba(45, 57, 69, 0.15); /** Work In Progress */
  --ric-bg-primary: var(--ric-color-grey-0);
  --ric-bg-secondary: var(--ric-color-grey-50);
  --ric-bg-tertiary: var(--ric-color-grey-100);
  --ric-bg-tertiary-item-hover: var(--ric-color-primary-50);
  --ric-bg-tertiary-item-active: var(--ric-color-primary-650);
  --ric-bg-helper: var(--ric-color-primary-50);
  --ric-bg-tag: var(--ric-color-grey-150);
  --ric-bg-tag-secondary: var(--ric-color-grey-0);
  --ric-bg-control: var(--ric-color-primary-650);
  --ric-bg-control-disabled: var(--ric-color-grey-300);
  --ric-bg-row-hover: var(--ric-color-grey-50);
  --ric-bg-row-active: var(--ric-color-grey-100);
  --ric-bg-btn-primary: var(--ric-color-primary-500);
  --ric-bg-btn-primary-hover: var(--ric-color-primary-600);
  --ric-bg-btn-primary-disabled: var(--ric-color-primary-300);
  --ric-bg-btn-danger: var(--ric-color-red-500);
  --ric-bg-btn-danger-hover: var(--ric-color-red-600);
  --ric-bg-btn-danger-disabled: var(--ric-color-red-200);
  --ric-bg-btn-secondary: var(--ric-color-grey-200);
  --ric-bg-btn-secondary-disabled: var(--ric-color-grey-150);
  --ric-bg-btn-outline: var(--ric-color-grey-0);
  --ric-bg-card-primary: var(--ric-color-grey-50);
  --ric-bg-card-primary-group: var(--ric-color-grey-100);
  --ric-bg-card-primary-active: var(--ric-color-primary-60);
  --ric-bg-card-secondary: var(--ric-color-grey-0);
  --ric-bg-scrollbar-thumb: var(--ric-color-grey-300);
  --ric-bg-scrollbar-track: var(--ric-color-grey-100);
  --ric-border-primary: var(--ric-color-grey-200);
  --ric-border-primary-hover: var(--ric-color-primary-200);
  --ric-border-primary-active: var(--ric-color-grey-500);
  --ric-border-interactive: var(--ric-color-primary-500);
  --ric-border-critical: var(--ric-color-red-200);
  --ric-border-btn-outline: var(--ric-color-grey-200);
  --ric-icon-primary: var(--ric-color-grey-600);
  --ric-icon-primary-on-color: var(--ric-color-grey-600);
  --ric-icon-primary-hover: var(--ric-color-grey-850);
  --ric-icon-primary-active: var(--ric-color-primary-600);
  --ric-icon-secondary: var(--ric-color-grey-400);
  --ric-icon-tertiary: var(--ric-color-grey-300);
  --ric-icon-on-color: var(--ric-color-grey-0);
  --ric-icon-inverse: var(--ric-color-grey-0);
  --ric-icon-accent-primary: var(--ric-color-primary-500);
  --ric-icon-accent-01: var(--ric-color-green-500);
  --ric-icon-accent-02: var(--ric-color-orange-500);
  --ric-icon-accent-03: var(--ric-color-red-500);
  --ric-icon-accent-04: var(--ric-color-ocean-500);
  --ric-icon-accent-05: var(--ric-color-lavender-500);
  --ric-icon-accent-06: var(--ric-color-violet-600);
  --ric-icon-accent-07: var(--ric-color-yellow-500);
  --ric-icon-accent-08: var(--ric-color-brown-500);
  --ric-shape-bg-01: var(--ric-color-green-50);
  --ric-shape-data-01: var(--ric-color-green-300);
  --ric-shape-accent-01: var(--ric-color-green-500);
  --ric-shape-bg-02: var(--ric-color-orange-50);
  --ric-shape-data-02: var(--ric-color-orange-300);
  --ric-shape-accent-02: var(--ric-color-orange-500);
  --ric-shape-bg-03: var(--ric-color-red-50);
  --ric-shape-data-03: var(--ric-color-red-300);
  --ric-shape-accent-03: var(--ric-color-red-500);
  --ric-shape-bg-04: var(--ric-color-ocean-50);
  --ric-shape-data-04: var(--ric-color-ocean-300);
  --ric-shape-accent-04: var(--ric-color-ocean-500);
  --ric-shape-bg-05: var(--ric-color-lavender-50);
  --ric-shape-data-05: var(--ric-color-lavender-200);
  --ric-shape-accent-05: var(--ric-color-lavender-500);
  --ric-shape-accent-06: var(--ric-color-violet-600);
  --ric-shape-accent-07: var(--ric-color-yellow-500);
  --ric-shape-accent-08: var(--ric-color-brown-500);
  --ric-shape-bg-09: var(--ric-color-grey-100);
  --ric-shape-data-09: var(--ric-color-grey-200);
  --ric-shape-accent-09: var(--ric-color-grey-500);
  --ric-shape-accent-10: var(--ric-color-grey-850);
  --ric-shape-bg-11: var(--ric-color-primary-60);
  --ric-shape-data-11: var(--ric-color-primary-200);
  --ric-text-primary: var(--ric-color-grey-850);
  --ric-text-primary-on-color: var(--ric-color-grey-850);
  --ric-text-secondary: var(--ric-color-grey-700);
  --ric-text-tertiary: var(--ric-color-grey-600);
  --ric-text-placeholder: var(--ric-color-grey-500);
  --ric-text-helper: var(--ric-color-primary-800);
  --ric-text-critical: var(--ric-color-red-600);
  --ric-text-success: var(--ric-color-green-600);
  --ric-text-attention: var(--ric-color-orange-600);
  --ric-text-condition: var(--ric-color-ocean-600);
  --ric-text-inverse: var(--ric-color-grey-0);
  --ric-text-on-color: var(--ric-color-grey-0);
  --ric-text-link: var(--ric-color-primary-500);
  --ric-text-link-hover: var(--ric-color-primary-600);
  --ric-text-link-active: var(--ric-color-primary-700);
  --ric-text-link-visited: var(--ric-color-violet-600);
  --ric-text-btn-default: var(--ric-color-grey-700);
  --ric-text-btn-default-hover: var(--ric-color-primary-600);
  --ric-text-btn-default-disabled: var(--ric-color-grey-300);
  --ric-text-btn-link: var(--ric-color-primary-500);
  --ric-text-btn-link-hover: var(--ric-color-primary-600);
  --ric-text-btn-link-disabled: var(--ric-color-primary-300);
  --ric-text-btn-primary: var(--ric-color-grey-0);
  --ric-text-btn-danger: var(--ric-color-grey-0);
  --ric-text-btn-secondary: var(--ric-color-grey-700);
  --ric-text-btn-secondary-hover: var(--ric-color-primary-600);
  --ric-text-btn-secondary-disabled: var(--ric-color-grey-300);
  --ric-text-btn-outline: var(--ric-color-grey-700);
  --ric-text-btn-outline-hover: var(--ric-color-primary-600);
  --ric-text-btn-outline-disabled: var(--ric-color-grey-300);
}

.ric-variables.ric-theme-dark {
  --ric-bg-overlay-default: rgba(8, 30, 47, 0.8); /** Work In Progress */
  --ric-bg-overlay-slight: rgba(8, 30, 47, 0.25); /** Work In Progress */
  --ric-shadow-default-color: rgba(140, 167, 193, 0.15); /** Work In Progress */
  --ric-bg-primary: var(--ric-color-grey-950);
  --ric-bg-secondary: var(--ric-color-grey-900);
  --ric-bg-tertiary: var(--ric-color-grey-850);
  --ric-bg-tertiary-item-hover: var(--ric-color-primary-900);
  --ric-bg-tertiary-item-active: var(--ric-color-primary-650);
  --ric-bg-helper: var(--ric-color-primary-900);
  --ric-bg-tag: var(--ric-color-grey-850);
  --ric-bg-tag-secondary: var(--ric-color-grey-950);
  --ric-bg-control: var(--ric-color-primary-650);
  --ric-bg-control-disabled: var(--ric-color-grey-800);
  --ric-bg-row-hover: var(--ric-color-grey-900);
  --ric-bg-row-active: var(--ric-color-grey-850);
  --ric-bg-btn-primary: var(--ric-color-primary-500);
  --ric-bg-btn-primary-hover: var(--ric-color-primary-600);
  --ric-bg-btn-primary-disabled: var(--ric-color-primary-300);
  --ric-bg-btn-danger: var(--ric-color-red-500);
  --ric-bg-btn-danger-hover: var(--ric-color-red-600);
  --ric-bg-btn-danger-disabled: var(--ric-color-red-200);
  --ric-bg-btn-secondary: var(--ric-color-grey-800);
  --ric-bg-btn-secondary-disabled: var(--ric-color-grey-850);
  --ric-bg-btn-outline: var(--ric-color-grey-950);
  --ric-bg-card-primary: var(--ric-color-grey-900);
  --ric-bg-card-primary-group: var(--ric-color-grey-850);
  --ric-bg-card-primary-active: var(--ric-color-primary-850);
  --ric-bg-card-secondary: var(--ric-color-grey-850);
  --ric-bg-scrollbar-thumb: var(--ric-color-grey-700);
  --ric-bg-scrollbar-track: var(--ric-color-grey-850);
  --ric-border-primary: var(--ric-color-grey-800);
  --ric-border-primary-hover: var(--ric-color-primary-800);
  --ric-border-primary-active: var(--ric-color-grey-500);
  --ric-border-interactive: var(--ric-color-primary-500);
  --ric-border-critical: var(--ric-color-red-800);
  --ric-border-btn-outline: var(--ric-color-grey-800);
  --ric-icon-primary: var(--ric-color-grey-400);
  --ric-icon-primary-on-color: var(--ric-color-grey-600);
  --ric-icon-primary-hover: var(--ric-color-grey-300);
  --ric-icon-primary-active: var(--ric-color-primary-600);
  --ric-icon-secondary: var(--ric-color-grey-600);
  --ric-icon-tertiary: var(--ric-color-grey-800);
  --ric-icon-on-color: var(--ric-color-grey-0);
  --ric-icon-inverse: var(--ric-color-grey-850);
  --ric-icon-accent-primary: var(--ric-color-primary-500);
  --ric-icon-accent-01: var(--ric-color-green-500);
  --ric-icon-accent-02: var(--ric-color-orange-500);
  --ric-icon-accent-03: var(--ric-color-red-500);
  --ric-icon-accent-04: var(--ric-color-ocean-500);
  --ric-icon-accent-05: var(--ric-color-lavender-500);
  --ric-icon-accent-06: var(--ric-color-violet-600);
  --ric-icon-accent-07: var(--ric-color-yellow-500);
  --ric-icon-accent-08: var(--ric-color-brown-500);
  --ric-shape-bg-01: var(--ric-color-green-55);
  --ric-shape-data-01: var(--ric-color-green-300);
  --ric-shape-accent-01: var(--ric-color-green-500);
  --ric-shape-bg-02: var(--ric-color-orange-55);
  --ric-shape-data-02: var(--ric-color-orange-300);
  --ric-shape-accent-02: var(--ric-color-orange-500);
  --ric-shape-bg-03: var(--ric-color-red-55);
  --ric-shape-data-03: var(--ric-color-red-300);
  --ric-shape-accent-03: var(--ric-color-red-500);
  --ric-shape-bg-04: var(--ric-color-ocean-55);
  --ric-shape-data-04: var(--ric-color-ocean-300);
  --ric-shape-accent-04: var(--ric-color-ocean-500);
  --ric-shape-bg-05: var(--ric-color-lavender-55);
  --ric-shape-data-05: var(--ric-color-lavender-200);
  --ric-shape-accent-05: var(--ric-color-lavender-500);
  --ric-shape-accent-06: var(--ric-color-violet-600);
  --ric-shape-accent-07: var(--ric-color-yellow-500);
  --ric-shape-accent-08: var(--ric-color-brown-500);
  --ric-shape-bg-09: var(--ric-color-grey-700);
  --ric-shape-data-09: var(--ric-color-grey-800);
  --ric-shape-accent-09: var(--ric-color-grey-500);
  --ric-shape-accent-10: var(--ric-color-grey-850);
  --ric-shape-bg-11: var(--ric-color-primary-60);
  --ric-shape-data-11: var(--ric-color-primary-200);
  --ric-text-primary: var(--ric-color-grey-20);
  --ric-text-primary-on-color: var(--ric-color-grey-850);
  --ric-text-secondary: var(--ric-color-grey-400);
  --ric-text-tertiary: var(--ric-color-grey-500);
  --ric-text-placeholder: var(--ric-color-grey-500);
  --ric-text-helper: var(--ric-color-primary-300);
  --ric-text-critical: var(--ric-color-red-500);
  --ric-text-success: var(--ric-color-green-500);
  --ric-text-attention: var(--ric-color-orange-500);
  --ric-text-condition: var(--ric-color-ocean-500);
  --ric-text-inverse: var(--ric-color-grey-850);
  --ric-text-on-color: var(--ric-color-grey-0);
  --ric-text-link: var(--ric-color-primary-600);
  --ric-text-link-hover: var(--ric-color-primary-500);
  --ric-text-link-active: var(--ric-color-primary-500);
  --ric-text-link-visited: var(--ric-color-violet-600);
  --ric-text-btn-default: var(--ric-color-grey-400);
  --ric-text-btn-default-hover: var(--ric-color-primary-600);
  --ric-text-btn-default-disabled: var(--ric-color-grey-800);
  --ric-text-btn-link: var(--ric-color-primary-500);
  --ric-text-btn-link-hover: var(--ric-color-primary-600);
  --ric-text-btn-link-disabled: var(--ric-color-primary-300);
  --ric-text-btn-primary: var(--ric-color-grey-0);
  --ric-text-btn-danger: var(--ric-color-grey-0);
  --ric-text-btn-secondary: var(--ric-color-grey-400);
  --ric-text-btn-secondary-hover: var(--ric-color-primary-600);
  --ric-text-btn-secondary-disabled: var(--ric-color-grey-800);
  --ric-text-btn-outline: var(--ric-color-grey-400);
  --ric-text-btn-outline-hover: var(--ric-color-primary-600);
  --ric-text-btn-outline-disabled: var(--ric-color-grey-800);
}