/*
 * Design tokens — MNTN Landing Page
 * Источник: Figma SNLbrkVq2WmcBScYFT1u7y, фрейм #1:2 (1920×4600).
 * Макет только десктопный: значения «desktop» — из макета, «mobile» — выведены (не из макета).
 */

:root {
  /* ---------- Цвета (стили Figma: BG, Accent, Weiß) ---------- */
  --color-surface: #0b1d26;
  --color-accent: #fbd784;
  --color-text: #ffffff;
  --color-text-muted: rgb(255 255 255 / 0.5);   /* копирайт, фон полосы слайдера */
  --color-text-ghost: rgb(255 255 255 / 0.1);   /* большие номера 01/02/03 */
  --color-surface-transparent: rgb(11 29 38 / 0);

  /* ---------- Градиенты ---------- */
  /* угол и стопы пересчитаны из gradientHandlePositions узла #11:94 */
  --gradient-hero: linear-gradient(-19.7deg, var(--color-surface-transparent) 31.1%, var(--color-surface) 108.9%);
  --gradient-content: linear-gradient(180deg, var(--color-surface-transparent) 0%, var(--color-surface) 61%);

  /* ---------- Тени (стиль Figma: Shadow) ---------- */
  --shadow-soft: 0 0 100px 0 rgb(0 0 0 / 0.2);
  --shadow-soft-drop: drop-shadow(0 0 50px rgb(0 0 0 / 0.2)); /* та же тень для группы (текст + полоса) */

  /* ---------- Шрифты ---------- */
  /* Файлы шрифтов — styles/fonts.css; запасные — на время загрузки */
  --font-body: "Gilroy", system-ui, sans-serif;
  --font-display: "Chronicle Display", Georgia, serif;

  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ---------- Типографика: mobile (не из макета, база) ---------- */
  --text-h1-size: 40px;
  --text-h1-line: 48px;
  --text-h2-size: 32px;
  --text-h2-line: 40px;
  --text-number-size: 120px;
  --text-number-line: 120px;
  --text-logo-size: 24px;
  --text-logo-line: 30px;
  --text-body-size: 16px;
  --text-body-line: 28px;
  --text-ui-size: 16px;
  --text-ui-line: 20px;
  --text-tagline-size: 14px;
  --text-tagline-line: 18px;
  --text-heading-sm-size: 20px;
  --text-heading-sm-line: 28px;
  --text-footer-link-size: 16px;
  --text-footer-link-line: 28px;
  --text-logo-tracking: 0.01em;      /* 0.32px, из макета */
  --text-tagline-tracking: 0.2em;    /* mobile: длинные тэглайны не переносятся; desktop 6px — ниже */

  /* ---------- Шкала отступов ---------- */
  --space-0: 2px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 80px;
  --space-8: 120px;
  --space-9: 200px;

  /* Вне шкалы — из макета, приведение к шкале сломает 1px-допуск */
  --space-feature-stack: 27px;       /* gap внутри текстового блока Feature */
  --space-feature-number-x: 150px;   /* сдвиг текста от номера */
  --space-feature-number-top: 38px;  /* верх номера от верха секции */
  --space-feature-gap: 114px;        /* между фото и колонкой текста */
  --space-feature-column-gap: var(--space-5); /* tablet; desktop = --space-feature-gap — ниже */
  --space-header-top: 58px;          /* 64 − 6: буквы логотипа выступают над фреймом хедера */
  --space-hero-top: 191px;           /* 287 − (58 + 38.4): от низа хедера до Hero */
  --space-hero-left: 396px;          /* 500 − 80 − 24: от колонки Social до текста Hero */
  --space-hero-social-offset: 72px;  /* 359 − 287: Social ниже верха Hero */
  --space-hero-slider-offset: 39px;  /* 326 − 287: Slider ниже верха Hero */

  /* ---------- Размеры ---------- */
  --container-max: 1462px;           /* колонка секций */
  --container-wide-max: 1760px;      /* хедер */
  --gutter: var(--space-2);          /* mobile; desktop 80px — ниже */
  --header-height: calc(var(--space-3) + var(--text-logo-line) + var(--space-2) + var(--text-ui-line)); /* mobile: две строки */
  --space-section: var(--space-8);   /* gap между секциями; desktop 200px — ниже */
  --measure-hero: 950px;
  --measure-h2: 555px;
  --measure-body: 632px;
  --measure-footer-slogan: 303px;
  --feature-image-width: 566px;
  --feature-image-ratio: 566 / 720;
  --feature-image-share: 45%;        /* не из макета: доля фото на планшете; desktop 40% — ниже */
  --tagline-line-width: var(--space-5); /* mobile; desktop 72px — ниже */
  --tagline-line-height: var(--space-0);
  --icon-size: 24px;
  --slider-track-width: 3px;
  --slider-track-height: 240px;
  --slider-indicator-height: 60px;

  /* ---------- Сцена с горами (координаты слоёв в пикселях макета 1920) ---------- */
  --scenery-design-width: 1920;
  --scenery-min-width: 900px;        /* не из макета: на узких экранах горы не мельчают */
  --scenery-sky-top: -400;
  --scenery-middle-top: 464;
  --scenery-front-top: 768;
  --scenery-hero-gradient-height: 1200;
  --scenery-content-gradient-top: 1200;
  --scenery-content-gradient-height: 700;
  --scenery-content-start: 1440;     /* где начинается первая секция */
  --scenery-unit: calc(max(100cqw, var(--scenery-min-width)) / var(--scenery-design-width)); /* 1px макета; cqw от .page */

  /* ---------- Слои (порядок слоёв Figma) ---------- */
  --layer-sky: 0;
  --layer-hero-gradient: 1;
  --layer-hero-content: 6;           /* текст над горами; под горами только ≥1920 — ниже */
  --layer-mountains-middle: 3;
  --layer-mountains-front: 4;
  --layer-content-gradient: 5;
  --layer-ui: 6;

  /* ---------- Иконки ---------- */
  --icon-arrow-width: 16px;
  --icon-arrow-height: 24px;

  /* ---------- Фокус (не из макета) ---------- */
  --focus-ring-width: 2px;
  --focus-ring-offset: 4px;

  /* ---------- Движение (не из макета) ---------- */
  --duration-fast: 200ms;
  --opacity-active: 0.8;
  --easing-standard: ease-out;

  /* Появление карточек Feature при прокрутке */
  --duration-reveal: 800ms;
  --easing-reveal: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-shift: var(--space-5);    /* mobile; tablet+ 80px — ниже */
}

/* ---------- Tablet ≥768 (не из макета) ---------- */
@media (min-width: 768px) {
  :root {
    --header-height: calc(var(--space-3) + var(--text-logo-line));
    --gutter: var(--space-5);
    --reveal-shift: var(--space-7);
  }
}

/* ---------- Desktop ≥1280: значения из макета ---------- */
@media (min-width: 1280px) {
  :root {
    --text-h1-size: 88px;
    --text-h1-line: 100px;

    --text-h2-size: 64px;
    --text-h2-line: 76.8px;            /* auto в Figma = 1.2 */

    --text-number-size: 240px;
    --text-number-line: 240px;

    --text-tagline-tracking: 0.3333em; /* 6px, из макета */
    --tagline-line-width: 72px;

    --text-logo-size: 32px;
    --text-logo-line: 38.4px;

    --text-tagline-size: 18px;
    --text-tagline-line: 22px;

    --text-body-size: 18px;
    --text-body-line: 32px;

    --text-ui-size: 18px;              /* навигация, ссылки, «scroll down», слайдер */
    --text-ui-line: 22px;

    --text-heading-sm-size: 24px;      /* заголовки колонок футера */
    --text-heading-sm-line: 32px;

    --text-footer-link-size: 18px;     /* ссылки футера, Medium */
    --text-footer-link-line: 32px;

    --gutter: var(--space-7);
    --space-feature-column-gap: var(--space-feature-gap);
    --feature-image-share: 40%;        /* предел ширины фото на узком десктопе */
    --space-section: var(--space-9);
    --header-height: calc(var(--space-header-top) + var(--text-logo-line));
  }
}

/* ---------- Ширина макета ≥1920: текст Hero уходит под горы, как в Figma ---------- */
/* Уже 1920 горы мельчают и перекрывают заголовок, поэтому эффект только здесь */
@media (min-width: 1920px) {
  :root {
    --layer-hero-content: 2;
  }
}