/* Цвет.
 *
 * Поверхности и текст приходят от Telegram — своих не заводим, иначе
 * приложение выглядит чужеродным в чужой теме.
 *
 * Ключевое решение по палитре категорий: НЕ восемь разных тонов, а одна
 * синяя семья в разных тинтах (как на labs.google — там три оттенка
 * одного синего, а не радуга). Восемь конфликтующих красок читались как
 * детские каракули; единое семейство даёт стиль. Цвет несёт величину —
 * крупная трата насыщеннее, — а категории различает название и позиция.
 */
:root {
  /* Фон СВОЙ, а не из темы Telegram: бледно-синий тинт — часть фирменного
   * стиля, и на белом фоне клиента он бы не появился. Из-за этого светлую
   * и тёмную тему определяем сами (data-theme ставит JS по tg.colorScheme),
   * а не наследуем цвета клиента. Текст и подсказки тоже свои, иначе они
   * рассогласуются с собственным фоном. */
  --bg:      #eef2fd;
  --surface: #ffffff;
  --text:    #17181c;
  --muted:   #71747e;
  --link:    #4a6cf0;

  --line: color-mix(in oklab, var(--text) 9%, transparent);

  /* Фирменный синий и его тинты — единственная хроматическая семья. */
  --brand:    #4a6cf0;
  --brand-2:  #6f8bf5;
  --brand-3:  #97aef8;

  /* Плитки категорий: заливка одной синей серией по глубине, от самой
   * насыщенной (главная трата) к бледной. Порядок = ранг траты. */
  /* Фон страницы сам синеватый, поэтому бледный край шкалы уходит в чистый
   * белый: иначе последняя плитка сливается с фоном и теряет границы. */
  --fill-1: color-mix(in oklab, var(--brand) 88%, #fff);
  --fill-2: color-mix(in oklab, var(--brand) 42%, var(--surface));
  --fill-3: color-mix(in oklab, var(--brand) 26%, var(--surface));
  --fill-4: color-mix(in oklab, var(--brand) 13%, var(--surface));
  --fill-5: var(--surface);
  /* Текст на самой насыщенной плитке — светлый; на остальных обычный. */
  --on-fill-1: #fff;

  --menu-bg:     #17181c;
  --menu-ink:    rgba(255, 255, 255, .60);
  --menu-on-bg:  #fff;
  --menu-on-ink: #17181c;

  --good:     #1a8f3c;
  --warning:  #c98a00;
  --critical: #d94436;

  --accent: var(--tg-theme-button-color, #4a6cf0);
  --on-accent: var(--tg-theme-button-text-color, #fff);
}

/* Тёмная тема объявлена дважды: по системной настройке — на случай
 * открытия вне Telegram, и по data-theme — его ставит JS из tg.colorScheme,
 * и он должен побеждать системную настройку в обе стороны. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:      #14161c;
    --surface: #1e2028;
    --text:    #f0f1f4;
    --muted:   #8a8c94;

    --brand:    #6f8bf5;
    --brand-2:  #93a8f8;
    --brand-3:  #b3c2fb;

    /* На тёмном фоне глубина строится подмешиванием бренда к поверхности:
     * самая насыщенная плитка светится, дальние почти сливаются с фоном. */
    --fill-1: color-mix(in oklab, var(--brand) 72%, var(--surface));
    --fill-2: color-mix(in oklab, var(--brand) 38%, var(--surface));
    --fill-3: color-mix(in oklab, var(--brand) 24%, var(--surface));
    --fill-4: color-mix(in oklab, var(--brand) 12%, var(--surface));
    --fill-5: var(--surface);
    --on-fill-1: #0e1116;

    --menu-bg:     #2b2d34;
    --menu-ink:    rgba(255, 255, 255, .58);
    --menu-on-bg:  #f0f1f4;
    --menu-on-ink: #16171b;

    --good:     #3fbf5a;
    --warning:  #d6a021;
    --critical: #e6584a;
    --accent: var(--tg-theme-button-color, #6f8bf5);
  }
}

:root[data-theme="dark"] {
    --bg:      #14161c;
    --surface: #1e2028;
    --text:    #f0f1f4;
    --muted:   #8a8c94;

    --brand:    #6f8bf5;
    --brand-2:  #93a8f8;
    --brand-3:  #b3c2fb;

    /* На тёмном фоне глубина строится подмешиванием бренда к поверхности:
     * самая насыщенная плитка светится, дальние почти сливаются с фоном. */
    --fill-1: color-mix(in oklab, var(--brand) 72%, var(--surface));
    --fill-2: color-mix(in oklab, var(--brand) 38%, var(--surface));
    --fill-3: color-mix(in oklab, var(--brand) 24%, var(--surface));
    --fill-4: color-mix(in oklab, var(--brand) 12%, var(--surface));
    --fill-5: var(--surface);
    --on-fill-1: #0e1116;

    --menu-bg:     #2b2d34;
    --menu-ink:    rgba(255, 255, 255, .58);
    --menu-on-bg:  #f0f1f4;
    --menu-on-ink: #16171b;

    --good:     #3fbf5a;
    --warning:  #d6a021;
    --critical: #e6584a;
    --accent: var(--tg-theme-button-color, #6f8bf5);
  }
/* Типографика.
 *
 * Только системный стек: веб-шрифт в мини-аппе даёт вспышку нестилизованного
 * текста на медленной сети.
 *
 * Денежные значения обязаны идти моноширинными цифрами (--num), иначе
 * суммы в столбце не выравниваются и список «дрожит» при прокрутке.
 */
:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --num: tabular-nums;

  --t-hero: 700 44px/1.02 var(--font);   /* главное число экрана */
  --t-title: 600 17px/1.3 var(--font);   /* заголовок месяца */
  --t-body: 400 15px/1.45 var(--font);
  --t-strong: 600 15px/1.45 var(--font); /* суммы в строках */
  --t-meta: 400 13px/1.4 var(--font);
  --t-small: 400 12px/1.35 var(--font);
  --t-caps: 600 11px/1.3 var(--font);    /* заголовки разделов: капс с разрядкой */

  --track-hero: -.03em;    /* крупные цифры требуют сжатия */
  --track-caps: .08em;     /* капс без разрядки слипается */
}
/* Размеры и ритм. Шаг 4px, чтобы всё вставало на общую сетку. */
:root {
  --gap-1: 4px;  --gap-2: 8px;  --gap-3: 12px;
  --gap-4: 16px; --gap-5: 24px; --gap-6: 32px;

  --radius: 14px;
  --radius-sm: 10px;

  /* Безопасные отступы Telegram: сумма выреза устройства и высоты
   * собственного заголовка клиента. Проставляются из JS, меняются на ходу. */
  --safe-top-px: var(--safe-top, env(safe-area-inset-top, 0px));
  --safe-bottom-px: var(--safe-bottom, env(safe-area-inset-bottom, 0px));

  --tabbar: 58px;   /* панель вкладок, контент не должен под неё уезжать */
}