/* Тема neo — чистый mobile-first вид, тема по умолчанию.
   Здесь только токены: разметка и размеры лежат в styles.css.

   Схема двухслойная: *-base задают нашу палитру (светлую и тёмную),
   а рабочие токены берут значение из Telegram, если оно есть, и
   откатываются на нашу базу. Ссылаться переменной на саму себя нельзя —
   это цикл, и браузер обнуляет её целиком. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 18px;
  --radius-sm: 12px;

  --bg-base: #f2f3f6;
  --surface-base: #ffffff;
  --raised-base: #ffffff;
  --text-base: #16181d;
  --muted-base: #71767f;

  --accent-base: #2f6fed;
  --accent-soft: #e8f0ff;
  --on-accent-base: #ffffff;

  --ok: #12a150;
  --danger: #e5484d;

  --shadow-sm: 0 1px 2px rgba(16, 18, 22, .06);
  --shadow-accent: 0 6px 16px rgba(47, 111, 237, .28);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-base: #0f1116;
    --surface-base: #191c23;
    --raised-base: #232730;
    --text-base: #f0f2f5;
    --muted-base: #939aa6;

    --accent-base: #5b8cff;
    --accent-soft: #1c2740;
    --on-accent-base: #0b0d12;

    --ok: #3dd68c;
    --danger: #ff6369;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-accent: 0 6px 16px rgba(91, 140, 255, .3);
  }
}

/* Рабочие токены: приоритет у палитры Telegram, чтобы Mini App не выбивался
   из клиента; вне Telegram переменные --tg-* просто не заданы. */
:root {
  --bg:        var(--tg-theme-secondary-bg-color, var(--bg-base));
  --surface:   var(--tg-theme-bg-color,           var(--surface-base));
  --raised:    var(--raised-base);
  --text:      var(--tg-theme-text-color,         var(--text-base));
  --muted:     var(--tg-theme-hint-color,         var(--muted-base));
  --accent:    var(--tg-theme-button-color,       var(--accent-base));
  --on-accent: var(--tg-theme-button-text-color,  var(--on-accent-base));
}