/* Sellmetra — тёмный мир. Набор имён общий для обоих брендов, значения свои.
   ⚠️ Не упоминать здесь второй бренд даже в комментарии: deploy-landing.sh
   валит выкатку, если находит его имя в тексте пакета.
   Визуальный мир перерисовывается позже (Задача 6): пока перенесены
   действующие цвета сайта, чтобы имена токенов были общими уже сейчас. */

:root {
  color-scheme: dark;

  /* ── Поверхности ─────────────────────────────────────────── */
  --bg:            #0A0B12;
  --surface:       #161823;
  --surface-2:     #1B1E2A;
  --surface-inset: #13151F;
  --deep:          #06070D;

  /* ── Текст ───────────────────────────────────────────────── */
  --text:    #ECEDF2;
  --text-2:  #C8CAD4;
  --text-3:  #9498A8;
  --on-brand: #FFFFFF;
  --on-deep:  #ECEDF2;
  --on-deep-2: rgba(236,237,242,.72);
  --on-deep-3: rgba(236,237,242,.55);

  /* ── Фирменный цвет и состояния ──────────────────────────────
     Роли разведены: лайм — действие (кнопки, активное, выделение в заголовке),
     индиго — среда (свечения, полосы, подсветка поверхностей). Так узнаётся
     прежний Sellmetra, но уже как система, а не как набор случайных заливок.
     Текст на лайме только тёмный: белый по нему нечитаем. */
  --brand:        #D7F23B;
  --brand-hover:  #E2F961;
  --brand-active: #B8D424;
  --brand-soft:   rgba(215,242,59,.13);
  --brand-ink:    #D7F23B;      /* выделение в заголовке на тёмном фоне */
  --brand-lift:   #A8B3FF;      /* индиго, читаемый на самом тёмном */
  --on-brand:     #0A0B12;      /* ⚠️ перекрывает общее значение выше */


  /* ── Семантика ───────────────────────────────────────────── */
  --pos:      #34D399;
  --pos-soft: rgba(52,211,153,.14);
  --neg:      #F87171;
  --neg-soft: rgba(248,113,113,.14);
  --warn:     #FBBF24;

  /* ── Границы ─────────────────────────────────────────────── */
  --line:   rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.05);
  --line-deep: rgba(255,255,255,.14);

  /* ── Радиусы ─────────────────────────────────────────────── */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* ── Тени ────────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0,0,0,.30);
  --shadow-2: 0 8px 24px rgba(0,0,0,.30);
  --shadow-3: 0 24px 60px rgba(0,0,0,.45);
  --shadow-btn: 0 4px 10px -5px rgba(0,0,0,.60);

  /* ── Типографика ─────────────────────────────────────────── */
  --font-sans: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num:  'JetBrains Mono', ui-monospace, monospace;

  --fs-display: clamp(34px, 5.2vw, 62px);
  --fs-h1:      clamp(30px, 4.2vw, 46px);
  --fs-h2:      clamp(24px, 3vw, 34px);
  --fs-h3:      20px;
  --fs-lead:    clamp(16px, 1.4vw, 18px);
  --fs-body:    16px;
  --fs-sm:      13px;
  --fs-xs:      11.5px;

  --lh-tight: 1.05;
  --lh-head:  1.2;
  --lh-body:  1.55;
  --lh-lead:  1.6;

  --tr-display: -.04em;
  --tr-head:    -.03em;
  --tr-num:     -.02em;
  --tr-label:   .08em;


  /* ── Компоновка первого экрана ─────────────────────────────
     Композиция задаётся токенами, а не селектором по имени бренда: имя бренда
     в общем CSS деплой заменил бы на второй бренд, и оба селектора совпали бы.
     Здесь: заголовок по центру на тёмной полосе, окно приложения въезжает в неё
     снизу внахлёст. */
  --hero-cols: minmax(0, 1fr);
  --hero-text-align: center;
  --hero-copy-mx: auto;
  --hero-acts-just: center;
  --hero-band: var(--deep);
  /* на тёмной теме одна заливка полосы почти не видна — держим её
     свечением фирменного цвета сверху справа */
  --hero-halo: none;
  --hero-band-glow: radial-gradient(62% 118% at 76% 0%, rgba(107,124,255,.42), transparent 62%);
  --band-glow: radial-gradient(64% 120% at 78% 0%, rgba(107,124,255,.40), transparent 62%);
  --hero-band-pb: 104px;
  --hero-stage-pull: -108px;
  --hero-stage-mr: 0px;
  --hero-win-radius: var(--r-lg);

  /* Свечения прежнего мира: индиго сверху, лайм в углу, сетка на фоне. */
  --glow-opacity: .55;
  --glow-a: radial-gradient(circle, rgba(107,124,255,.55), transparent 68%);
  --glow-b: radial-gradient(circle, rgba(215,242,59,.30), transparent 68%);
  --grid-bg: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
             linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);

  /* Светлый островок продукта на тёмном фоне: мокапы кабинета внутри секций.
     Без этих значений мокап теряет фон и читается блёкло. */
  --light-bg: #F4F3EE;
  --light-surface: #FFFFFF;
  --light-ink: #0B0F1A;
  --light-muted: #6B6F80;
  --light-border: #E5E3DA;

  /* ── Раскладка ───────────────────────────────────────────── */
  --container: 1240px;
  --gutter: clamp(18px, 4vw, 40px);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
}