/* Светлая
   Тема оформления — только цвета и тени, всё остальное в style.css (там же, в начале, — что значит каждая переменная).
   Своя тема: скопируйте этот файл, поменяйте значения и положите в data/themes на сервере или загрузите в Настройках.
   Эта тема всегда загружена как основа — в своей можно оставить только те переменные, что меняются.
   Первая строка комментария — название темы в Настройках. */
:root {
  color-scheme: light;

  /* поверхности: карточка → --fill-1 → --fill-2 → фон страницы → --fill-3 */
  --bg: hsl(0 0% 90%);
  --card: hsl(0 0% 100%);
  --layer: hsl(0 0% 95%);         /* слой, объединяющий блоки, и боковое меню — между фоном и карточкой */
  --fill-1: hsl(0 0% 97%);
  --fill-2: hsl(0 0% 94.5%);
  --fill-3: hsl(0 0% 89%);         /* наведение на фоне страницы */
  --line: hsl(0 0% 87%);
  --row-line: hsl(0 0% 93%);

  /* текст */
  --ink: hsl(30 5% 10%);          /* акцент: цифры, h1, обводка фокуса */
  --head: hsl(0 0% 36%);          /* заголовки h2/h3 — спокойнее цифр */
  --text: hsl(0 0% 34%);
  --muted: hsl(0 0% 52%);

  /* тёмные блоки: выбранное, главная кнопка, главный показатель, нижнее меню, подсказки графиков */
  --inv: hsl(30 5% 10%);
  --inv-2: hsl(30 5% 22%);        /* наведение на тёмном */
  --on-inv: hsl(0 0% 98%);        /* текст на тёмном и на красном */
  --on-inv-2: hsl(0 0% 98% / .72);/* второстепенный текст там же */
  --on-inv-mark: var(--yellow-strong); /* значок выбранного пункта бокового меню */

  /* нижнее меню телефона и «Ещё» */
  --bar: var(--inv);
  --on-bar: var(--on-inv);
  --on-bar-2: var(--on-inv-2);

  /* смысловые цвета */
  --yellow-strong: #e8b021;
  --yellow-strong-2: #c9930f;     /* ссылки; наведение на жёлтом */
  --on-yellow: hsl(30 5% 10%);    /* значок «i» на жёлтом */
  --violet: #7b61d9;              /* второй ряд графиков */
  --violet-soft: #b9abec;         /* третий, вспомогательный ряд */
  --warn-soft: hsl(43 99% 92%);   /* «нужно действие»: фон плашек и строк */
  --warn-soft-2: hsl(43 95% 87%); /* наведение там же */
  --warn-ink: hsl(38 75% 28%);    /* текст-ссылка на бледно-жёлтом */
  --on-status: hsl(0 0% 98%);     /* текст на красном и зелёном */
  --on-status-2: hsl(0 0% 98% / .72);
  --red: #c93b29;
  --red-2: #b33322;               /* наведение на красном */
  --red-soft: #fbe6e2;
  --green: #3f8a4f;
  --green-soft: #e3f0df;

  /* тени с синеватым оттенком, а не чёрные; затемнение страницы под меню «Ещё» */
  --shadow: 0 12px 30px -18px hsl(218 45% 28% / .30);
  --shadow-lift: 0 18px 36px -18px hsl(218 45% 28% / .42);
  --shadow-float: 0 18px 44px -16px hsl(218 45% 20% / .45);
  --scrim: hsl(218 30% 15% / .25);
}