/* Дизайн-токены. Опора на переменные темы Telegram, фолбэки — для обычного браузера. */

:root {
  color-scheme: light dark;

  /* Палитра: значения Telegram побеждают, фолбэк — светлая тема. */
  --c-page: var(--tg-theme-secondary-bg-color, #f2f2f7);
  --c-surface: var(--tg-theme-bg-color, #ffffff);
  --c-text: var(--tg-theme-text-color, #0f1115);
  --c-hint: var(--tg-theme-hint-color, #8a8a8f);
  --c-accent: var(--tg-theme-button-color, #2f7bff);
  --c-accent-text: var(--tg-theme-button-text-color, #ffffff);
  --c-link: var(--tg-theme-link-color, var(--c-accent));
  --c-danger: var(--tg-theme-destructive-text-color, #e5484d);
  --c-header: var(--tg-theme-header-bg-color, var(--c-surface));

  /* Производные поверхности: плоские заливки вместо теней. */
  --c-separator: color-mix(in srgb, var(--c-hint) 24%, transparent);
  --c-soft: color-mix(in srgb, var(--c-hint) 12%, transparent);
  --c-soft-strong: color-mix(in srgb, var(--c-hint) 20%, transparent);
  --c-accent-soft: color-mix(in srgb, var(--c-accent) 14%, transparent);
  --c-danger-soft: color-mix(in srgb, var(--c-danger) 14%, transparent);
  --c-ok: #1fab5a;
  --c-ok-soft: color-mix(in srgb, var(--c-ok) 16%, transparent);
  --c-warn: #e08a00;
  --c-warn-soft: color-mix(in srgb, var(--c-warn) 18%, transparent);
  --c-skeleton: color-mix(in srgb, var(--c-hint) 14%, transparent);
  --c-skeleton-hi: color-mix(in srgb, var(--c-hint) 26%, transparent);

  /*
   * «Чернила»: тот же оттенок, подмешанный к цвету текста. Один и тот же
   * рецепт даёт тёмный вариант на светлой теме и светлый на тёмной, поэтому
   * подпись на мягкой плашке держит контраст 4.5:1 в обеих схемах.
   * Заливки (точки статусов, кнопки) продолжают брать чистый цвет.
   */
  --c-accent-ink: color-mix(in srgb, var(--c-accent) 65%, var(--c-text));
  --c-danger-ink: color-mix(in srgb, var(--c-danger) 70%, var(--c-text));
  --c-ok-ink: color-mix(in srgb, var(--c-ok) 65%, var(--c-text));
  --c-warn-ink: color-mix(in srgb, var(--c-warn) 62%, var(--c-text));

  /* 8-pt сетка */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* Радиусы концентричны: контрол 12 внутри карточки 16 внутри шторки 20. */
  --r-sm: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  --tap: 44px;

  /*
   * Шкала кегля: 11 · 13 · 15 · 17 · 21 · 28. Внизу шаг мелкий (плотный
   * интерфейс со списками), вверху крупный (заголовок экрана должен спорить
   * с контентом). Промежуточных значений нет — иначе иерархия размывается.
   */
  --fs-caption: 11px;
  --fs-footnote: 13px;
  --fs-callout: 15px;
  --fs-body: 17px;
  --fs-title: 21px;
  --fs-display: 28px;

  /* Интерлиньяж падает с ростом кегля: крупный текст читается компактнее. */
  --lh-tight: 1.15;
  --lh-title: 1.24;
  --lh-snug: 1.32;
  --lh-body: 1.5;

  /* Трекинг зависит от кегля: крупное поджимаем, мелкое разряжаем. */
  --tr-display: -0.022em;
  --tr-title: -0.015em;
  --tr-tight: -0.01em;
  --tr-caption: 0.012em;
  --tr-caps: 0.06em;

  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /*
   * Движение. Только три длительности: отклик на палец, смена состояния,
   * приход шторки. Кривая одна — сильный ease-out: движение начинается сразу,
   * поэтому интерфейс кажется быстрее, чем есть.
   */
  --dur-fast: 110ms;
  --dur: 180ms;
  --dur-slow: 260ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --viewport: var(--tg-viewport-stable-height, 100dvh);
}

/* Фолбэки для тёмной темы, когда Telegram-переменных нет (обычный браузер). */
@media (prefers-color-scheme: dark) {
  :root {
    --c-page: var(--tg-theme-secondary-bg-color, #101114);
    --c-surface: var(--tg-theme-bg-color, #1b1d21);
    --c-text: var(--tg-theme-text-color, #f2f3f5);
    --c-hint: var(--tg-theme-hint-color, #8d9099);
    --c-accent: var(--tg-theme-button-color, #4d8dff);
    --c-danger: var(--tg-theme-destructive-text-color, #ff6b6e);
    --c-ok: #35c46f;
    --c-warn: #f0a72a;
  }
}

/* Явная схема от Telegram.WebApp.colorScheme — перекрывает медиазапрос. */
html[data-scheme='dark'] {
  color-scheme: dark;
  --c-page: var(--tg-theme-secondary-bg-color, #101114);
  --c-surface: var(--tg-theme-bg-color, #1b1d21);
  --c-text: var(--tg-theme-text-color, #f2f3f5);
  --c-hint: var(--tg-theme-hint-color, #8d9099);
  --c-accent: var(--tg-theme-button-color, #4d8dff);
  --c-danger: var(--tg-theme-destructive-text-color, #ff6b6e);
  --c-ok: #35c46f;
  --c-warn: #f0a72a;
  /* на тёмном фоне разделитель тонет — поднимаем его отдельно от подписей */
  --c-separator: color-mix(in srgb, var(--c-hint) 32%, transparent);
}

html[data-scheme='light'] {
  color-scheme: light;
  --c-page: var(--tg-theme-secondary-bg-color, #f2f2f7);
  --c-surface: var(--tg-theme-bg-color, #ffffff);
  --c-text: var(--tg-theme-text-color, #0f1115);
  --c-hint: var(--tg-theme-hint-color, #8a8a8f);
  --c-accent: var(--tg-theme-button-color, #2f7bff);
  --c-danger: var(--tg-theme-destructive-text-color, #e5484d);
  --c-ok: #1fab5a;
  --c-warn: #e08a00;
  --c-separator: color-mix(in srgb, var(--c-hint) 24%, transparent);
}