:root {

  /* Surface */
  --surface-color-surface-base: rgb(0, 0, 0); /* Основная подложка для фона */
  --surface-color-surface-main: rgb(20, 21, 23); /* Основной background контейнера поверх темного фона base */
  --surface-color-surface-secondary: rgb(34, 34, 38);
  --surface-color-surface-supplementary: rgb(28, 29, 32);
  --surface-color-surface-supplementary-light: rgb(41, 42, 47);
  --surface-color-surface-modal-default: rgb(14, 15, 16);

  /* Background */
  --background-brand-color-bg-brand-soft: rgb(207, 217, 252);
  --background-brand-color-bg-brand-soft-hover: rgb(178, 194, 250);
  --background-brand-color-bg-brand-soft-pressed: rgb(145, 167, 248);
  --background-brand-color-bg-brand: rgb(95, 128, 245);
  --background-brand-color-bg-brand-hover: rgb(53, 94, 242);
  --background-brand-color-bg-brand-pressed: rgb(15, 64, 240);
  --background-oncolor-color-bg-oncolor: rgb(255, 255, 255);
  --background-oncolor-color-bg-oncolor-hover: rgba(255, 255, 255, 0.9);
  --background-oncolor-color-bg-oncolor-pressed: rgba(255, 255, 255, 0.75);
  --background-neutral-color-bg-neutral-soft: rgba(91, 93, 103, 0.3);
  --background-neutral-color-bg-neutral-soft-hover: rgba(91, 93, 103, 0.5);
  --background-neutral-color-bg-neutral-soft-pressed: rgba(91, 93, 103, 0.75);
  --background-neutral-color-bg-neutral: rgb(34, 34, 38);
  --background-neutral-color-bg-neutral-hover: rgb(41, 42, 47);
  --background-neutral-color-bg-neutral-pressed: rgb(67, 68, 76);
  --background-ghost-color-bg-ghost: rgba(91, 93, 103, 0);
  --background-ghost-color-bg-ghost-hover: rgba(91, 93, 103, 0.3);
  --background-ghost-color-bg-ghost-pressed: rgba(91, 93, 103, 0.5);
  --background-oncolor-color-bg-oncolor-soft: rgba(255, 255, 255, 0.2);
  --background-oncolor-color-bg-oncolor-soft-hover: rgba(255, 255, 255, 0.3);
  --background-oncolor-color-bg-oncolor-soft-pressed: rgba(255, 255, 255, 0.5);
  --background-paywall-color-bg-paywall: rgb(145, 121, 253);
  --background-paywall-color-bg-paywall-hover: rgb(110, 78, 249);
  --background-paywall-color-bg-paywall-pressed: rgb(86, 36, 221);
  --background-paywall-color-bg-paywall-soft: rgba(145, 121, 253, 0.2);
  --background-paywall-color-bg-paywall-soft-hover: rgba(145, 121, 253, 0.3);
  --background-paywall-color-bg-paywall-soft-pressed: rgba(145, 121, 253, 0.5);
  --background-status-color-bg-success-bold: rgb(14, 101, 75);
  --background-status-color-bg-success-bold-hover: rgb(0, 83, 58);
  --background-status-color-bg-success-bold-pressed: rgb(2, 46, 33);
  --background-status-color-bg-warning-bold: rgb(161, 98, 7);
  --background-status-color-bg-warning-bold-hover: rgb(202, 138, 4);
  --background-status-color-bg-warning-bold-pressed: rgb(234, 179, 8);
  --background-status-color-bg-bold-danger: rgb(112, 19, 16);
  --background-status-color-bg-danger-bold-hover: rgb(138, 30, 23);
  --background-status-color-bg-danger-bold-pressed: rgb(163, 31, 22);
  --background-neutral-color-bg-bold: rgb(20, 21, 23);
  --background-neutral-color-bg-bold-hover: rgb(28, 29, 32);
  --background-neutral-color-bg-bold-pressed: rgb(34, 34, 38);
  --background-other-color-bg-tray-default: rgba(91, 93, 103, 0.3);
  --background-oncolor-color-bg-oncolor-softest: rgba(255, 255, 255, 0.1);
  --background-oncolor-color-bg-oncolor-softest-hover: rgba(255, 255, 255, 0.2);
  --background-oncolor-color-bg-oncolor-softest-pressed: rgba(255, 255, 255, 0.3);
  --background-inverse-color-bg-inverse: rgb(255, 255, 255);
  --background-inverse-color-bg-inverse-hover: rgba(255, 255, 255, 0.75);
  --background-inverse-color-bg-inverse-pressed: rgba(255, 255, 255, 0.5);
  --background-neutral-color-bg-bold-blur: rgba(14, 15, 16, 0.75);
  --background-neutral-color-bg-bold-blur-hover: rgba(14, 15, 16, 0.5);
  --background-neutral-color-bg-bold-blur-pressed: rgba(14, 15, 16, 0.4);
  --background-other-color-bg-selected-brand: rgb(145, 167, 248);
  --background-status-color-bg-success: rgb(34, 197, 105);
  --background-status-color-bg-success-hover: rgb(22, 163, 93);
  --background-status-color-bg-success-pressed: rgb(21, 128, 85);
  --background-status-color-bg-warning: rgb(250, 204, 21);
  --background-status-color-bg-warning-hover: rgb(234, 179, 8);
  --background-status-color-bg-warning-pressed: rgb(202, 138, 4);
  --background-status-color-bg-danger: rgb(222, 84, 74);
  --background-status-color-bg-danger-hover: rgb(197, 45, 34);
  --background-status-color-bg-danger-pressed: rgb(163, 31, 22);
  --background-other-color-bg-selected-light: rgb(255, 255, 255);
  --background-paywall-color-bg-paywall-softest: rgba(145, 121, 253, 0.1);
  --background-paywall-color-bg-paywall-softest-hover: rgba(145, 121, 253, 0.2);
  --background-paywall-color-bg-paywall-softest-pressed: rgba(145, 121, 253, 0.4);
  --background-oncolor-color-bg-oncolor-pale: rgba(255, 255, 255, 0.05);
  --background-oncolor-color-bg-oncolor-pale-hover: rgba(255, 255, 255, 0.1);
  --background-oncolor-color-bg-oncolor-pale-pressed: rgba(255, 255, 255, 0.2);
  --background-status-color-bg-warning-overlay: rgba(250, 204, 21, 0.15);
  --background-status-color-bg-danger-overlay: rgba(222, 84, 74, 0.15);
  --background-status-color-bg-success-overlay: rgba(22, 163, 93, 0.15);
  --background-other-color-bg-brand-overlay: rgba(95, 128, 245, 0.15);
  --background-brand-color-bg-brand-alfa: rgba(95, 128, 245, 0.5);
  --background-brand-color-bg-brand-alfa-hover: rgba(95, 128, 245, 0.75);
  --background-brand-color-bg-brand-alfa-pressed: rgba(95, 128, 245, 0.9);
  --background-brand-color-bg-brand-alfa-soft: rgba(95, 128, 245, 0.25);
  --background-brand-color-bg-brand-alfa-soft-hover: rgba(95, 128, 245, 0.5);
  --background-brand-color-bg-brand-alfa-soft-pressed: rgba(95, 128, 245, 0.75);
  --background-neutral-color-bg-neutral-blur: rgba(34, 34, 38, 0.9);

  /* Text */
  --text-color-text: rgb(255, 255, 255);
  --text-color-text-hover: rgba(255, 255, 255, 0.5);
  --text-color-text-tertiary: rgb(153, 155, 163);
  --text-color-text-tertiary-hover: rgb(255, 255, 255);
  --text-color-text-supplementary: rgb(91, 93, 103);
  --text-color-text-supplementary-hover: rgb(255, 255, 255);
  --text-oncolor-color-text-tertiary-oncolor: rgba(255, 255, 255, 0.5);
  --text-oncolor-color-text-tertiary-oncolor-hover: rgb(255, 255, 255);
  --text-color-text-inverse: rgb(28, 29, 32);
  --text-color-text-inverse-hover: rgb(153, 155, 163);
  --text-color-text-disabled: rgba(255, 255, 255, 0.3);
  --text-color-text-brand: rgb(145, 167, 248);
  --text-color-text-brand-hover: rgb(95, 128, 245);
  --text-color-text-brand-pressed: rgb(77, 113, 244);
  --text-links-color-text-link: rgb(95, 128, 245);
  --text-links-color-text-link-hover: rgb(77, 113, 244);
  --text-links-color-text-link-pressed: rgb(53, 94, 242);
  --text-color-text-selected-light: rgb(255, 255, 255);
  --text-color-text-selected-brand: rgb(145, 167, 248);
  --text-color-text-danger: rgb(248, 113, 113);
  --text-color-text-warning: rgb(250, 204, 21);
  --text-color-text-success: rgb(74, 222, 128);
  --text-color-text-info: rgb(145, 167, 248);
  --text-color-text-paywall: rgb(151, 138, 252);
  --text-oncolor-color-text-secondary-oncolor: rgba(255, 255, 255, 0.75);
  --text-oncolor-color-text-secondary-oncolor-hover: rgb(255, 255, 255);
  --text-links-color-text-link-pale: rgba(255, 255, 255, 0.5);
  --text-links-color-text-link-pale-hover: rgba(255, 255, 255, 0.75);
  --text-links-color-text-link-pale-pressed: rgb(255, 255, 255);
  --text-color-text-secondary: rgb(220, 221, 227);
  --text-color-text-secondary-hover: rgb(153, 155, 163);

  /* Graphic */
  --graphic-base-color-icon: rgb(255, 255, 255);
  --graphic-base-color-icon-hover: rgb(153, 155, 163);
  --graphic-base-color-icon-secondary: rgb(153, 155, 163);
  --graphic-base-color-icon-secondary-hover: rgb(255, 255, 255);
  --graphic-base-color-icon-tertiary: rgb(91, 93, 103);
  --graphic-base-color-icon-tertiary-hover: rgb(255, 255, 255);
  --graphic-inverse-color-icon-inverse: rgb(28, 29, 32);
  --graphic-inverse-color-icon-inverse-hover: rgb(153, 155, 163);
  --graphic-brand-color-icon-brand: rgb(145, 167, 248);
  --graphic-brand-color-icon-brand-hover: rgb(95, 128, 245);
  --graphic-brand-color-icon-brand-pressed: rgb(77, 113, 244);
  --graphic-other-color-icon-selected-brand: rgb(145, 167, 248);
  --graphic-other-color-icon-danger: rgb(248, 113, 113);
  --graphic-other-color-icon-warning: rgb(250, 204, 21);
  --graphic-other-color-icon-success: rgb(74, 222, 128);
  --graphic-other-color-icon-info: rgb(145, 167, 248);
  --graphic-other-color-icon-paywall: rgb(145, 121, 253);
  --graphic-brand-color-icon-brand-oncolor: rgb(95, 128, 245);
  --graphic-brand-color-icon-brand-oncolor-hover: rgb(77, 113, 244);
  --graphic-oncolor-color-icon-secondary-oncolor: rgba(255, 255, 255, 0.75);
  --graphic-oncolor-color-icon-secondary-oncolor-hover: rgb(255, 255, 255);
  --graphic-oncolor-color-icon-tertiary-oncolor: rgba(255, 255, 255, 0.5);
  --graphic-oncolor-color-icon-tertiary-oncolor-hover: rgb(255, 255, 255);
  --graphic-other-color-icon-disabled: rgb(41, 42, 47);
  --graphic-other-color-icon-favorite: rgb(248, 113, 113);
  --graphic-other-color-icon-favorite-hover: rgb(252, 165, 165);

  /* Border */
  --border-color-border-soft: rgba(91, 93, 103, 0.2);
  --border-color-border-soft-hover: rgba(91, 93, 103, 0.4);
  --border-color-border-soft-presssed: rgba(91, 93, 103, 0.75);
  --border-color-border: rgba(91, 93, 103, 0.4);
  --border-color-border-hover: rgba(91, 93, 103, 0.75);
  --border-color-border-presssed: rgba(91, 93, 103, 0.9);
  --border-color-border-cover: rgba(255, 255, 255, 0.1);
  --border-color-border-bold: rgb(67, 68, 76);
  --border-color-border-bold-hover: rgb(153, 155, 163);
  --border-color-border-bold-presssed: rgb(199, 201, 212);
  --border-color-border-brand-soft: rgba(95, 128, 245, 0.5);
  --border-color-border-brand-soft-hover: rgb(95, 128, 245);
  --border-color-border-selected: rgb(67, 68, 76);
  --border-color-border-selected-hover: rgb(153, 155, 163);
  --border-color-border-brand: rgb(95, 128, 245);
  --border-color-border-brand-hover: rgb(53, 94, 242);
  --border-color-border-error-bold: rgb(248, 113, 113);
  --border-color-border-warning-bold: rgb(253, 224, 71);
  --border-color-border-success-bold: rgb(74, 222, 128);
  --border-color-border-oncolor-soft: rgba(255, 255, 255, 0.1);
  --border-color-border-oncolor-soft-hover: rgba(255, 255, 255, 0.3);
  --border-color-border-paywall: rgb(145, 121, 253);
  --border-color-border-paywall-hover: rgb(101, 54, 241);
  --border-color-border-paywall-soft-hover: rgba(145, 121, 253, 0.3);
  --border-color-border-paywall-soft: rgba(145, 121, 253, 0.2);
  --border-color-border-image: rgba(255, 255, 255, 0.05);

  /* Overlays */
  --overlays-paywall-cover-overlay: rgba(14, 15, 16, 0.7);
  --overlays-modal-overlay: rgba(14, 15, 16, 0.7);
  --overlays-avatar-overlay: rgba(14, 15, 16, 0.4);
  --overlays-hover-image-overlay: rgba(14, 15, 16, 0.2);
  --overlays-video-overlay: rgba(14, 15, 16, 0.7);
  --overlays-video-overlay-hover: rgba(14, 15, 16, 0.8);
}