/* ─────────────────────────────────────────────────────────────────────────
   Единая палитра всех Mini App. Один файл — один источник цвета.

   Значения взяты из макета «Цвета светлая тема» / «Цвета тёмная тема».
   Палитра фиксированная: от Telegram берём только признак light/dark
   (data-theme ставит theme-sync.js), а собственные цвета клиента не
   наследуем — иначе пользователь с кастомной темой увидит не наш бренд.

   Токены:
     --bg              фон основной
     --surface         форма: заливка
     --surface-border  форма: рамка
     --text-strong     текст заголовки
     --text            текст основной
     --text-soft       текст основной, ослабленный
     --text-disabled   текст внутри форм, неактивный (placeholder)
     --btn-bg          кнопка
     --btn-text        кнопка текст

   Производные (в макете цветов нет, выведены под палитру):
     --accent, --accent-soft, --link, --danger, --line, --shadow
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Inter Tight";
  font-weight: 400 700;
  src: url("/webapp/fonts/inter-tight.woff2") format("woff2");
}

:root,
html[data-theme="light"] {
  color-scheme: light;

  --bg: #F7F4F1;
  --surface: #ffffff;
  --surface-border: #E3DACF;
  --text-strong: #363030;
  --text: #6e625c;
  --text-soft: #8e8480;
  --text-disabled: #aba7a2;
  --btn-bg: #363030;
  --btn-text: #ffbf6b;

  --accent: #ffbf6b;
  --accent-soft: rgba(253, 188, 99, 0.2);
  /* Оранжевый как текст на фоне: сам #ffbf6b на светлом нечитаем (1.7:1). */
  --accent-text: #a8701a;
  --link: #3a6ff7;
  --danger: #d93f3f;
  --line: rgba(54, 47, 45, 0.12);
  --shadow: 0 1px 3px rgba(54, 47, 45, 0.08);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #363030;
  --surface: #443b39;
  --surface-border: #666161;
  --text-strong: #ffffff;
  --text: #c6c6c6;
  --text-soft: #8d8680;
  --text-disabled: #8c8989;
  --btn-bg: #ffbf6b;
  --btn-text: #363030;

  --accent: #ffbf6b;
  --accent-soft: rgba(253, 188, 99, 0.18);
  --accent-text: #ffbf6b;
  --link: #7c9bff;
  --danger: #ff7a75;
  --line: rgba(255, 255, 255, 0.14);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Тема ОС — запасной путь на случай, если Telegram ещё не отдал colorScheme
   (первый кадр до theme-sync.js) или страница открыта вне мессенджера. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #363030;
    --surface: #443b39;
    --surface-border: #666161;
    --text-strong: #ffffff;
    --text: #c6c6c6;
    --text-soft: #8d8680;
    --text-disabled: #8c8989;
    --btn-bg: #ffbf6b;
    --btn-text: #363030;

    --accent: #ffbf6b;
    --accent-soft: rgba(253, 188, 99, 0.18);
    --link: #7c9bff;
    --danger: #ff7a75;
    --line: rgba(255, 255, 255, 0.14);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  }
}

/* Переменные Telegram — псевдонимы наших токенов. Страницы, которые читают
   --tg-theme-*, получают бренд без правок. Сам telegram-web-app.js пишет эти
   переменные инлайном в style документа (инлайн сильнее таблицы стилей),
   поэтому theme-sync.js перезаписывает их теми же значениями. */
:root {
  --tg-theme-bg-color: var(--bg);
  --tg-theme-secondary-bg-color: var(--surface);
  --tg-theme-section-bg-color: var(--surface);
  --tg-theme-text-color: var(--text-strong);
  --tg-theme-hint-color: var(--text-soft);
  --tg-theme-subtitle-text-color: var(--text-soft);
  --tg-theme-link-color: var(--link);
  --tg-theme-button-color: var(--btn-bg);
  --tg-theme-button-text-color: var(--btn-text);
  --tg-theme-destructive-text-color: var(--danger);
  --tg-theme-header-bg-color: var(--bg);
  --tg-theme-bottom-bar-bg-color: var(--bg);
  --tg-theme-accent-text-color: var(--accent);
  --tg-theme-section-separator-color: var(--line);
}

/* ── Общая база форм и типографики ──────────────────────────────────────
   Только цвет и те свойства, что уже одинаковы во всех Mini App. Размеры и
   раскладка остаются за страницами: у них разные макеты. */

body {
  background: var(--bg);
  color: var(--text);
}

h1,
h2,
h3 {
  color: var(--text-strong);
}

a {
  color: var(--link);
}

input,
select,
textarea {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  color: var(--text-strong);
  caret-color: var(--accent);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-disabled);
  opacity: 1;
}

input:disabled,
select:disabled,
textarea:disabled {
  color: var(--text-disabled);
}