/* ==========================================================================
   DreamVPN — токены дизайн-системы
   Один источник для лендинга, веб-кабинета и Telegram Mini App.
   Стиль — по референсам happ.so (лендинг) и synatra.me (кабинет):
   белый и светло-серый фон, синий #0A6CFF для действий, Manrope,
   градиент «голубой → фиолетовый» только в главном заголовке,
   тёмные блоки для вопросов и подвала.
   Внутри Telegram нейтрали берутся из темы Telegram (класс .tma на <html>).
   ========================================================================== */

:root {
  /* — Фирменный синий — */
  --brand: #0A6CFF;          /* главная кнопка, номера шагов, выбранное */
  --brand-press: #075BDB;
  --brand-soft: #EFF6FF;     /* фон выбранного тарифа, синие чипы */
  --brand-ink: #0052CC;      /* синий текст на светлом фоне */
  --brand-line: rgba(10, 108, 255, .18);
  --brand-glow: 0 8px 26px rgba(10, 108, 255, .32);
  --grad: linear-gradient(90deg, #22B8F0 0%, #4A7BFF 45%, #8B5CF6 100%);

  /* — Нейтрали, светлая тема — */
  --canvas: #F4F5F9;         /* фон секций и кабинета */
  --paper: #FFFFFF;          /* карточки, поля, фон лендинга */
  --ink: #0F0F0F;            /* заголовки и основной текст */
  --ink-2: #5B6170;          /* второстепенный текст */
  --ink-3: #8A90A0;          /* подсказки */
  --line: rgba(15, 17, 22, .08);
  --line-strong: rgba(15, 17, 22, .14);
  --fill: #F1F3F7;           /* серые кнопки «Выбрать», плашки */

  /* — Тёмные блоки (вопросы, подвал, «Как это работает») — */
  --night: #0F1116;
  --night-deep: #0B0D12;
  --night-card: #171A21;
  --night-line: rgba(255, 255, 255, .08);
  --night-ink: #FFFFFF;
  --night-ink-2: rgba(255, 255, 255, .62);
  --strip: linear-gradient(100deg, #06122A 0%, #0D2048 40%, #0A1A3E 70%, #07112A 100%);

  /* — Смысловые — */
  --go: #1A8C38;             /* текст «работает», скидки */
  --go-dot: #34C759;
  --go-soft: rgba(52, 199, 89, .14);
  --warn: #D9480F;
  --warn-soft: #FFF0E6;
  --stop: #E5484D;
  --stop-soft: #FDECEC;

  /* — Шрифт — */
  --font: "Manrope", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, "Roboto Mono", Consolas, monospace;

  /* — Шкала текста — */
  --t-hero: clamp(38px, 9.6vw, 76px);   /* H1 лендинга, 800, межбуквенный −0.063em */
  --t-h2: clamp(28px, 6vw, 48px);       /* заголовки секций */
  --t-h3: 19px;                         /* заголовки карточек */
  --t-lead: 17px;
  --t-body: 16px;
  --t-small: 14px;
  --t-micro: 13px;
  --t-eyebrow: 12px;                    /* надзаголовок капсом, синий */

  /* — Отступы (шаг 4) — */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* — Скругления — */
  --r-s: 10px;
  --r-m: 16px;      /* кнопки, поля */
  --r-l: 20px;      /* карточки */
  --r-xl: 28px;     /* крупные карточки и формы */
  --r-pill: 980px;

  --shadow-card: 0 1px 2px rgba(15, 17, 22, .04), 0 12px 32px -16px rgba(15, 17, 22, .14);

  /* — Движение — */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;

  --tap: 48px;
  --content: 1100px;
  --screen: 560px;

  color-scheme: light;
}

/* Тёмная тема — переключателем в кабинете или из Telegram */
:root[data-theme="dark"] {
  --brand-soft: rgba(10, 108, 255, .16);
  --brand-ink: #6EA8FF;
  --brand-line: rgba(10, 108, 255, .4);
  --canvas: #0B0D12;
  --paper: #171A21;
  --ink: #FFFFFF;
  --ink-2: rgba(255, 255, 255, .68);
  --ink-3: rgba(255, 255, 255, .45);
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);
  --fill: rgba(255, 255, 255, .07);
  --go: #3DD068;
  --warn: #FF8A4C;
  --warn-soft: rgba(255, 138, 76, .14);
  --stop: #FF6B6B;
  --stop-soft: rgba(255, 107, 107, .14);
  --shadow-card: none;
  color-scheme: dark;
}

/* ==========================================================================
   Мост к теме Telegram. telegram-web-app.js кладёт на <html> переменные
   --tg-theme-*; app.html ставит класс .tma внутри Telegram.
   Фон, карточки и текст — как у Telegram, синий — наш.
   ========================================================================== */
:root.tma {
  --canvas: var(--tg-theme-secondary-bg-color, #F4F5F9);
  --paper: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #FFFFFF));
  --ink: var(--tg-theme-text-color, #0F0F0F);
  --ink-2: var(--tg-theme-subtitle-text-color, var(--tg-theme-hint-color, #5B6170));
  --ink-3: var(--tg-theme-hint-color, #8A90A0);
  --line: color-mix(in srgb, var(--tg-theme-hint-color, #8A90A0) 20%, transparent);
  --line-strong: color-mix(in srgb, var(--tg-theme-hint-color, #8A90A0) 40%, transparent);
  --fill: color-mix(in srgb, var(--tg-theme-hint-color, #8A90A0) 12%, transparent);
  --stop: var(--tg-theme-destructive-text-color, #E5484D);
  --shadow-card: none;
}