body.theme-dark {
  /* <tokens> */

  --black: #000000;
  --gray-1000: #080808;
  --gray-950: #101010;
  --gray-900: #161616;
  --gray-850: #1F1F1F;
  --gray-800: #232323;
  --gray-750: #2f2f2f;
  --gray-700: #353535;
  --gray-650: #474747;
  --gray-600: #505050;
  --gray-550: #5D5D5D;
  --gray-500: #696969;
  --gray-450: #717171;
  --gray-400: #797979;
  --gray-300: #A2A2A2;
  --gray-200: #C9C9C9;
  --gray-150: #DFDFDF;
  --gray-100: #F4F4F4;
  --gray-000: #FFFFFF;

  --blue-900: #062359;
  --blue-800: #0E3783;
  --blue-700: #0A3F9F;
  --blue-650: #154DB3;
  --blue-600: #1F5AC7;
  --blue-550: #2764D4;
  --blue-500: #2E6DE1;
  --blue-400: #3E7CEE;
  --blue-300: #7CB6F9;
  --blue-200: #A8D5FF;
  --blue-100: #D3EAFF;
  --blue-000: #EBF5FF;

  --red-900: #4C2E2A;
  --red-800: #851C15;
  --red-700: #A42216;
  --red-650: #B12417;
  --red-600: #BE2618;
  --red-550: #CD3626;
  --red-500: #DC4633;
  --red-400: #FF6F52;
  --red-300: #F59D8F;
  --red-200: #F4C3BC;
  --red-100: #FFE8E4;
  --red-000: #FFF6F5;

  --orange-900: #523C27;
  --orange-800: #9A3B00;
  --orange-700: #AD4500;
  --orange-600: #D25E05;
  --orange-500: #E87409;
  --orange-400: #F98A23;
  --orange-300: #FFB36C;
  --orange-200: #FFD7B1;
  --orange-100: #FFEAD6;
  --orange-000: #FFF5EC;

  --green-900: #2B4A2E;
  --green-800: #0B500E;
  --green-700: #007205;
  --green-650: #007E0A;
  --green-600: #008A0E;
  --green-500: #23AF31;
  --green-400: #38D348;
  --green-300: #68E374;
  --green-200: #9FF5A8;
  --green-100: #D1FED5;
  --green-000: #E7FFE9;

  --purple-900-2: #402661;
  --purple-900: #403253;
  --purple-800: #512D80;
  --purple-700: #5D3096;
  --purple-600: #6530A9;
  --purple-500: #7F3CD6;
  --purple-400: #A259FF;
  --purple-300: #BF8CFF;
  --purple-200: #D7BEF9;
  --purple-100: #E3CFFE;
  --purple-000: #F7F0FF;

  --ice-900: #0D2948;
  --ice-800: #113C60;
  --ice-700: #144E77;
  --ice-600: #1B6893;
  --ice-500: #2182AF;
  --ice-400: #31BBED;
  --ice-300: #51CDFA;
  --ice-200: #86D4F3;
  --ice-100: #ABDBF3;
  --ice-000: #D5E9F9;

  --teal-900: #023028;
  --teal-800: #005545;
  --teal-700: #006F5B;
  --teal-600: #09866F;
  --teal-500: #00A67E;
  --teal-400: #13CA9E;
  --teal-300: #63E4C5;
  --teal-200: #A6F4E1;
  --teal-100: #CFFEF3;
  --teal-000: #F0FFFA;

  --yellow-900: #44340A;
  --yellow-800: #725408;
  --yellow-700: #956B00;
  --yellow-600: #BB8700;
  --yellow-500: #D99C00;
  --yellow-400: #F5BA22;
  --yellow-300: #F3CE6F;
  --yellow-200: #FBE3A7;
  --yellow-100: #FFF1CD;
  --yellow-000: #FFF8E7;

  --magma_red-900: #511617;
  --magma_red-800: #851518;
  --magma_red-700: #B12426;
  --magma_red-600: #DD3333;
  --magma_red-500: #E84244;
  --magma_red-400: #F85758;
  --magma_red-300: #F88F8F;
  --magma_red-200: #F4BCBC;
  --magma_red-100: #FFE4E4;
  --magma_red-000: #FFF5F5;

  --yellow: #FCE544;
  --lemon: #DAEF52;
  --lime: #B0FC63;
  --jade: #76E497;
  --turquoise: #5AD9E0;
  --indigo: #9EA1FC;
  --magenta: #DF74DB;
  --pink: #FF73A5;
  --rose: #F45B75;
  /* --cursor-text-color: #161616; - in js layer of theme */

  --alpha-90-for-black: rgba(0, 0, 0, 0.9);
  --alpha-60-for-gray-700: rgba(56, 56, 56, 0.6);

  --alpha-70-for-blue-600: rgba(31, 90, 199, 0.7);

  --alpha-50-for-blue-650: rgba(21, 77, 179, 0.5);
  --alpha-50-for-blue-600: rgba(31, 90, 199, 0.5);
  --alpha-50-for-blue-500: rgba(46, 109, 225, 0.5);
  --alpha-50-for-ice-600: rgba(27, 104, 147, 0.5);

  --alpha-30-for-gray-700: rgba(35,35,35, 0.3);
  --alpha-30-for-blue-600: rgba(31, 90, 199, 0.3);
  --alpha-30-for-ice-600: rgba(27, 104, 147, 0.3);

  --button-radius: 3px;
  --button-height-md: 36px;
  --button-height-sm: 28px;
  --button-height-xs: 20px;
  --button-height-tool: 32px;

  --brush_button-radius: 4px;
  --brush_button-width: 120px;
  --brush_button-height: 50px;

  --tool-button-height: 32px;
  --tool-button-width: var(--tool-button-height);
  --tool-button-font_size: 16px;
  --tool_buttons_wrapper-padding_x: 4px;
  --tool_buttons_wrapper-padding_y: 5px;

  --left-menu-width: 40px;

  --input-radius: 3px;
  --input-height-md: 36px;
  --input-height-sm: 28px;
  --input-height-xs: 20px;
  --input-font_size-md: 14px;
  --input-font_size-sm: 12px;
  --input-font_size-xs: 12px;
  --input-stroke-thickness: 1px;

  --editable-number-width: 26px;

  --dot_badge-size: 10px;

  /* </tokens> */
  /* <conceptual-components> */

  --app-background-default: var(--gray-900);
  --panel-background-default: var(--gray-800);
  --ads-placeholder-background: var(--gray-700);
  --splash-screen-default: var(--panel-background-default);
  --panel-background-opaque: var(--alpha-60-for-gray-700); /* needed for mobile elements */
  --panel-stroke-default: var(--gray-700);
  --panel-stroke_thickness: 1px;

  --dropdown-background-default: var(--gray-800);
  --dropdown-background-hover: var(--gray-750);
  --dropdown-stroke: var(--gray-700);
  --dropdown-stroke_thickness: 1px;
  --dropdown-radius: 4px;
  --dropdown-color-default: var(--text-color-dimmed);
  --dropdown-color-disabled: var(--text-color-disabled);
  --dropdown-color-danger: var(--red-400);
  --dropdown-box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5); /* TODO: tokenize? */

  --tooltip-background-default: var(--gray-1000);

  --backdrop-background-default: var(--alpha-90-for-black);

  --separator-background: var(--gray-700);

  --editor-popup-boxshadow: 0 0 6px rgba(0, 0, 0, 0.6);

  --text-color-default: var(--gray-100);  /* TODO: primary */
  --text-color-dimmed: var(--gray-200); /* TODO: secondary */
  --text-color-subtle: var(--gray-300); /* TODO: tertiary */
  --text-color-disabled: var(--gray-400);
  --text-color-placeholer: var(--gray-300);

  --icon-color-disabled: var(--gray-500);

  --focus_ring-thickness: 1px;
  --focus_ring-color: var(--blue-300);

  --draggable-placeholder: var(--app-background-default);

  --clickable-background-default: var(--gray-700);
  --clickable-background-hover: var(--gray-650);
  --clickable-background-pressed: var(--gray-600);
  --clickable-background-on-disabled: var(--gray-750);
  --clickable-background-off-disabled: transparent;

  --clickable-color-default: var(--text-color-default);
  --clickable-color-disabled: var(--gray-300); /* TODO: --gray-300 for more contrast or --text-color-disabled */

  --clickable-stroke-default: var(--gray-600);
  --clickable-stroke-disabled: var(--gray-600);

  --internal_link-color-default: var(--text-color-dimmed);
  --internal_link-color-hovered: var(--gray-000);
  --internal_link-color-pressed: var(--internal_link-color-hovered);
  --internal_link-color-disabled: var(--text-color-disabled);

  --external_link-color-default: var(--blue-300);
  --external_link-color-hovered: var(--blue-200);
  --external_link-color-pressed: var(--external_link-color-hovered);
  --external_link-color-disabled: var(--text-color-disabled);

  --toggleable_component_loud-background-off-default: var(--gray-700);
  --toggleable_component_loud-background-off-hover: var(--gray-650);
  --toggleable_component_loud-background-off-pressed: var(--gray-600);
  --toggleable_component_loud-background-off-disabled: var(--clickable-background-off-disabled);
  --toggleable_component_loud-background-on-default: var(--alpha-30-for-blue-600);
  --toggleable_component_loud-background-on-hover: var(--alpha-50-for-blue-600);
  --toggleable_component_loud-background-on-pressed: var(--alpha-70-for-blue-600);
  --toggleable_component_loud-background-on-disabled: var(--clickable-background-on-disabled);
  --toggleable_component_loud-stroke-off-default: transparent;
  --toggleable_component_loud-stroke-off-disabled: var(--clickable-background-off-disabled);
  --toggleable_component_loud-stroke-on-default: var(--blue-400);
  --toggleable_component_loud-stroke-on-disabled: var(--gray-600);
  --toggleable_component_loud-stroke_thickness: 1px;

  --toggleable_component_quiet-background-off-default: transparent;
  --toggleable_component_quiet-background-off-hover: var(--gray-650);
  --toggleable_component_quiet-background-off-pressed: var(--gray-700);
  --toggleable_component_quiet-background-off-disabled: var(--clickable-background-off-disabled);
  --toggleable_component_quiet-background-on-default: var(--gray-600);
  --toggleable_component_quiet-background-on-hover: var(--gray-550);
  --toggleable_component_quiet-background-on-pressed: var(--gray-500);
  --toggleable_component_quiet-background-on-disabled: var(--clickable-background-on-disabled);
  --toggleable_component_quiet-stroke-off-default: transparent;
  --toggleable_component_quiet-stroke-off-disabled: transparent;
  --toggleable_component_quiet-stroke-on-default: var(--gray-500);
  --toggleable_component_quiet-stroke-on-disabled: var(--clickable-stroke-disabled);
  --toggleable_component_quiet-stroke_thickness: 1px;

  --toggleable_black-background-off-default: var(--clickable-background-default);
  --toggleable_black-background-off-hover: var(--clickable-background-hover);
  --toggleable_black-background-off-pressed: var(--clickable-background-pressed);
  --toggleable_black-background-off-disabled: var(--clickable-background-off-disabled);
  --toggleable_black-background-on-default: var(--gray-900);
  --toggleable_black-background-on-hover: var(--gray-850);
  --toggleable_black-background-on-pressed: var(--gray-800);
  --toggleable_black-background-on-disabled: var(--clickable-background-on-disabled);
  --toggleable_black-stroke-off-default: transparent;
  --toggleable_black-stroke-off-disabled: transparent;
  --toggleable_black-stroke-on-default: var(--gray-1000);
  --toggleable_black-stroke-on-disabled: var(--clickable-stroke-disabled);
  --toggleable_black-stroke_thickness: 1px;

  --button_group-background: var(--toggleable_black-background-off-default);
  --button_group-stroke: var(--clickable-stroke-disabled);
  --button_group-stroke_thickness: 1px;

  --toggleable_switch_loud-background-off-default: transparent;
  --toggleable_switch_loud-background-off-hover: var(--gray-650);
  --toggleable_switch_loud-background-off-pressed: var(--gray-600);
  --toggleable_switch_loud-background-off-disabled: var(--clickable-background-on-disabled);
  --toggleable_switch_loud-background-on-default: var(--blue-600);
  --toggleable_switch_loud-background-on-hover: var(--blue-550);
  --toggleable_switch_loud-background-on-pressed: var(--blue-500);
  --toggleable_switch_loud-background-on-disabled: var(--clickable-background-on-disabled);
  --toggleable_switch_loud-stroke-off-default: var(--gray-500);
  --toggleable_switch_loud-stroke-off-disabled: var(--gray-600);
  --toggleable_switch_loud-stroke-on-default: var(--blue-400);
  --toggleable_switch_loud-stroke-on-disabled: var(--gray-600);
  --toggleable_switch_loud-color-on: var(--gray-100);
  --toggleable_switch_loud-color-off: var(--gray-200);
  --toggleable_switch_loud-stroke_thickness: 1px;

  --toggleable_switch_quiet-background-off-default: transparent;
  --toggleable_switch_quiet-background-off-hover: var(--gray-650);
  --toggleable_switch_quiet-background-off-pressed: var(--gray-600);
  --toggleable_switch_quiet-background-off-disabled: var(--clickable-background-on-disabled);
  --toggleable_switch_quiet-background-on-default: var(--clickable-background-pressed);
  --toggleable_switch_quiet-background-on-hover: var(--gray-650);
  --toggleable_switch_quiet-background-on-pressed: var(--gray-700);
  --toggleable_switch_quiet-background-on-disabled: var(--clickable-background-on-disabled);
  --toggleable_switch_quiet-stroke-off-default: var(--gray-500);
  --toggleable_switch_quiet-stroke-off-disabled: var(--gray-600);
  --toggleable_switch_quiet-stroke-on-default: var(--gray-500);
  --toggleable_switch_quiet-stroke-on-disabled: var(--gray-600);
  --toggleable_switch_quiet-color-on: var(--gray-100);
  --toggleable_switch_quiet-color-off: var(--gray-200);
  --toggleable_switch_quiet-stroke_thickness: 1px;

  --checkbox-size-md: var(--checkbox-size-sm);
  --checkbox-size-sm: 16px;
  --checkbox-size-xs: 14px;

  --radio-size-md: 16px;
  --radio-size-sm: 14px;
  --radio-gutter-md: -10px;
  --radio-gutter-sm: -8px;
  --radio-dot_size-md: 10px;
  --radio-dot_size-sm: 8px;
  --radio-dot: var(--blue-000);
  --radio-dot-loud-svg: var(--radio-dot-svg-light);
  --radio-dot-quiet-svg: var(--radio-dot-svg-light);

  --radio-box-background-off: var(--gray-800);
  --radio-box-background-off-hovered: var(--gray-750);
  --radio-box-background-off-pressed: var(--gray-700);
  --radio-box-background-off-disabled: transparent;
  --radio-box-stroke-off: var(--input-stroke-default);
  --radio-box-stroke-off-hovered: var(--input-stroke-hovered);
  --radio-box-stroke-off-disabled: var(--input-stroke-disabled);

  --switch-size-md: 40px;
  --switch-size-sm: 34px;
  --switch-color-disabled: var(--icon-color-disabled);

  /* </conceptual-components> */
  /* <scrollbars */

  --scrollbar-background-default: var(--gray-600);
  --scrollbar-background-hovered: var(--gray-550);
  --scrollbar-background-pressed: var(--gray-500);

  /* </scrollbars> */
  /* <buttons> */

  --button-minwidth-multiplier: 3;

  --button-color-default: var(--text-color-default);
  --button-color-disabled: var(--text-color-disabled);

  --button_primary-background-default: var(--blue-600);
  --button_primary-background-hovered: var(--blue-650);
  --button_primary-background-pressed: var(--blue-700);
  --button_primary-background-disabled: var(--clickable-background-on-disabled);
  --button_primary-stroke-default: transparent;
  --button_primary-stroke-disabled: transparent;
  --button_primary-color-default: var(--text-color-default);
  --button_primary-color-disabled: var(--text-color-disabled);

  --button_secondary-background-default: transparent;
  --button_secondary-background-hovered: var(--clickable-background-hover);
  --button_secondary-background-pressed: var(--clickable-background-pressed);
  --button_secondary-background-disabled: transparent;
  --button_secondary-stroke-default: var(--clickable-stroke-default);
  --button_secondary-stroke-disabled: var(--clickable-stroke-disabled);
  --button_secondary-color-default: var(--text-color-default);
  --button_secondary-color-disabled: var(--text-color-disabled);

  --button_neutral-background-default: var(--clickable-background-default);
  --button_neutral-background-hovered: var(--clickable-background-hover);
  --button_neutral-background-pressed: var(--clickable-background-pressed);
  --button_neutral-background-disabled: var(--clickable-background-on-disabled);
  --button_neutral-stroke-default: transparent;
  --button_neutral-stroke-disabled: transparent;
  --button_neutral-color-default: var(--text-color-default);
  --button_neutral-color-disabled: var(--text-color-disabled);

  --button_ghost-background-default: transparent;
  --button_ghost-background-hovered: var(--clickable-background-hover);
  --button_ghost-background-pressed: var(--clickable-background-pressed);
  --button_ghost-background-disabled: transparent;
  --button_ghost-color-default: var(--button-color-default);
  --button_ghost-color-hovered: var(--button_ghost-color-default);
  --button_ghost-color-disabled: var(--button-color-disabled);

  --button_danger-background-default: var(--red-500);
  --button_danger-background-hovered: var(--red-550);
  --button_danger-background-pressed: var(--red-600);
  --button_danger-background-disabled: var(--button_primary-background-disabled);
  --button_danger-stroke-default: var(--button_primary-stroke-default);
  --button_danger-stroke-disabled: var(--button_primary-stroke-disabled);
  --button_danger-color-default: var(--button_primary-color-default);
  --button_danger-color-disabled: var(--button_primary-color-disabled);

  --button_success-background-default: var(--green-600);
  --button_success-background-hovered: var(--green-650);
  --button_success-background-pressed: var(--green-700);
  --button_success-background-disabled: var(--button_primary-background-disabled);
  --button_success-stroke-default: var(--button_primary-stroke-default);
  --button_success-stroke-disabled: var(--button_primary-stroke-disabled);
  --button_success-color-default: var(--button_primary-color-default);
  --button_success-color-disabled: var(--button_primary-color-disabled);

  /* </buttons> */
  /* <badges-and-general-intents> */

  --badge-blue-bg: var(--blue-500);
  --badge-blue-stroke: var(--blue-300);
  --badge-purple-bg: var(--purple-500);
  --badge-purple-stroke: var(--purple-300);
  --badge-green-bg: var(--green-600);
  --badge-green-stroke: var(--green-300);
  --badge-gray-bg: var(--gray-600);
  --badge-gray-stroke: var(--gray-600);
  --badge-red-bg: var(--red-600);
  --badge-red-stroke: var(--red-400);
  --badge-orange-bg: var(--orange-400);
  --badge-orange-stroke: var(--orange-400);
  --badge-yellow-bg: var(--yellow-400);
  --badge-yellow-stroke: var(--yellow-400);
  --badge-magma-bg: var(--magma_red-500);
  --badge-magma-stroke: var(--magma_red-400);

  --text-badge-light: var(--gray-000);
  --text-badge-dark: var(--gray-1000);

  /* TODO: cleanup? */
  --unread-notifications: var(--red-600);
  --danger: var(--red-600); /* TODO: same as unread notifications */
  --blaze: var(--magma_red-500); /* TODO: spark/fusion? _common.scss > L580 +/- ish */

  /* </badges-and-general-intents> */
  /* <inputs> */

  --input-background-default: var(--gray-900);
  --input-background-hovered: var(--input-background-default);
  --input-background-pressed: var(--input-background-default);
  --input-background-focused: var(--input-background-default);
  --input-background-disabled: transparent;

  --input-stroke-default: var(--gray-600);
  --input-stroke-hovered: var(--gray-650);
  --input-stroke-pressed: var(--input-stroke-hovered);
  --input-stroke-focused: var(--blue-400);
  --input-stroke-disabled: var(--clickable-stroke-disabled);

  --input-color-default: var(--text-color-default);
  --input-color-hovered: var(--input-color-default);
  --input-color-pressed: var(--input-color-default);
  --input-color-focused: var(--input-color-default);
  --input-color-disabled: var(--text-color-disabled);

  --input-error: var(--danger);
  --input-error-help-text: var(--red-400);

  --input-text_selection_background-default: var(--gray-600);

  /* </inputs> */
  /* <shape-pickers> */

  --shape_picker-background-default: var(--gray-700);
  --shape_picker-background-disabled: var(--gray-500);
  --shape_picker-shape_color-default: var(--gray-300);

  /* </shape-pickers> */
  /* <checker-pattern> */

  --checker-base64: var(--checker-base64-dark-3);

  /* </checker-pattern> */
  /* <tool-slots> */

  --tool_slot_number-background-off: var(--panel-background-default);
  --tool_slot_number-background-on: var(--text-color-default);
  --tool_slot_number-color-off: var(--text-color-default);
  --tool_slot_number-color-on: var(--panel-background-default);

  /* </tool-slots> */
  /* <sliders> */

  --slider_track-background-default: var(--gray-600);
  --slider_track-background-hover: var(--slider_track-background-default);
  --slider_track-background-pressed: var(--gray-600);
  --slider_track-background-disabled: var(--gray-750);

  --slider_thumb-background-default: var(--gray-300);
  --slider_thumb-background-hover: var(--gray-200);
  --slider_thumb-background-pressed: var(--gray-100);
  --slider_thumb-background-disabled: var(--gray-600);

  --slider_circle_inner-size-default: 10px;
  --slider_circle_inner-size-hover: var(--slider_circle_inner-size-default);
  --slider_circle_inner-size-pressed: var(--slider_circle_inner-size-default);
  --slider_circle_inner-size-disabled: var(--slider_circle_inner-size-default);

  --slider_circle_outer-size-default: calc(var(--slider_circle_inner-size-default) + 2px);
  --slider_circle_outer-size-hover: var(--slider_circle_outer-size-default);
  --slider_circle_outer-size-pressed: var(--slider_circle_outer-size-default);
  --slider_circle_outer-size-disabled: var(--slider_circle_outer-size-default);

  --slider_circle-background-default: var(--gray-700);
  --slider_circle-background-hover: var(--slider_circle-background-default);
  --slider_circle-background-pressed: var(--slider_circle-background-default);
  --slider_circle-background-disabled: var(--slider_circle-background-default);

  --slider_circle-stroke-default: var(--slider_thumb-background-default);
  --slider_circle-stroke-hovered: var(--slider_thumb-background-hover);
  --slider_circle-stroke-pressed: var(--slider_thumb-background-pressed);
  --slider_circle-stroke-disabled: var(--slider_thumb-background-disabled);

  --slider_circle-stroke_thickness-default: 1px;
  --slider_circle-stroke_thickness-hovered: var(--slider_circle-stroke_thickness-default);
  --slider_circle-stroke_thickness-pressed: 3px;
  --slider_circle-stroke_thickness-disabled: var(--slider_circle-stroke_thickness-default);

  /* </sliders> */
  /* <layer-item> */

  --layer-background-default: var(--panel-background-default);
  --layer-background-hover: var(--clickable-background-hover);
  --layer-background-selected: var(--toggleable_component_loud-background-on-default);
  --layer-background-locked: var(--clickable-background-on-disabled); /* TODO: x50 color used on non-hover bg */
  --layer-background-loading: var(--gray-750); /* TODO: x50 color used on non-hover bg */
  --layer-background-foreign: var(--gray-700);

  --layer-stroke-default: var(--input-stroke-default);
  --layer-stroke-selected: var(--toggleable_component_loud-stroke-on-default);

  --layer-title-color-default: var(--text-color-default);
  --layer-title-color-foreign: var(--text-color-subtle);
  --layer-title-color-locked: var(--text-color-subtle);
  --layer-subtitle-color-default: var(--text-color-dimmed);
  --layer-subtitle-color-locked: var(--text-color-subtle);
  --layer-subtitle-color-foreign: var(--text-color-subtle);

  --layer-stroke_thickness: 1px;

  /* </layer-item> */
  /* <tabs> */

  --tabs_nav-bottom_stroke-default: var(--separator-background);
  --tabs_nav-bottom_stroke-disabled: var(--separator-background);
  --tabs_nav-bottom_stroke_thickness: 1px;

  --tabs_nav_link-background-off-default: var(--button_ghost-background-default);
  --tabs_nav_link-background-off-hovered: var(--button_ghost-background-hovered);
  --tabs_nav_link-background-off-pressed: var(--button_ghost-background-pressed);
  --tabs_nav_link-background-off-disabled: var(--button_ghost-background-disabled);
  --tabs_nav_link-background-on-default: var(--button_neutral-background-default);
  --tabs_nav_link-background-on-hovered: var(--button_neutral-background-default);
  --tabs_nav_link-background-on-pressed: var(--button_neutral-background-default);
  --tabs_nav_link-background-on-disabled: var(--button_neutral-background-disabled);

  --tabs_nav_link-color-off-default: var(--text-color-subtle);
  --tabs_nav_link-color-off-disabled: var(--text-color-subtle);
  --tabs_nav_link-color-on-default: var(--button-color-default);
  --tabs_nav_link-color-on-disabled: var(--button-color-default);

  --pills_nav_link-background-off-default: var(--button_ghost-background-default);
  --pills_nav_link-background-off-hovered: var(--clickable-background-hover);
  --pills_nav_link-background-off-pressed: var(--clickable-background-pressed);
  --pills_nav_link-background-off-disabled: var(--button_ghost-background-disabled);
  --pills_nav_link-background-on-default: var(--button_neutral-background-default);
  --pills_nav_link-background-on-hovered: var(--button_neutral-background-default);
  --pills_nav_link-background-on-pressed: var(--button_neutral-background-default);
  --pills_nav_link-background-on-disabled: var(--button_neutral-background-disabled);

  --pills_nav_link-color-off-default: var(--text-color-subtle);
  --pills_nav_link-color-off-disabled: var(--text-color-subtle);
  --pills_nav_link-color-on-default: var(--button-color-default);
  --pills_nav_link-color-on-disabled: var(--button-color-disabled);

  --webtabs_nav_link-background-off-default: transparent;
  --webtabs_nav_link-background-off-hovered: transparent;
  --webtabs_nav_link-background-off-pressed: transparent;
  --webtabs_nav_link-background-off-disabled: transparent;
  --webtabs_nav_link-background-on-default: transparent;
  --webtabs_nav_link-background-on-hovered: transparent;
  --webtabs_nav_link-background-on-pressed: transparent;
  --webtabs_nav_link-background-on-disabled: transparent;

  --webtabs_nav_link-color-off-default: var(--text-color-dimmed);
  --webtabs_nav_link-color-off-hovered: var(--webtabs_nav_link-color-on-default);
  --webtabs_nav_link-color-off-pressed: var(--webtabs_nav_link-color-on-default);
  --webtabs_nav_link-color-off-disabled: var(--text-color-disabled);
  --webtabs_nav_link-color-on-default: var(--text-color-default);
  --webtabs_nav_link-color-on-hovered: var(--webtabs_nav_link-color-on-default);
  --webtabs_nav_link-color-on-pressed: var(--webtabs_nav_link-color-on-default);
  --webtabs_nav_link-color-on-disabled: var(--text-color-disabled);

  /* </tabs> */
  /* <alerts> */

  --alert-color: var(--text-color-default);
  --alert-stroke_thickness: 4px;
  --alert-radius: 4px;

  --alert_quiet-background: var(--app-background-default); /* TODO: use menu-bg whatever that is */

  --alert_neutral-background: var(--gray-600);
  --alert_neutral-stroke: var(--gray-300);

  --alert_success-background: var(--green-900);
  --alert_success-stroke: var(--green-400);

  --alert_discovery-background: var(--purple-900);
  --alert_discovery-stroke: var(--purple-400);

  --alert_danger-background: var(--red-900);
  --alert_danger-stroke: var(--red-500);

  --alert_warning-background: var(--orange-900);
  --alert_warning-stroke: var(--orange-400);

  /* </alerts> */
  /* <misc> */

  --stroke-tracker-track-background: var(--app-background-default);
  --stroke-tracker-thumb-background: var(--green-600);
  --stroke-tracker-color: var(--text-color-default);

  --canny-theme-background: var(--canny-theme-background-dark);

  /* </misc> */
  /* <chat-comments-and-mentions> */

  --mention_foreign-background-default: var(--clickable-background-default);
  --mention_foreign-background-hover: var(--clickable-background-hover);
  --mention_foreign-background-pressed: var(--clickable-background-pressed);

  --mention_me-background-default: var(--external_link-color-default);
  --mention_me-background-hover: var(--external_link-color-hovered);
  --mention_me-background-pressed: var(--external_link-color-pressed);

  --mention-background-disabled: transparent;
  --mention-color-disabled: var(--clickable-color-disabled);

  --mention_foreign-color-default: var(--external_link-color-default);
  --mention_foreign-color-hover: var(--external_link-color-hovered);
  --mention_foreign-color-pressed: var(--external_link-color-pressed);
  --mention_me-color-default: var(--gray-1000);
  --mention_me-color-hover: var(--mention_me-color-default);
  --mention_me-color-pressed: var(--mention_me-color-default);

  --message-unread-badge: #7CB6F9;

  /* TODO: to be implemented with new themable assets propably */
  --thread-pin-background: var(--clickable-background-default);
  --thread-pin-border: var(--clickable-stroke-default);
  --thread-pin-accent: var(--blue-500);

  --chat-box-header-color: var(--gray-300);
  --chat-box-timestamp-color: var(--text-color-subtle);
  --chat-box-system-color: var(--text-color-subtle);
  --chat-box-message-color: var(--text-color-default);
  --chat-box-user-color: var(--gray-200);
  /* </chat-comments-and-mentions> */
  /* <notifications> */

  --notifications-popup-background: var(--panel-background-default);

  --notification-item-background-unread: var(--dropdown-background-default);
  --notification-item-background-read: transparent;

  --unread-notifications-dot: var(--blue-300);

  /* </notifications> */

  --vc-badge-background-speaking: var(--teal-500);
  --vc-badge-background-muted: var(--gray-600);
  --vc-badge-color: var(--text-color-default);
  --vc-speaking-indicator: #23AF31;
  --vc-speaking-glow: rgba(35, 175, 49, 0.3);
  --vc-speaking-glow-strong: rgba(35, 175, 49, 0.6);
  --user-online-dot-background: var(--teal-500);

  /* <jams> */
  --jams-gradient: linear-gradient(135deg, #FF5252 25%, #A259FF 50%, #2E6DE1 75%);
  /* </jams> */

  --user-online-dot-background: var(--teal-500);
}