/* OnlyChats v2 — токены дизайн-системы, вариант B (неоновый, малиново-фиолетовый).
   Источник: v2_tools/design/OnlyChats Prototype B.dc.html.
   Все переменные действуют только при классе v2 на <html>, без него старое
   приложение не меняется. Шрифты: основной TildaSans подключён в style.css,
   дисплейный (Fira Sans Extra Condensed) и моно (JetBrains Mono) лежат в
   fonts.css data-URI: CSP сайта не пускает Google Fonts. */

html.v2 {
    /* Фоны: от самого глубокого к поднятому */
    --v2-bg-0: #050308;          /* подложка за приложением, ПК */
    --v2-bg-1: #0b0710;          /* экран */
    --v2-bg-2: #15101d;          /* карточки, секции */
    --v2-bg-3: #191324;          /* шторки, модалки, поднятые блоки */
    --v2-bg-side: #100b17;       /* сайдбар на ПК */
    --v2-control: #1e1629;       /* поля, кнопки-иконки, чипы на фоне */
    --v2-control-2: #2a1f38;     /* вторичная кнопка, тост, разделитель погуще */
    --v2-skel-hi: #2c2139;       /* блик скелетона */
    --v2-glass: rgba(24, 17, 34, .92);       /* таббар, плавающие панели (в B .88, чуть плотнее: под ним наш яркий текст) */
    --v2-glass-soft: rgba(11, 7, 16, .62);   /* шапки поверх контента */
    --v2-scrim: rgba(4, 2, 8, .6);           /* затемнение под шторкой */

    /* Акцент — малиновый */
    --v2-accent: #ff2d8a;
    --v2-accent-fill: #d6106f;   /* заливка главной кнопки */
    --v2-accent-press: #b80d5f;
    --v2-accent-soft: #ff6fb1;   /* текст-акцент, ссылки */
    --v2-accent-light: #ff9fcb;
    --v2-accent-tint: rgba(255, 45, 138, .14);
    --v2-accent-line: rgba(255, 45, 138, .5);
    --v2-glow: 0 0 0 1px rgba(255, 45, 138, .6), 0 0 22px rgba(255, 45, 138, .32);
    --v2-glow-strong: 0 0 0 1px #ff2d8a, 0 0 22px rgba(255, 45, 138, .55);
    --v2-neon: 0 0 10px #ff2d8a, 0 0 22px rgba(255, 45, 138, .55);   /* неоновая черта, индикатор */

    /* Вторичный — фиолетовый */
    --v2-violet: #7b3cff;
    --v2-violet-soft: #a78bff;
    --v2-violet-tint: rgba(167, 139, 255, .14);
    --v2-glow-violet: 0 0 0 1px rgba(123, 60, 255, .6), 0 0 22px rgba(123, 60, 255, .35);

    /* Кристалл и титул */
    --v2-crystal: #f093fb;
    --v2-crystal-edge: #7a2a86;
    --v2-crystal-glow: 0 0 0 1px rgba(240, 147, 251, .32), 0 0 18px rgba(240, 147, 251, .26);
    --v2-gold: #ffc46b;          /* ник автора, рамка титула */
    --v2-gold-line: rgba(255, 196, 107, .45);

    /* Семантика */
    --v2-success: #3ee6a0;
    --v2-success-tint: rgba(62, 230, 160, .14);
    --v2-success-line: rgba(62, 230, 160, .4);
    --v2-error: #ff4d6a;
    --v2-error-tint: rgba(255, 77, 106, .14);
    --v2-error-line: rgba(255, 77, 106, .45);
    --v2-warning: #ffb547;
    --v2-warning-tint: rgba(255, 181, 71, .14);
    --v2-info: #a78bff;
    --v2-info-line: rgba(167, 139, 255, .4);

    /* Текст */
    --v2-text-1: #f8f5ff;
    --v2-text-2: #b9aecb;
    --v2-text-3: #8d82a3;
    --v2-text-strong-2: #e6def5;  /* вторичный, но поярче: подписи на арте */
    --v2-text-off: #564c68;
    --v2-on-light: #14091f;        /* текст на светлом чипе */

    /* Линии */
    --v2-line-1: rgba(214, 190, 255, .08);
    --v2-line-2: rgba(214, 190, 255, .12);
    --v2-line-3: rgba(214, 190, 255, .18);
    --v2-hover: rgba(214, 190, 255, .06);
    --v2-press: rgba(214, 190, 255, .08);

    /* Радиусы: 16 кнопки и поля, 20 карточки, 28 шторки, 999 чипы */
    --v2-r-xs: 8px;
    --v2-r-sm: 12px;
    --v2-r-md: 16px;
    --v2-r-lg: 20px;
    --v2-r-xl: 24px;
    --v2-r-sheet: 28px;
    --v2-r-pill: 999px;

    /* Отступы */
    --v2-s-1: 4px;
    --v2-s-2: 8px;
    --v2-s-3: 12px;
    --v2-s-4: 16px;
    --v2-s-5: 24px;
    --v2-s-6: 32px;
    --v2-s-7: 48px;

    /* Тени */
    --v2-shadow-1: 0 4px 16px rgba(0, 0, 0, .35);
    --v2-shadow-2: 0 12px 30px rgba(0, 0, 0, .5);
    --v2-shadow-3: 0 12px 40px rgba(0, 0, 0, .5);
    --v2-shadow-sheet: 0 -20px 60px rgba(0, 0, 0, .5);
    --v2-shadow-modal: 0 40px 120px rgba(0, 0, 0, .6);

    /* Шрифты */
    --v2-font: 'TildaSans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --v2-font-display: 'Fira Sans Extra Condensed', 'TildaSans', sans-serif;
    --v2-font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Движение */
    --v2-dur-fast: 150ms;     /* отклик на тап */
    --v2-dur-base: 220ms;     /* состояния, табы, тосты */
    --v2-dur-screen: 350ms;   /* вход экрана */
    --v2-dur-hero: 420ms;     /* перелёт обложки */
    --v2-dur-slow: 600ms;     /* кроссфейд артов */
    --v2-ease: cubic-bezier(.2, .8, .2, 1);       /* standard, всё по умолчанию */
    --v2-ease-spring: cubic-bezier(.2, 1.5, .4, 1); /* только радость: покупка, лайк, награда */

    /* Кристалл из макета (вместо эмодзи 💎): фон-картинка для иконок.
       Был в chat.css, нужен и настройкам */
    --v2-gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3.5h10l4.5 5.5L12 21 2.5 9z' fill='%23f093fb'/%3E%3Cpath d='M2.5 9h19M8.5 9L12 21l3.5-12' fill='none' stroke='%237a2a86' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* Логотип: аватар бота OnlyChats (static_dev/v2/img). Свой знак не рисуем */
    --v2-logo: url("/static/v2/img/logo-192.png");

    /* Раскладка */
    --v2-tabbar-h: 64px;
    --v2-safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Старые переменные style.css переводим на палитру B: так перекрашивается
       всё, что уже на них построено, без правки самих правил */
    --tg-theme-bg-color: var(--v2-bg-1);
    --tg-theme-secondary-bg-color: var(--v2-bg-2);
    --tg-theme-text-color: var(--v2-text-1);
    --tg-theme-hint-color: var(--v2-text-3);
    --tg-theme-button-color: var(--v2-accent-fill);
    --tg-theme-button-text-color: #fff;
    --crystal-color: var(--v2-crystal);
    --border-radius: var(--v2-r-md);
    --card-border-radius: var(--v2-r-lg);
    --primary-color: var(--v2-accent);
    --secondary-color: var(--v2-violet);
    --background-color: var(--v2-bg-1);
    --card-bg-color: var(--v2-bg-2);
    --secondary-background-color: var(--v2-bg-2);
    --text-color: var(--v2-text-1);
    --border-color: var(--v2-line-2);
    --shadow: var(--v2-shadow-2);
    --neon-pink: var(--v2-accent);
    --neon-blue: var(--v2-accent);
    --neon-purple: var(--v2-violet);
    --glass-bg: var(--v2-control);
    --glass-border: var(--v2-line-2);
    --gradient-primary: linear-gradient(135deg, #ff2d8a 0%, #d6106f 100%);
    --gradient-secondary: linear-gradient(135deg, #ff6fb1 0%, #7b3cff 100%);
    --gradient-accent: linear-gradient(135deg, #a78bff 0%, #7b3cff 100%);
}

/* Анимации макета. Имена с префиксом v2, чтобы не столкнуться со старыми */
@keyframes v2Enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes v2Fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes v2Spin { to { transform: rotate(360deg); } }
@keyframes v2SheetIn { from { transform: translateY(100%); } to { transform: none; } }
@keyframes v2ModalIn { from { opacity: 0; transform: scale(.96) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes v2Toast { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes v2ToastTop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes v2Bounce { 0% { transform: scale(1); } 40% { transform: scale(1.22) translateY(-3px); } 100% { transform: scale(1); } }
@keyframes v2Dot { 0%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Меньше движения: декор выключаем, смены состояний остаются короткими */
@media (prefers-reduced-motion: reduce) {
    html.v2 {
        --v2-dur-base: 150ms;
        --v2-dur-screen: 150ms;
        --v2-dur-hero: 150ms;
        --v2-dur-slow: 150ms;
        --v2-ease-spring: var(--v2-ease);
    }
    html.v2 *, html.v2 *::before, html.v2 *::after {
        animation-duration: 150ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    /* Индикаторы загрузки оставляем крутиться в нормальном темпе: без них
       непонятно, что идёт работа. Шиммер скелетона гасим, остаётся ровная плашка */
    html.v2 .loader-spinner, html.v2 .loading-spinner, html.v2 .v2-spin {
        animation-duration: .9s !important;
        animation-iteration-count: infinite !important;
    }
    html.v2 .v2-skel {
        animation: none !important;
    }
}