/* Дизайн-токены темы v2. Единственный источник значений: в шаблонах и CSS
   используем только var(--v2-*), сырые цвета и пиксели не пишем.

   Стиль (редакция 2, 2026-11-06): SaaS, как meeting.ai, read.ai, openwhispr.com.
   Белый фон, почти чёрный текст, один насыщенный синий, фиолетовый как второй цвет
   для градиента главной CTA и подсветок. Заголовки DM Sans с плотным трекингом, текст Inter.
   Контраст проверен: текст и кнопки не ниже 4.5:1. */

:root {
  /* ---- Палитра ---- */
  --v2-bg: #ffffff;              /* фон страницы */
  --v2-surface: #f5f7fb;         /* чередующиеся секции, плашки статистики */
  --v2-surface-raised: #ffffff;  /* карточки, поля, панели */
  --v2-ink: #0a0f1f;             /* самый тёмный: заголовки, тёмные секции */
  --v2-text: #0a0f1f;
  --v2-text-muted: #5b6475;      /* 6:1 на белом, 5.6:1 на --v2-surface */
  --v2-border: #e4e8f0;
  --v2-border-strong: #cfd6e3;
  --v2-primary: #1456e8;         /* кнопки и ссылки: белый текст 6:1 */
  --v2-primary-hover: #0e46c4;
  --v2-primary-soft: #eaf2ff;    /* подсветка выбранного; синий текст на нём 5.3:1 */
  --v2-on-primary: #ffffff;
  --v2-violet: #5b3df5;          /* второй цвет бренда: белый текст 6.1:1 */
  --v2-violet-soft: #f0ecff;     /* плашка-выделение слова в заголовке */
  --v2-violet-ink: #4b3ad9;      /* текст на --v2-violet-soft, 6.2:1 */
  --v2-sky: #00aff0;             /* голубой OnlyFans: точки, акценты, свечения; текст на нём --v2-ink */
  --v2-sky-soft: var(--v2-primary-soft);
  --v2-pink: #e11d74;            /* состояние «в избранном»: белый текст 4.5:1 */
  --v2-pink-soft: #fde8f1;
  --v2-pink-hover: #c0155f;
  --v2-accent: var(--v2-violet); /* одна главная CTA на экран — градиентом --v2-gradient */
  --v2-star: #f59e0b;            /* звезда Score, декоративная */
  --v2-focus: #1456e8;
  --v2-gradient: linear-gradient(135deg, #1456e8 0%, #5b3df5 100%);
  --v2-glow-blue: rgb(20 86 232 / 0.18);
  --v2-glow-violet: rgb(91 61 245 / 0.16);
  --v2-glow-sky: rgb(0 175 240 / 0.16);

  --v2-promo-bg: radial-gradient(36rem 20rem at 0% 0%, rgb(91 61 245 / 0.45), transparent 65%), radial-gradient(30rem 18rem at 100% 100%, rgb(0 175 240 / 0.3), transparent 65%), linear-gradient(135deg, #1446d6 0%, #1d5af0 100%); /* рекламные блоки: синий в тон сайта, белый текст 5.6-7.3:1 */
  --v2-on-promo-muted: #e3ebff;  /* вторичный текст на --v2-promo-bg, 4.7:1 */
  --v2-promo-border: rgb(255 255 255 / 0.18);
  --v2-dark: #0a0f1f;            /* подвал, рекламные плашки; белый текст 19:1 */
  --v2-dark-raised: #141a2e;
  --v2-dark-border: #262e47;
  --v2-dark-muted: #a5b0c5;      /* вторичный текст на --v2-dark, 8.7:1 */
  --v2-success: #047857;         /* бейдж Free: белый текст 5.5:1 */
  --v2-success-soft: #e6f7f0;
  --v2-sponsor: #b45309;         /* плашка Sponsored: белый текст 5:1 */
  --v2-sponsor-soft: #fff6e8;
  --v2-sponsor-bg: #fce7f3;      /* плашка Sponsored на карточках: розоватая (решение владельца 2026-11-06) */
  --v2-sponsor-ink: #9d174d;     /* текст плашки Sponsored, 7:1 на --v2-sponsor-bg */
  --v2-new: #7c3aed;             /* бейдж New: белый текст 5.7:1 */
  --v2-overlay: rgb(10 15 31 / 0.6);
  --v2-photo-ratio: 3 / 4;
  --v2-cover-ratio: 10 / 3;

  /* ---- Типографика: мобильная шкала, на десктопе растёт через clamp ---- */
  --v2-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --v2-font-display: "DM Sans", "Inter", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --v2-fs-xs: 0.75rem;           /* 12 */
  --v2-fs-sm: 0.875rem;          /* 14 */
  --v2-fs-base: 1rem;            /* 16, меньше нельзя: iOS зумит поля ввода */
  --v2-fs-lg: 1.125rem;          /* 18 */
  --v2-fs-xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --v2-fs-2xl: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --v2-fs-3xl: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
  --v2-lh-tight: 1.08;
  --v2-lh-body: 1.55;
  --v2-tracking-tight: -0.03em; /* заголовки */
  --v2-tracking-caps: 0.12em;    /* надзаголовки капсом */

  /* ---- Отступы: шаг 4px ---- */
  --v2-s-1: 0.25rem;
  --v2-s-2: 0.5rem;
  --v2-s-3: 0.75rem;
  --v2-s-4: 1rem;
  --v2-s-5: 1.5rem;
  --v2-s-6: 2rem;
  --v2-s-7: 3rem;
  --v2-s-8: 5rem;
  --v2-gutter: 1rem;             /* боковое поле страницы на телефоне */
  --v2-container: 76rem;         /* 1216 */

  /* ---- Формы и слои ---- */
  --v2-radius-sm: 0.5rem;        /* 8: бейджи-квадраты, поля в фильтрах */
  --v2-radius-md: 0.75rem;       /* 12: кнопки, поля */
  --v2-radius-lg: 1.25rem;       /* 20: карточки, панели */
  --v2-radius-xl: 1.75rem;       /* 28: крупные секции-плашки */
  --v2-radius-pill: 9999px;
  --v2-shadow-sm: 0 1px 2px rgb(16 24 40 / 0.05), 0 1px 3px rgb(16 24 40 / 0.06);
  --v2-shadow-md: 0 18px 40px -16px rgb(16 24 40 / 0.22), 0 2px 6px rgb(16 24 40 / 0.04);
  --v2-shadow-lg: 0 30px 60px -20px rgb(20 40 100 / 0.28);
  --v2-shadow-btn: 0 8px 20px -8px rgb(20 86 232 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.22);
  --v2-shadow-btn-accent: 0 10px 24px -8px rgb(91 61 245 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.25);
  --v2-z-sticky: 20;
  --v2-z-sheet: 40;
  --v2-z-modal: 60;

  /* ---- Мобильные ограничения ---- */
  --v2-touch-min: 2.75rem;       /* 44px: минимум для зоны нажатия */
  --v2-bottom-nav-h: 3.75rem;
  --v2-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- Движение ---- */
  --v2-ease: cubic-bezier(0.2, 0, 0, 1);
  --v2-dur-fast: 120ms;
  --v2-dur: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --v2-dur-fast: 0ms; --v2-dur: 0ms; }
}

/* Брейкпоинты (min-width, mobile-first): 480 / 768 / 1024 / 1280.
   В CSS переменные в media query не работают, значения держим здесь как справку. */