:root {
  /* Background */
  --background-accent: var(--color-brand-100);
  --background-alert: var(--color-red-100);
  --background-avatar: var(--color-gray-200);
  --background-information: var(--color-blue-100);
  --background-overflow: #fff0;
  --background-overlay: var(--color-white);
  --background-primary-black: var(--color-black);
  --background-primary-white: var(--color-white);
  --background-secondary: var(--color-gray-100);
  --background-success: var(--color-lime-100);
  --background-tooltips: var(--color-gray-800);
  --background-warning: var(--color-yellow-100);
  --background-mask: rgb(255 255 255 / 80%);

  /* Borders */
  --border-alert: var(--color-red-300);
  --border-disabled: var(--color-gray-300);
  --border-focus: var(--color-brand-500);
  --border-information: var(--color-blue-300);
  --border-primary: var(--color-gray-300);
  --border-success: var(--color-lime-300);
  --border-tooltip: var(--color-gray-800);
  --border-warning: var(--color-yellow-300);

  /* Buttons */
  --button-alert: var(--color-red-500);
  --hovered-alert-button: var(--color-red-600);
  --pressed-alert-button: var(--color-red-700);
  --button-disabled: var(--color-black-3);
  --button-primary: var(--color-black);
  --hovered-primary-button: var(--color-black-8);
  --pressed-primary-button: var(--color-black-5);
  --button-secondary: var(--color-black-8);
  --hovered-secondary-background: var(--color-gray-100);
  --pressed-secondary-background: var(--color-gray-200);

  /* Hover */
  --hover-overlay: var(--color-gray-100);
  --hover-primary: var(--color-black-8);
  --hover-secondary: var(--color-gray-100);
  --hover-alert: var(--color-red-600);

  /* Pressed (Active) */
  --pressed-overlay: var(--color-gray-200);
  --pressed-primary: var(--color-black-5);
  --pressed-secondary: var(--color-gray-200);
  --pressed-alert: var(--color-red-700);

  /* Icon */
  --icon-accent: var(--color-brand-500);
  --icon-alert: var(--color-red-500);
  --icon-alert-focus: var(--color-red-600);
  --icon-disabled-black: var(--color-black-3);
  --icon-focus: var(--color-black);
  --icon-information: var(--color-blue-500);
  --icon-primary-black: var(--color-black-5);
  --icon-primary-white: var(--color-white);
  --icon-success: var(--color-lime-400);
  --icon-tooltip: var(--color-white);
  --icon-warning: var(--color-yellow-400);

  /* Text */
  --text-accent: var(--color-brand-500);
  --text-accent-dark: var(--color-brand-900);
  --text-accent-g1: #c7a384cc;
  --text-accent-g2: #ba8d68e5;
  --text-accent-g3: var(--color-brand-600);
  --text-alert: var(--color-red-800);
  --text-disabled-black: var(--color-black-3);
  --text-focus: var(--color-black);
  --text-information: var(--color-blue-800);
  --text-primary-black: var(--color-black-8);
  --text-primary-white: var(--color-white);
  --text-primary-black-fixed: var(--color-black-8);
  --text-primary-white-fixed: var(--color-white);
  --text-secondary-black: var(--color-black-5);
  --text-success: var(--color-lime-800);
  --text-tooltip-primary: var(--color-white);
  --text-tooltip-secondary: var(--color-white-5);
  --text-warning: var(--color-yellow-800);

  /* Surface */
  --surface-bold: var(--color-gray-200);
  --surface-overlay: var(--color-white);
  --surface-overlay-dimmed: var(--color-gray-800);
  --surface-mask: var(--color-white-8);
  --surface-accent: var(--color-brand-100);
  --surface-alert: var(--color-red-100);
  --surface-success: var(--color-lime-100);
  --surface-information: var(--color-blue-100);
  --surface-warning: var(--color-yellow-100);

  /* Controls */
  --controls-selected: var(--color-brand-500);
  --controls-unselected: var(--color-gray-500);
  --controls-disabled: var(--color-gray-300);
  --controls-thumb: var(--color-white);
}