/* Design tokens — палитра «777 GAMES» (глубокий чёрный + красный акцент).
   Старые имена переменных (--c-surface, --r-lg, --elev-*, --d-*, --ease-*)
   сохранены и перемаплены на новые значения: экраны в js/screens/* ссылаются
   на них инлайном и трогать их нельзя. Новые токены (--grad-red, --glow-accent,
   --c-card-3, --r-card, --r-pill, --ease-expo …) добавлены рядом. */

:root {
  /* ── Colors ── */
  --c-bg:           #0C0C0C;   /* фон приложения */
  --c-surface:      #1A1A1A;   /* карточка (card) */
  --c-surface-2:    #232323;   /* вложенная карточка / строка списка (card-2) */
  --c-card-3:       #2B2B2B;   /* hover строки / третий уровень (card-3) */
  --c-muted:        #232323;   /* приглушённый фон (бейджи, разделители) = card-2 */
  --c-input:        #161616;   /* фон полей ввода */
  --c-border:       #2A2A2A;   /* line */
  --c-border-soft:  #1E1E1E;   /* line-soft */
  --c-fg:           #FFFFFF;   /* основной текст */
  --c-fg-muted:     #AEAEAF;   /* вторичный текст */
  --c-fg-dim:       #6B6B6B;   /* третичный текст, подсказки */
  --c-red-text:     #FF7A92;   /* читаемый красный для текста на тёмном */

  --c-accent:       #FE0037;   /* primary CTA */
  --c-accent-hover: #FF3D63;   /* accent-h */
  --c-accent-soft:  rgba(254, 0, 55, 0.14);   /* accent-bg */
  --c-accent-deep:  #B92F4D;   /* accent-soft (нижняя точка градиента) */
  --c-on-accent:    #FFFFFF;   /* текст на акцентной заливке */

  --c-green:        #4EFF7E;
  --c-green-soft:   rgba(78, 255, 126, 0.12);
  --c-gold:         #FFC93D;
  --c-blue:         #377DFF;
  --c-info:         #377DFF;
  --c-info-soft:    rgba(55, 125, 255, 0.14);
  --c-warn:         #FFB020;
  --c-warn-soft:    rgba(255, 176, 32, 0.14);
  --c-danger:       #FE0037;
  --c-danger-soft:  rgba(254, 0, 55, 0.14);
  --c-success:      #4EFF7E;
  --c-success-soft: rgba(78, 255, 126, 0.12);
  --c-pill-scrim:   rgba(12, 6, 8, 0.62);

  --c-ring:         rgba(254, 0, 55, 0.45);

  /* ── Gradients ── */
  --grad-red:        linear-gradient(180deg, #FE0037 0%, #B92F4D 100%);
  --grad-red-radial: radial-gradient(120% 140% at 50% 0%, #FF3D63 0%, #FE0037 45%, #B92F4D 100%);
  --grad-blue:       linear-gradient(180deg, #377DFF 0%, #006692 100%);
  --grad-green:      linear-gradient(180deg, #4EFF7E 0%, #0E8F3D 100%);
  --grad-desktop-bg: radial-gradient(120% 80% at 50% -10%, #1B0B12 0%, #0C0C0C 55%);

  /* ── Typography ── */
  /* Inter грузится из Google Fonts (см. index.html), системный стек — запас. */
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Type scale */
  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.875rem;   /* 14 — основной текст */
  --fs-base: 1rem;     /* 16 — заголовки строк, поля ввода */
  --fs-md: 1.0625rem;  /* 17 */
  --fs-lg: 1.125rem;   /* 18 — h3 */
  --fs-xl: 1.375rem;   /* 22 — h2 */
  --fs-2xl: 1.75rem;   /* 28 — h1 */

  --lh-tight: 1.2;
  --lh-body: 1.45;
  --lh-relaxed: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-body: -0.01em;
  --ls-heading: -0.03em;

  /* ── Spacing (4/8 dp rhythm) ── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* ── Radius ── */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 16px;      /* строки / вложенные карточки */
  --r-xl: 24px;
  --r-card: 24px;
  --r-seg: 32px;
  --r-sheet: 28px;
  --r-toast: 18px;
  --r-pill: 100px;
  --r-full: 999px;

  /* ── Elevation ── */
  --shadow-card:  0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --shadow-pop:   0 12px 40px rgba(0, 0, 0, 0.55);
  --glow-accent:  0 6px 24px rgba(254, 0, 55, 0.35);
  --elev-1: var(--shadow-card);
  --elev-2: var(--shadow-card), 0 8px 24px -16px rgba(0, 0, 0, 0.8);
  --elev-3: var(--shadow-pop);

  /* ── Motion ── */
  --d-press: 120ms;
  --d-fast: 160ms;
  --d-base: 220ms;
  --d-slow: 280ms;
  --d-exit-fast: 105ms;   /* ≈65 % от входа */
  --d-exit-base: 143ms;
  --d-exit-slow: 182ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.2, 1, 0.3, 1);
  --ease-sheet: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Layout ── */
  --topbar-h: 56px;
  /* Плавающая капсула навигации: 6px + 52px + 6px + внешние 6px/10px. */
  --bottomnav-h: 80px;
  /* В полноэкранном режиме Telegram нативные кнопки висят поверх контента;
     --tg-safe-top (ставится из app.js по safeArea+contentSafeArea) опускает
     топбар под них. По умолчанию 0 → поведение вне фуллскрина не меняется. */
  --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-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);

  --content-max: 720px;
  /* Ширина боковой навигации на десктопе (≥1024px). */
  --sidebar-w: 196px;
  /* Левый отступ «оболочки контента»: 0 на телефоне/планшете, ширина сайдбара
     на десктопе. Fixed-элементы (composer, sheet, toast) используют его, чтобы
     центрироваться внутри колонки контента, а не поверх сайдбара. */
  --shell-left: 0px;
}

/* Telegram-provided theme params override (light/dark, mostly we keep dark) */
.tg-theme-light {
  /* Панель управления держит тёмную тему независимо от темы Telegram. */
}