:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-grey-010: #f8f8f8;
  --color-grey-020: #a0a0a0;
  --color-grey-050: #d9d9d9;
  --color-grey-100: #a4acc1;
  --color-grey-200: #ababab;
  --color-grey-300: #626570;
  --color-grey-400: #464646;
  --color-blue-050: #347ce9;
  --color-blue-100: #265aa6;
  --color-blue-200: #16295b;
  --color-highlight: #ffc45a;
  --color-red: #ff3030;
  --color-green: #00bd00;
}

/*
 * Семантичні токени: для чого колір, а не який він. Значення ті самі, що на
 * zp.edu.ua, бо на них розраховані спільні з ним плагіни (панель доступності
 * ms-accessibility, чат wp-rag-assistant) і частина стилів, перенесених звідти
 * (section-news.css). Палітра вище однакова в обох темах; у темній змінюються
 * лише ці токени і дві фірмові сині (нижче), а решту правил для темної теми
 * зібрано в dark-theme.css.
 */
:root {
  color-scheme: light;

  /* Сторінка і поверхні: від самої сторінки до того, що лежить над нею. */
  --color-bg-primary: #ffffff;
  --color-bg-primary--rgb: 255, 255, 255;
  --color-bg-secondary: #f8f8f8;
  --color-bg-tertiary: #f0f0f0;
  --color-surface-card: #ffffff;
  --color-surface-overlay: rgba(0, 0, 0, 0.5);

  /* Текст. */
  --color-text-primary: #000000;
  --color-text-secondary: #626570;
  --color-text-muted: #a0a0a0;
  --color-text-heading: #16295b;

  /* Посилання, активні стани, іконки, що реагують на вказівник. */
  --color-link: #265aa6;
  --color-link-hover: #347ce9;
  --color-accent: #265aa6;

  /* Тонкі лінії між частинами сторінки і сильніша лінія полів та контурних кнопок. */
  --color-border: #d9d9d9;
  --color-border-strong: #16295b;

  /*
   * Канали для напівпрозорих заливок: rgba(var(--color-ink--rgb), 0.05) —
   * ледь сірий на світлій сторінці і ледь світлий серпанок на темній.
   */
  --color-ink--rgb: 0, 0, 0;
  --color-tint--rgb: 22, 41, 91;
}

/*
 * Темна тема. Атрибут data-theme ставить на <html> скрипт у <head>
 * (inc/enqueue.php) ще до першого малювання. Значення — як на zp.edu.ua:
 * холодний графіт із ледь помітною синявою, що краще стоїть поруч із темно-
 * синьою шапкою, ніж нейтральний сірий, і теплий майже білий текст, бо чисто
 * білий на майже чорному «світиться» і втомлює очі на довгому читанні.
 */
html[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-primary: #161b1f;
  --color-bg-primary--rgb: 22, 27, 31;
  --color-bg-secondary: #1a2025;
  --color-bg-tertiary: #283036;
  --color-surface-card: #1f262b;
  --color-surface-overlay: rgba(0, 0, 0, 0.7);

  --color-text-primary: #ebe8e4;
  --color-text-secondary: #aeb8bd;
  --color-text-muted: #86939b;
  --color-text-heading: #f6f3ef;

  --color-link: #3ea6ff;
  --color-link-hover: #7cc2ff;
  --color-accent: #3ea6ff;

  --color-border: #2c353b;
  --color-border-strong: #4b565e;

  --color-ink--rgb: 255, 255, 255;
  --color-tint--rgb: 255, 255, 255;

  /*
   * Фірмові сині — єдина частина палітри з темним варіантом. Повний темно-
   * синій великими площами (шапка, темні секції, підвал) на темній сторінці
   * сліпить, тож тут він на крок глибший, а яскравіший синій іде за ним.
   * Білий текст на обох лишається контрастнішим за 7:1.
   */
  --color-blue-200: #13234d;
  --color-blue-100: #224f92;
}

@media (max-width: 899px) {
  :root {
    --wrap: 3vw;
    --wrap-1: 5vw;
    --wrap-2: 5vw;
    --wrap-colored: 5vw;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  :root {
    --wrap: 2vw;
    --wrap-1: 5vw;
    --wrap-2: 5vw;
    --wrap-colored: 5vw;
  }
}

@media (min-width: 1200px) and (max-width: 2199px) {
  :root {
    --wrap: 2.604vw;
    --wrap-1: 15vw;
    --wrap-2: 22.708vw;
    --wrap-colored: calc(var(--wrap-1) - var(--wrap));
  }
}

@media (min-width: 2200px) {
  :root {
    --wrap: 5vw;
    --wrap-1: 15vw;
    --wrap-2: 23.437vw;
    --wrap-colored: calc(var(--wrap-1) - var(--wrap));
  }
}

/* Смуга прокрутки сторінки — як на zp.edu.ua: тонка (4px), синій повзунок на світлій
   доріжці; у темній темі кольори беруться з її змінних. Firefox розуміє лише
   scrollbar-color/-width, тож для нього те саме записано окремо — лише там, де
   ::-webkit-scrollbar немає: побачивши scrollbar-color, Chrome ігнорував би 4px нижче. */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-blue-100) var(--color-bg-secondary);
  }
}

::-webkit-scrollbar {
  width: 4px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--color-blue-100);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-blue-200);
}