/* ============================================================
   ТЕМА: main — главный лендинг (апекс)
   ------------------------------------------------------------
   Нейтральная брендовая база. Точка отсчёта, от которой
   отклоняются темы направлений.

   Контраст проверен: --accent на --bg = 6.2:1, белый на всех
   точках --grad-accent ≥ 5.1:1. Поэтому градиент идёт
   фиолетовый → синий: циан как заливка под белый текст
   не проходит AA и остаётся декоративным (--accent-2).
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+0400-045F, U+2000-206F, U+20B0-20BF, U+2190-21BB, U+2460-24FF;
}

/* Метрики подобраны под системный фолбэк — подмена не двигает макет */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Segoe UI'), local('Roboto'), local('Helvetica Neue'), local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-var.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+0400-045F, U+2000-206F;
}

:root[data-direction='main'] {
  /* ---------- Поверхности ---------- */
  --bg:              #f7f8fc;
  --bg-soft:         #ffffff;
  --surface:         #ffffff;
  --surface-2:       #f2f3fa;
  --line:            #e2e5f0;
  --line-soft:       #edeff7;
  --line-strong:     #8c8e95;

  /* ---------- Текст ---------- */
  --text:            #0f1220;
  --text-2:          #4d5570;
  --text-3:          #68708b;
  --text-inv:        #ffffff;

  /* ---------- Акцент ---------- */
  --accent:          #5b3be8;
  --accent-2:        #0e7d94;
  --accent-ink:      #ffffff;
  --accent-soft:     rgb(91 59 232 / 9%);
  --accent-line:     rgb(91 59 232 / 30%);
  --grad-accent:     linear-gradient(135deg, #6a45f5 0%, #4f46e5 55%, #2563eb 100%);
  --grad-soft:       linear-gradient(135deg, rgb(106 69 245 / 8%), rgb(34 211 238 / 6%));

  /* ---------- Семантика ---------- */
  --ok:              #147a4c;
  --ok-bg:           rgb(20 122 76 / 10%);
  --warn:            #8a5a00;
  --warn-bg:         rgb(138 90 0 / 10%);
  --danger:          #b42318;
  --danger-bg:       rgb(180 35 24 / 10%);
  --info:            #0b6bcb;
  --info-bg:         rgb(11 107 203 / 10%);

  /* ---------- Тариф Gold ---------- */
  --gold:            #96600a;
  --grad-gold:       linear-gradient(135deg, #f5c451 0%, #e08b3c 100%);

  /* ---------- Форма ---------- */
  --r-xs:            6px;
  --r-sm:            10px;
  --r-md:            14px;
  --r-lg:            18px;
  --r-xl:            26px;
  --r-full:          999px;
  --r-btn:           12px;
  --r-card:          22px;
  --r-field:         12px;
  --border-w:        1px;

  /* ---------- Тени ---------- */
  --sh-xs:           0 1px 2px rgb(20 25 50 / 6%);
  --sh-sm:           0 2px 10px rgb(20 25 50 / 7%);
  --sh-md:           0 12px 32px -14px rgb(20 25 50 / 20%);
  --sh-lg:           0 30px 70px -28px rgb(20 25 50 / 28%);
  --sh-focus:        0 0 0 3px var(--accent-line);

  /* ---------- Типографика ---------- */
  --font-h:          'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  --font-b:          'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  --font-m:          'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --tracking-h:      -0.022em;
  --weight-h:        700;
  --lh-h:            1.12;
  --lh-b:            1.62;

  --step--1:         clamp(0.79rem, 0.77rem + 0.10vw, 0.84rem);
  --step-0:          clamp(0.94rem, 0.91rem + 0.15vw, 1.03rem);
  --step-1:          clamp(1.13rem, 1.07rem + 0.28vw, 1.29rem);
  --step-2:          clamp(1.35rem, 1.26rem + 0.46vw, 1.62rem);
  --step-3:          clamp(1.62rem, 1.47rem + 0.73vw, 2.03rem);
  --step-4:          clamp(1.94rem, 1.71rem + 1.13vw, 2.54rem);
  --step-5:          clamp(2.33rem, 1.99rem + 1.71vw, 3.17rem);
  --step-6:          clamp(2.60rem, 2.10rem + 2.50vw, 3.75rem);

  /* ---------- Ритм и меры ---------- */
  --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;
  --container:       min(95vw, 1600px);
  --container-narrow: min(92vw, 860px);
  --measure:         68ch;
  --header-h:        72px;
  --section-y:       clamp(32px, 3.4vw, 56px);

  /* ---------- Движение ---------- */
  --ease:            cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:         cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:          0.16s var(--ease);
  --t-med:           0.28s var(--ease);
  --t-slow:          0.4s var(--ease);

  /* ---------- Фоновая текстура ---------- */
  --texture:
    radial-gradient(60ch 40ch at 82% -10%, rgb(106 69 245 / 7%), transparent 70%),
    radial-gradient(50ch 34ch at 4% 8%, rgb(34 211 238 / 6%), transparent 70%);
  /* ---------- Тёмная врезка ----------
     Приём светлой страницы, а не вторая тема: контрастная секция
     один-два раза за лендинг. Тёмную тему убрали, эти токены её не заменяют. */
  --invert-bg:       #0f1226;
  --invert-surface:  #171a35;
  --invert-text:     #f2f4fb;
  --invert-text-2:   #b6bcd8;
  --invert-accent:   #a48bff;
  --invert-line:     rgb(255 255 255 / 12%);

  /* Градиентная подложка первого экрана и финального CTA */
  --mesh:
    radial-gradient(52ch 34ch at 88% -12%, rgb(106 69 245 / 14%), transparent 68%), radial-gradient(44ch 30ch at 2% 6%, rgb(37 99 235 / 10%), transparent 70%);

  /* ---------- Фоновые изображения секций ----------
     Кладутся в public/img/bg/main/. Пока файла нет — слой просто
     не отрисуется, под ним останется градиент: пустого экрана не будет.
     Промпты — GRAPHICS-BACKGROUNDS.md */
  --veil:            0.82;
  --veil-invert:     0.78;

  --bg-img-hero:     url('/img/bg/main/hero.webp');
  --bg-img-tint:     url('/img/bg/main/tint.webp');
  --bg-img-panel:    url('/img/bg/main/panel.webp');
  --bg-img-invert:   url('/img/bg/main/invert.webp');

}