/* ============================================================
   TOKENS — единственный источник правды (DESIGN.md §3, §4, §5, §8)
   ============================================================ */

:root {
  /* ---------- Шрифт ---------- */
  --font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --letter-spacing: -0.019em;   /* −1.9% — везде */

  /* ---------- Типографика: shorthand (DESIGN.md §3) ---------- */
  --h1: 600 64px/1 var(--font-family);
  --h2: 600 26px/1 var(--font-family);
  --h3: 600 24px/1 var(--font-family);
  --h4: 600 20px/1 var(--font-family);
  --h5: 600 16px/1 var(--font-family);
  --b1: 400 96px/1.5 var(--font-family);
  --b2: 400 72px/1.5 var(--font-family);
  --b3: 500 38px/1.2 var(--font-family);
  --b4: 400 18px/1.5 var(--font-family);
  --b5: 400 16px/1.5 var(--font-family);
  --b6: 400 14px/1.5 var(--font-family);
  --b7: 400 12px/1.2 var(--font-family);

  /* ---------- Типографика: атомарные размеры ---------- */
  /* H1 масштабируется от 1920 (64px по макету) вниз до планшета */
  --fs-h1: clamp(38px, 3.34vw, 64px);  --lh-h1: 1;
  /* Подзаголовок hero: 32px при 1920 по замерам макета */
  --fs-hero-sub: clamp(18px, 1.667vw, 32px);
  --fs-h2: 26px;  --lh-h2: 1;
  --fs-h3: 24px;  --lh-h3: 1;
  --fs-h4: 20px;  --lh-h4: 1;
  --fs-h5: 16px;  --lh-h5: 1;
  --fs-b1: 96px;
  --fs-b2: 72px;
  --fs-b3: 38px;
  --fs-b4: 18px;
  --fs-b5: 16px;
  --fs-b6: 14px;
  --fs-b7: 12px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* ---------- Цвета (DESIGN.md §4) ---------- */
  --color-primary:      #0A7CFF;  /* основной синий: кнопки, активные элементы */
  --color-primary-600:  #0067DC;  /* hover основной кнопки */
  --color-accent:       #68ACFB;  /* акцентный текст, светлый синий */
  --color-link:         #AED0F7;  /* цвет ссылок */

  --color-text:         #1C1C1F;  /* основной текст */
  --color-text-2:       #2B2B2B;  /* вариант тёмного текста */
  --color-btn-dark:     #292929;  /* пассивная (тёмная) кнопка */
  --color-text-on-blue: #FFFFFF;  /* текст на кнопках и синем фоне */
  --color-text-muted:   #6B7280;  /* приглушённые подписи */

  --color-bg:           #F3F3F3;  /* фон светлой темы */
  --color-white:        #FFFFFF;  /* карточки, поля */

  --color-gradient-1:   #C2C2C2;  /* градиент / разделители */

  /* ---------- Тёмно-синяя палитра hero / шапки ---------- */
  --navy-950: #00060F;
  --navy-900: #000E1E;
  --navy-800: #001833;
  --navy-700: #00295A;
  --navy-600: #003573;
  --navy-500: #0B3F73;
  --navy-400: #1E4B80;
  --blue-deep: #0053B4;
  --blue-mid:  #0A72E8;
  --blue-glow: #5AA7FF;

  /* ---------- Градиенты (DESIGN.md §5) ---------- */
  --grad-hero-base: linear-gradient(
    93deg,
    #001630 0%,
    #001C3C 9%,
    #002B5C 20%,
    #003D80 31%,
    #0054AF 42%,
    #0064D6 53%,
    #0F7BF0 63%,
    #1682FF 71%,
    #0A72E8 82%,
    #0057BC 91%,
    #002B5C 100%
  );
  --grad-hero-glow: radial-gradient(
    62% 70% at 68% 34%,
    rgba(150, 204, 255, 0.62) 0%,
    rgba(92, 172, 255, 0.40) 40%,
    rgba(24, 116, 226, 0.14) 68%,
    rgba(0, 60, 140, 0) 86%
  );
  --grad-hero-vignette: linear-gradient(
    180deg,
    rgba(0, 8, 20, 0.22) 0%,
    rgba(0, 10, 26, 0.04) 20%,
    rgba(0, 12, 30, 0.00) 48%,
    rgba(0, 14, 34, 0.26) 100%
  );
  --grad-hero-edge: radial-gradient(
    17% 88% at 100% 60%,
    rgba(0, 24, 54, 0.78) 0%,
    rgba(0, 28, 62, 0.34) 46%,
    rgba(0, 30, 66, 0) 82%
  );
  --grad-header: linear-gradient(
    90deg,
    #00060F 0%,
    #000E1E 10%,
    #001833 26%,
    #00295A 38%,
    #003573 47%,
    #164470 58%,
    #1E4B80 68%,
    #234E80 84%,
    #0B3A6B 94%,
    #033363 100%
  );
  --grad-card-light: linear-gradient(135deg, #FFFFFF 0%, #E8F1FB 100%);
  --grad-card-model: linear-gradient(160deg, #1E5AC8 0%, #0A7CFF 100%);

  /* ---------- Скругления, отступы, тени (DESIGN.md §8) ---------- */
  --radius-card:  20px;
  --radius-btn:   25px;   /* единое скругление кнопок — прямоугольных нет */
  --radius-pill:  999px;

  --gap-section:  80px;
  --gap-card:     24px;

  --shadow-card:  0 4px 24px rgba(10, 124, 255, 0.08);
  --shadow-btn:   0 6px 18px rgba(2, 22, 52, 0.22);

  /* ---------- Сетка ---------- */
  --container-width: 1588px;   /* контент по макету 1920 → поля 166px */
  --container-pad: 40px;

  /* ---------- Шапка / hero (по замерам макета) ---------- */
  --header-height: 133px;
  --header-control: 44px;      /* высота пилюль и круглых кнопок */
  --hero-height: 100vh;        /* весь первый экран, без «хвостов» — dvh-фолбэк в hero.css */

  /* ---------- Зерно (DESIGN.md §5) ---------- */
  --grain-opacity: 0.07;

  /* ---------- Анимация ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;
}

/* ============================================================
   Тёмная тема (переключатель в шапке, DESIGN.md §1)
   ============================================================ */
:root[data-theme='dark'] {
  --color-bg: #0B0F17;
  --color-white: #141A24;
  --color-text: #F2F4F8;
  --color-text-2: #DDE2EA;
  --color-text-muted: #96A0B0;
  --color-gradient-1: #2A3444;

  --grad-card-light: linear-gradient(135deg, #17202D 0%, #0F2038 100%);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   Адаптив: типографика (DESIGN.md §3, колонка Mobile / §11)
   ============================================================ */
@media (max-width: 1439px) {
  :root {
    --header-height: 112px;
    --hero-height: 100vh;
  }
}

@media (max-width: 1023px) {
  :root {
    --gap-section: 56px;
    --container-pad: 24px;
    --header-height: 96px;
    --hero-height: 100vh;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-h1: 36px;  --lh-h1: 1.08;
    --fs-hero-sub: 16px;
    --fs-h2: 20px;
    --fs-h3: 20px;
    --fs-h4: 20px;
    --fs-b1: 48px;
    --fs-b2: 48px;
    --fs-b6: 14px;
    --gap-section: 48px;
    --container-pad: 20px;
    --header-height: 72px;
    --header-control: 40px;
    --hero-height: 100vh;
  }
}