/* ════════════════════════════════════════════════════════════════════
   Дизайн-токены mystreaming.cc — единственный источник правды по цвету,
   типографике, ритму и теням. Секционные стили обязаны брать значения
   отсюда: ни одного «сырого» hex/px за пределами этого файла.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Цвет ──────────────────────────────────────────────────────── */
  --c-bg:            #0B0F0E;  /* фон страницы */
  --c-bg-deep:       #05080A;  /* «стекло» экранов, корпуса устройств */
  --c-surface:       #121817;  /* карточки, панели */
  --c-surface-2:     #16201D;  /* вложенные панели, подсветка строки */
  --c-text:          #ECF0EE;  /* основной текст */
  --c-muted:         #A3AEA9;  /* вторичный текст, описания */
  --c-dim:           #7C8883;  /* подписи, надзаголовки, «выключено» */

  --c-accent:        #5EE39B;  /* основной акцент (зелёный) */
  --c-accent-2:      #B39DFF;  /* вторичный акцент (лиловый) */
  --c-live:          #FF5A4D;  /* LIVE-индикатор, «плохой» вариант */
  --c-warn:          #F5C15C;  /* тёплый свет в эфире */

  /* Полупрозрачные слои поверх фона. Держим шкалой, а не «на глаз». */
  --c-line:          rgba(236, 240, 238, 0.10); /* обычная граница */
  --c-line-soft:     rgba(236, 240, 238, 0.06); /* тихая граница */
  --c-line-strong:   rgba(236, 240, 238, 0.18); /* граница кнопки */
  --c-line-bright:   rgba(236, 240, 238, 0.28); /* акцентная рамка */
  --c-fill:          rgba(236, 240, 238, 0.04); /* заливка-подложка */
  --c-fill-hover:    rgba(236, 240, 238, 0.07);
  --c-scrim:         rgba(5, 8, 10, 0.65);      /* плашки поверх видео */

  /* ── Типографика ───────────────────────────────────────────────── */
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body:    'Golos Text', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Всё, что крупнее 20px, — текучее: макет 1440px должен дожить до 360px.
     Каждая пара — прямая через две точки: (360px, min) и (1440px, max).
     То есть на ширине макета кегль ровно макетный, а на самом узком
     экране — минимальный, без плоских участков по краям диапазона.
     Проверка: A_px + B * 14.4 == max_px и A_px + B * 3.6 == min_px. */
  --fs-hero:    clamp(2.75rem,  1.58rem + 5.19vw, 6.25rem);  /*  44 →100 */
  --fs-mega:    clamp(3.5rem,   2.00rem + 6.67vw, 8rem);     /*  56 →128 */
  --fs-xxl:     clamp(2.25rem,  1.33rem + 4.07vw, 5rem);     /*  36 → 80 */
  --fs-title:   clamp(1.75rem,  1.42rem + 1.48vw, 2.75rem);  /*  28 → 44 */
  --fs-h3:      clamp(1.375rem, 1.29rem + 0.37vw, 1.625rem); /*  22 → 26 */
  --fs-h4:      clamp(1.125rem, 1.04rem + 0.37vw, 1.375rem); /*  18 → 22 */
  --fs-lead:    clamp(1.0625rem,1.00rem + 0.28vw, 1.25rem);  /*  17 → 20 */
  --fs-sub:     clamp(1.125rem, 0.83rem + 1.30vw, 2rem);     /*  18 → 32 */

  --fs-lg:      1.125rem;  /* 18 */
  --fs-ml:      1.0625rem; /* 17 — длинные абзацы: FAQ, пояснения */
  --fs-md:      1rem;      /* 16 */
  --fs-sm:      0.9375rem; /* 15 */
  --fs-xs:      0.875rem;  /* 14 */
  --fs-2xs:     0.8125rem; /* 13 */
  --fs-mono:    0.75rem;   /* 12 */
  --fs-mono-sm: 0.6875rem; /* 11 */
  --fs-mono-xs: 0.625rem;  /* 10 */

  --lh-tight:  1;
  --lh-snug:   1.2;
  --lh-normal: 1.4;
  --lh-relaxed: 1.55;

  --ls-mega:  -0.04em;
  --ls-hero:  -0.03em;
  --ls-title: -0.02em;
  --ls-tight: -0.01em;
  --ls-mono:   0.08em;
  --ls-caps:   0.14em;
  --ls-chip:   0.06em;  /* чипы: плотнее моно, но шире обычного текста */
  --ls-osd:    0.10em;  /* плашки поверх видео и ярлыки */

  /* ── Ритм и сетка ──────────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 56px;
  --sp-11: 64px;
  --sp-12: 80px;

  --gutter:      clamp(20px, 6.9vw, 100px);  /* боковые поля секции */
  --section-py:  clamp(64px, 7.2vw, 104px);  /* вертикальный ритм секции */
  --container:   1240px;                     /* 1440 макета минус поля */
  --grid-gap:    clamp(24px, 3.4vw, 48px);
  --grid-gap-lg: clamp(32px, 5.6vw, 80px);

  /* ── Форма ─────────────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Высоты управляющих элементов: кнопки, поля, чипы. */
  --ctl-h:    56px;
  --ctl-h-sm: 44px;
  --ctl-h-xs: 30px;

  --shadow-card:  0 30px 60px -30px rgba(0, 0, 0, 0.7);
  --shadow-panel: 0 50px 90px -30px rgba(0, 0, 0, 0.85);
  --shadow-pop:   0 24px 60px -20px rgba(0, 0, 0, 0.75);

  /* ── Движение ──────────────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:    0.15s;
  --t-base:    0.28s;
  --t-slow:    0.6s;

  /* Множитель длительности всех декоративных анимаций. Ставится в 0
     при prefers-reduced-motion — одна точка выключения на весь сайт. */
  --motion: 1;

  /* Единственный собственный слой сайта. Модалка живёт в top layer
     браузера (<dialog>.showModal()), и z-index ей не нужен вовсе. */
  --z-nav: 100;
}

/* Цвет фона под системным UI (адресная строка мобильного браузера). */
:root {
  color-scheme: dark;
}