/* ============================================================
   BIGBOY HUB · дизайн-токены (§32–§40 мастер-промпта)
   Направление «Melstroy Neon»: полуночная база, матовое стекло,
   крупное скругление, фиолет + сирень как акценты.
   Единственный источник размеров: новое значение появляется здесь,
   только если его действительно раньше не было.
   ============================================================ */

:root {
  /* ── цвет: полуночная база ──────────────────────────── */
  --bg-0: #070B18;
  --bg-1: #0C1226;
  --bg-2: #171033;

  /* Стекло: раньше белый блик лежал прямо на фоне приложения, и там, где
     фон — фотография, подложка переставала что-либо перекрывать и текст
     тонул. Теперь под бликом всегда есть тёмная вуаль: она держит контраст,
     а blur по-прежнему размывает то, что сквозь неё проступает. */
  --veil-1: rgba(8, 12, 26, .74);
  --veil-2: rgba(8, 12, 26, .82);
  --veil-3: rgba(8, 12, 26, .87);
  --glass-1: linear-gradient(var(--veil-1), var(--veil-1)), rgba(255, 255, 255, .055);
  --glass-2: linear-gradient(var(--veil-2), var(--veil-2)), rgba(255, 255, 255, .085);
  --glass-3: linear-gradient(var(--veil-3), var(--veil-3)), rgba(255, 255, 255, .13);
  --rim: inset 0 1px 0 rgba(255, 255, 255, .1);
  --rim-2: inset 0 1px 0 rgba(255, 255, 255, .18);
  --blur: blur(18px) saturate(150%);

  /* плотные поверхности: то, что обязано перекрывать контент целиком */
  --card: #121A33;
  --card-2: #16203C;
  --card-3: #1B2748;

  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --line-3: rgba(255, 255, 255, .26);

  --text: #F2F5FF;
  --text-2: #9AA6C8;
  --text-3: #6E7A9C;

  --accent: #8D0ED2;          /* главный акцент: фиолетовый со образца */
  --accent-ink: #FFFFFF;      /* текст на фиолетовом */
  --accent-dim: #6E05AC;
  --accent-soft: rgba(141, 14, 210, .18);
  --accent-line: rgba(163, 47, 226, .42);

  --violet: #A970FF;          /* второй акцент: свечения, градиенты */
  --violet-soft: rgba(169, 112, 255, .16);
  --violet-line: rgba(169, 112, 255, .36);

  --gold: #F2C979;            /* точечно: награды, статус */
  --gold-soft: rgba(242, 201, 121, .14);
  --gold-line: rgba(242, 201, 121, .34);

  --live: #FF3355;
  --live-soft: rgba(255, 51, 85, .14);

  /* «сделано / засчитано»: зелёный в хабе отвечает ровно за одно — действие
     человека уже принято. Статусы «проголосовал» и «угадал» серой плашкой
     не отличить от «не голосовал», а красный для этого слишком громкий. */
  --ok: #52FF71;
  --ok-soft: rgba(82, 255, 113, .14);
  --ok-line: rgba(82, 255, 113, .42);

  --grad-accent: linear-gradient(135deg, #A63BE8, #7100B8);
  --grad-cta: linear-gradient(120deg, #A31FEA 0%, #8D0ED2 52%, #6A12E0 100%);
  --grad-glass: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035)),
    linear-gradient(var(--veil-2), var(--veil-2));

  /* ── сетка и отступы (§40) ──────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --pad: var(--s-4);

  /* ── радиусы (§37: 18–24, здесь крупнее — «стекло») ──── */
  --r-xs: 12px;
  --r-sm: 16px;
  --r-md: 22px;
  --r-lg: 26px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ── элементы управления (§40–§41) ──────────────────── */
  --h-sm: 40px;
  --h: 48px;
  --h-lg: 56px;
  --touch: 44px;
  --nav-h: 62px;
  --nav-gap: 10px;
  /* плавающая пилюля навигации: её высота + поля + безопасная зона.
     Все отступы «над навигацией» обязаны считать от неё. */
  --nav-bar: calc(var(--nav-h) + var(--nav-gap) * 2 + env(safe-area-inset-bottom));
  --app-max: 430px;

  /* ── типографика (§35) ──────────────────────────────── */
  /* Golos Text — базовый UI-шрифт: у него есть кириллица в 5–8 начертаниях,
     он шире и «человечнее» Manrope, поэтому подписи плашек читаются крупнее
     при том же кегле. Manrope остаётся подстраховкой, если CDN не ответит. */
  --font: "Golos Text", "Manrope", "Inter", -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-display: "Golos Text", "Manrope", "Inter", -apple-system, "SF Pro Display", "Segoe UI", sans-serif;
  --font-brand: "Unbounded", "Golos Text", "Manrope", "Segoe UI", sans-serif;

  --fs-xs: 11px;
  --fs-s: 12px;
  --fs-sm: 13px;
  --fs-m: 15px;
  --fs-base: 16px;
  --fs-l: 18px;
  --fs-xl: 21px;
  --fs-2xl: 25px;
  --fs-3xl: 32px;
  --fs-4xl: 42px;

  --lh-tight: 1.1;
  --lh: 1.35;
  --lh-loose: 1.55;

  --fw-reg: 500;
  --fw-med: 600;
  --fw-bold: 700;
  --fw-xbold: 800;

  /* ── тени и свечения ────────────────────────────────── */
  --sh-1: 0 1px 2px rgba(2, 5, 15, .5);
  --sh-2: 0 12px 30px rgba(3, 7, 20, .45);
  --sh-3: 0 24px 60px rgba(2, 5, 15, .6);
  --glow-accent: 0 0 0 1px var(--accent-line), 0 14px 36px rgba(141, 14, 210, .25);
  --glow-live: 0 0 0 1px rgba(255, 51, 85, .42), 0 14px 40px rgba(255, 51, 85, .26);

  /* ── движение (§47: 150–250 мс) ─────────────────────── */
  --t-fast: 150ms;
  --t: 200ms;
  --t-slow: 250ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* переключение вкладок и сегментов: пилюля доезжает с лёгким перелётом */
  --t-nav: 420ms;
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* ── aspect-ratio контейнеры (§60) ──────────────────── */
  --ar-1-1: 1 / 1;
  --ar-4-5: 4 / 5;
  --ar-16-9: 16 / 9;
  --ar-9-16: 9 / 16;
}