:root {
  /* === Белые и чёрные === */
  --color-white: #ffffff;
  --color-black: #18191b;

  /* === Серые оттенки === */
  --color-gray-25: #dadbdd;
  --color-gray-50: #e9ecef; /* светлый фон footer */
  --color-gray-100: #bfc2c6; /* бордеры, контейнеры */
  --color-gray-150: #a1a5aa;
  --color-gray-200: #9ea2a8; /* текст/иконки (dark) */
  --color-gray-250: #8e8e93;
  --color-gray-300: #7d8288; /* toggle и dim text */
  --color-gray-400: #65696f; /* обычный серый текст */
  --color-gray-500: #4d5055; /* тёмно-серый текст */
  --color-gray-600: #383a3d; /* navbar text (light) */
  --color-gray-700: #26282a; /* вторичный текст */
  --color-gray-800: #1b3658; /* иконки (light) */

  /* === Синие оттенки === */
  --color-blue-100: #206ce8; /* основной яркий синий */
  --color-blue-200: #174880; /* брендовое тёмно-синее */
  --color-blue-250: #13345f33;
  --color-blue-300: #07295f; /* градиент dark слева */
  --color-blue-400: #08387d; /* градиент dark справа */
  --color-blue-450: #25446d;
  --color-blue-500: #3d6394; /* светлая тень (базовая) */
  --color-blue-900: #a4bfe2;

  /* === Градиенты === */
  --gradient-blue-dark: linear-gradient(80.66deg, #07295f 59.95%, #08387d 100%);

  /* === Тени и прозрачности (RGBA через HEX) === */
  --shadow-blue-0: #1748801a;
  --shadow-blue-1: #206ce81a;
  --shadow-blue-5: #206ce80d; /* тёмная тень 5% */
  --shadow-blue-20: #206ce833; /* тёмная тень 20% */
  --shadow-light-5: #3d63940d; /* светлая тень 5% */
  --shadow-light-10: #3d63941a; /* светлая тень 10% */
  --shadow-light-15: #3d639433;

  /* === Тёмные фоны === */
  --color-dark-900: #0e131e; /* основной фон dark */
  --color-dark-800: #161f2c; /* footer и navbar dark */

  --color-error: #d34121;

  /* === Основной бренд и фон === */
  --brand-color: var(--color-blue-100);
  --brand-second: var(--color-blue-100);
  --brand-to-gray: var(--color-gray-200);
  --bg-color: var(--color-dark-900);
  --footer-bg-color: var(--color-dark-800);
  --navbar-bg-color: var(--color-dark-800);
  --slider-primary-bg: var(--gradient-blue-dark);

  /* === Цвета текста === */
  --text-default: var(--color-white);
  --text-secondary: var(--color-gray-200);
  --text-neutral-dim: var(--color-gray-200);
  --text-dark-gray: var(--color-gray-200);
  --text-gray: var(--color-gray-200);
  --navbar-text: var(--color-gray-200);
  --white-button-text: var(--color-white);
  --badge-text: var(--color-gray-200);
  --intresting-text: var(--color-gray-200);
  --text-title-contrast-min: var(--color-gray-200);
  --text-secondary-contrast-min: var(--color-gray-200);
  --notification-text: var(--color-gray-200);
  --text-lang: var(--color-blue-900);

  /* === Кнопки === */
  --button-primary-text: var(--color-white);
  --button-white: var(--color-blue-100);
  --button-half-transparent: var(--color-blue-900);
  --button-half-transparent-text: var(--color-blue-900);

  /* === Переключатели (toggle) === */
  --toggle-bg: var(--color-gray-300);
  --toggle-bg-active: var(--color-blue-100);
  --toggle-circle: var(--color-dark-900);
  --toggle-circle-active: var(--color-white);
  --toggle-price-text: var(--color-gray-300);
  --toggle-price-text-active: var(--color-white);

  /* === Блоки/карточки/особые секции === */
  --intresting-bg: var(--gradient-blue-dark);

  /* === Бордеры и контейнеры === */
  --border-default: var(--color-gray-100);
  --border-active: var(--color-gray-200);
  --container-border-color: var(--color-gray-100);
  --border-contrast-min: var(--color-gray-200);
  --border-contrast-min2: var(--color-gray-200);
  --container-low-contrast: var(--shadow-blue-1);
  --border-tarif: var(--color-blue-100);
  --gray-to-brand: var(--color-blue-100);
  --notification-bg: var(--color-dark-900);
  --notification-border: var(--color-gray-200);

  /* === Тени (box-shadow) === */
  --shadow-0: 0px 5px 12px 0px var(--shadow-blue-20),
    0px 16px 12px 0px var(--shadow-blue-5),
    0px 24px 15px 0px var(--shadow-blue-5),
    0px 40px 16px 0px var(--shadow-blue-5),
    0px 43px 25px 0px var(--shadow-blue-5);
  --shadow-1: 0px 5px 12px 0px var(--shadow-blue-20),
    0px 16px 12px 0px var(--shadow-blue-5),
    0px 24px 15px 0px var(--shadow-blue-5),
    0px 40px 16px 0px var(--shadow-blue-5),
    0px 43px 25px 0px var(--shadow-blue-5);
  --shadow-2: 0px 5px 12px 0px var(--shadow-blue-20),
    0px 16px 12px 0px var(--shadow-blue-5),
    0px 24px 15px 0px var(--shadow-blue-5),
    0px 40px 16px 0px var(--shadow-blue-5),
    0px 43px 25px 0px var(--shadow-blue-5);
}

.darkStyle .makeItBright {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7455%)
    hue-rotate(111deg) brightness(117%) contrast(104%);
}

.darkStyle .priceStarFilter {
  filter: brightness(0) saturate(100%) invert(47%) sepia(89%) saturate(5552%)
    hue-rotate(209deg) brightness(95%) contrast(91%);
}

.darkStyle .makeItBrand {
  filter: brightness(0) saturate(100%) invert(29%) sepia(84%) saturate(1953%)
    hue-rotate(208deg) brightness(94%) contrast(92%);
}