/* Семантические цвета — каждое значение указывает на палитру.
   Именование функциональное: для чего используется, так и называется.
   Переключение темы происходит здесь, а не в палитре. */

:root {
  color-scheme: light;

  --ids__text: var(--ids__color-gray-950);
  --ids__text-caption: var(--ids__color-gray-600);
  --ids__link: var(--ids__color-blue-500);
  --ids__hover: var(--ids__color-green-500);
  /* Froggish: цвет логотипа и он же при наведении — светлее, как наведение ссылок IDS */
  --ids__brand: var(--ids__color-green-700);
  --ids__brand-hover: var(--ids__color-green-500);
  --ids__accent: var(--ids__color-red-500);
  --ids__code: var(--ids__color-gray-500);
  --ids__mark: var(--ids__color-yellow-500);
  --ids__surface: var(--ids__color-gray-100);
  --ids__background: var(--ids__color-white);

  --ids__border: color-mix(in srgb, var(--ids__text) 20%, transparent);

  --ids__error: var(--ids__color-red-500);
  --ids__success: var(--ids__color-green-600);
  /* Froggish: «почти» — оценка произношения 40–69%, подсказки к ответу */
  --ids__warning: var(--ids__color-yellow-700);
  /* Froggish: сетка таблиц — как в старом HTML, 1px solid серым */
  --ids__grid: var(--ids__color-gray-500);
  /* Froggish: цели дня под шапкой — дорожка бара и его заливка */
  --ids__goal-new-track: var(--ids__color-lilac-100);
  --ids__goal-new: var(--ids__color-lilac-400);
  --ids__goal-review-track: var(--ids__color-orange-100);
  --ids__goal-review: var(--ids__color-orange-400);
  --ids__goal-phrase-track: var(--ids__color-sky-100);
  --ids__goal-phrase: var(--ids__color-sky-400);
  /* Froggish: кнопки — цветом логотипа; мягкие (мелкие) — бледный фон */
  --ids__button: var(--ids__brand);
  --ids__button-text: var(--ids__color-white);
  --ids__button-soft: var(--ids__color-leaf-100);
  /* Froggish: переключатель темы — солнце, на тёмном — полумесяц */
  --ids__theme-icon: var(--ids__color-amber-600);
  /* Froggish: фон шапки и подписи «Тренажёр…» */
  --ids__head: var(--ids__color-sage-100);
}

.dark {
  color-scheme: dark;

  --ids__text: var(--ids__color-gray-200);
  --ids__text-caption: var(--ids__color-gray-400);
  --ids__link: var(--ids__color-blue-450);
  --ids__hover: var(--ids__color-green-450);
  --ids__brand: var(--ids__color-green-450);
  /* на тёмном логотип уже самый яркий зелёный — при наведении чуть глубже */
  --ids__brand-hover: var(--ids__color-green-600);
  --ids__accent: var(--ids__color-red-450);
  --ids__code: var(--ids__color-gray-400);
  --ids__mark: var(--ids__color-yellow-500);
  --ids__surface: var(--ids__color-gray-800);
  --ids__background: var(--ids__color-gray-900);

  --ids__error: var(--ids__color-red-450);
  --ids__success: var(--ids__color-green-450);
  --ids__warning: var(--ids__color-yellow-500);
  --ids__grid: var(--ids__color-gray-600);
  --ids__goal-new-track: var(--ids__color-lilac-850);
  --ids__goal-new: var(--ids__color-lilac-600);
  --ids__goal-review-track: var(--ids__color-orange-850);
  --ids__goal-review: var(--ids__color-orange-600);
  --ids__goal-phrase-track: var(--ids__color-sky-850);
  --ids__goal-phrase: var(--ids__color-sky-600);
  --ids__button: var(--ids__brand);
  /* логотип на тёмном ярко-зелёный — белый текст на нём не читается */
  --ids__button-text: var(--ids__color-gray-950);
  --ids__button-soft: var(--ids__color-leaf-850);
  --ids__theme-icon: var(--ids__color-yellow-200);
  --ids__head: var(--ids__color-mauve-500);
}

/* Froggish: на сером фоне шапки и подписи «Тренажёр…» серые подписи и
   синие ссылки тёмной темы не читаются — внутри них подписи белые (4.7),
   ссылки голубые; логотип при наведении — светлее, а не глубже. */
.dark :is(.froggish__head, .froggish__tagline) {
  --ids__text-caption: var(--ids__color-white);
  --ids__link: var(--ids__color-sky-100);
  --ids__brand-hover: var(--ids__color-leaf-100);
}

body {
  color: var(--ids__text);
  background-color: var(--ids__background);
}