:root {

  --color-black: #000000;
  --color-white: #ffffff;

  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-white-80: rgba(255, 255, 255, 0.8);

  /* ===== Brand ===== */

  --color-rock-dark: #1D434B;
  --color-rock-secondary: #A6AAB4;
  --color-rock-red: #E30613;
  --color-rock-turquoise: #36BBB6;
  --color-rock-blue: #018C98;
  --color-rock-blue-highlight: #E8F5F8; /* активне меню */
  --color-rock-turquoise-turquoise-light: #49B8BF; /* не використовується */


  /* ===== Backgrounds ===== */
  --color-bg-white: #ffffff;
  --color-bg-grey-soft: #F7F7FB; /* сірі блоки та фон інпутів */
  --color-bg-grey-highlight: #E9EAEF; /* аватарки, кружечки меню, сіра кнопка у фільтрі */
  
  /* ===== Borders ===== */
  --color-border-grey: #EBEFF2; /* роздільники на білому */
  --color-border-grey-light: #EDEDED; /* роздільники на сірому */
  --color-border-grey-light-50: #EDEDED80; /* верхній бордер нижнього тулбару головного мобільного меню */
  --color-border-light: #F2F2F2; /* бордер для кнопок нотифікацій та діалогів, аватарки на мобільному та для кнопок закриття модальних форм */

  --color-grey-dark: #3C4858; /* хрестики на слотах обраних опцій мультиселектів */

  /* ===== Extended Palette ===== */

  --color-grey-block-1: #DDDEE1; /* картка викладача - блок 1 opacity 0.5 */
  --color-grey-block-2: #E2E2E6; /* картка викладача - блок 2 opacity 0.8 */
  --color-grey-block-3: #D8D9DE; /* картка викладача - блок 3 */

  /* ===== RGBA / Transparent ===== */
  --shadow-card: rgba(130, 119, 119, 0.25); /* колір тіні для карток з тінню */
  --shadow-card-soft: rgba(186, 192, 209, 0.1);
  --shadow-light: rgba(0, 0, 0, 0.1); /* кнопка фільтр */


  --overlay-black-36: rgba(0, 0, 0, 0.36); /* backdrop для модальних вікон */

  --link-blue-10: rgba(1, 140, 152, 0.1); /* активний пункт dropdown (колір шрифту Link Blue) - не використовується */
  --grey-10: rgba(166, 170, 180, 0.1); /* окантовка dropdown - не використовується */

  --danger-color-soft: #fff7f7;
  --danger-border-color: #f2d7da;
  --warning-color: #FBF3BE;
  --warning-color-light: #F9F6DE;

  --theme-bg-page: var(--color-bg-white);
  --theme-title-primary: var(--color-rock-dark);
  --theme-title-inverse: var(--color-white);
  --theme-nav-item-hover: var(--color-bg-grey-soft);
  --theme-nav-item-bg: var(--color-bg-grey-soft);
  --dashboard-bg-header: var(--color-rock-turquoise);
  --dashboard-desktop-bg-header: var(--color-rock-turquoise);
}

/* Default system scrollbars */
html,
body {
  scrollbar-color: var(--color-rock-secondary) var(--color-bg-grey-soft);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-grey-soft);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-rock-secondary);
  border-radius: 10px;
  border: 2px solid var(--color-rock-secondary);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-rock-dark);
}