/* MAX / Forrest — design tokens
   Источник значений: tokens.json. Правится только там.
   v0.3 · UI Kit + главная forrest.pro */

:root {
  /* Цвет: пять значений, новых не добавлять */
  --c-violet: #6513e5;
  --c-mint:   #c9eecb;
  --c-black:  #000000;
  --c-white:  #ffffff;
  --c-surface:#f8f8f8;

  /* Тёмная поверхность — основная для сайта */
  --d-bg:          #000000;
  --d-surface:     rgba(255, 255, 255, 0.06);
  --d-ink:         #ffffff;
  --d-ink-muted:   rgba(255, 255, 255, 0.62);
  --d-hairline:    rgba(255, 255, 255, 0.16);
  --d-fill:        rgba(255, 255, 255, 0.10);
  --d-fill-strong: rgba(255, 255, 255, 0.16);

  /* Светлая поверхность */
  --l-bg:            #f8f8f8;
  --l-surface:       #ffffff;
  --l-surface-sunken: #f4f4f4;
  --l-ink:           #000000;
  --l-ink-muted:     rgba(0, 0, 0, 0.56);
  --l-hairline:      rgba(0, 0, 0, 0.12);
  --l-fill:          rgba(0, 0, 0, 0.05);
  --l-fill-button:   rgba(0, 0, 0, 0.06);

  /* На акценте */
  --on-violet-ink:   #ffffff;  /* 7.55:1 */
  --on-violet-ink-2: #c9eecb;  /* 6.31:1 */
  --on-mint-ink:     #000000;  /* 16.55:1 */
  --on-mint-ink-2:   #6513e5;  /* 5.95:1 */

  --font-display: 'Neue Machina', 'Space Grotesk', system-ui, sans-serif;
  --font-text:    'Stolzl', 'Poppins', system-ui, sans-serif;

  /* Экранная шкала (десктоп; мобильная — ниже) */
  --t-hero:  156px; --t-hero-lh:  0.90; --t-hero-ls:  -0.045em;
  --t-h2:     48px; --t-h2-lh:    1.02; --t-h2-ls:    -0.030em;
  --t-h3:     34px; --t-h3-lh:    1.10; --t-h3-ls:    -0.025em;
  --t-case:   44px; --t-case-lh:  1.00; --t-case-ls:  -0.030em;
  --t-stat:   64px; --t-stat-lh:  0.90; --t-stat-ls:  -0.040em;
  --t-lead:   20px; --t-lead-lh:  1.45;
  --t-body:   15px; --t-body-lh:  1.55;
  --t-small:  13px; --t-small-lh: 1.55;
  --t-label:  12px; --t-label-ls: 0.10em;

  /* Артбордная шкала — кадр 1080 Instagram */
  --a-display: 128px; --a-h1: 96px; --a-h2: 72px; --a-h3: 60px; --a-h4: 48px;
  --a-subtitle: 40px; --a-body: 30px; --a-caption: 24px; --a-micro: 20px;

  /* Отступы: база 8, промежуточных нет */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;  --s-5: 48px; --s-6: 64px;
  --s-7: 80px; --s-8: 96px; --s-9: 120px; --s-10: 160px;

  /* Радиусы: прямых углов нет */
  --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;

  /* Контролы. Минимум 44 по Apple HIG */
  --h-chip: 44px; --h-button: 56px; --h-input: 56px; --h-input-lg: 60px;

  /* Движение */
  --e-standard: cubic-bezier(0.2, 0, 0, 1);
  --e-soft:     cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 120ms; --d-base: 200ms; --d-slow: 320ms; --d-screen: 480ms;
  --d-reveal: 800ms; --d-rise: 1100ms;

  /* Слои: тень одна, только под оверлеем */
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.18);
  --scrim: rgba(0, 0, 0, 0.64);

  /* Фокус: плотное гало, не обводка */
  --focus-light: 0 0 0 4px #000000;
  --focus-dark:  0 0 0 4px #c9eecb;

  /* Маски на фото: верхняя половина кадра всегда чистая — там лицо */
  --mask-violet: linear-gradient(180deg, rgba(101,19,229,0) 0%, rgba(101,19,229,0) 50%, rgba(101,19,229,0.55) 74%, #6513e5 100%);
  --mask-mint:   linear-gradient(180deg, rgba(201,238,203,0) 0%, rgba(201,238,203,0) 50%, rgba(201,238,203,0.60) 72%, #c9eecb 100%);
  --mask-black:  linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 76%, #000000 100%);

  --icon-size: 18px;
  --icon-stroke: 1.5;
}

@media (max-width: 767px) {
  :root {
    --t-hero: 48px; --t-h2: 28px; --t-h3: 22px; --t-case: 22px; --t-stat: 36px;
    --t-lead: 17px; --t-body: 14px; --t-small: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0ms; --d-base: 0ms; --d-slow: 0ms; --d-screen: 0ms; --d-reveal: 0ms; --d-rise: 0ms; }
}

/* Анимации главной */
@keyframes riseIn { from { transform: translateY(110%) } to { transform: translateY(0) } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: translateY(0) } }

@font-face { font-family: 'Neue Machina'; src: url('fonts/NeueMachina-Medium.otf') format('opentype');    font-weight: 500; font-display: swap }
@font-face { font-family: 'Neue Machina'; src: url('fonts/NeueMachina-Bold.otf') format('opentype');      font-weight: 700; font-display: swap }
@font-face { font-family: 'Neue Machina'; src: url('fonts/NeueMachina-Ultrabold.otf') format('opentype'); font-weight: 800; font-display: swap }
@font-face { font-family: 'Stolzl'; src: url('fonts/Stolzl-Book.otf') format('opentype');   font-weight: 400; font-display: swap }
@font-face { font-family: 'Stolzl'; src: url('fonts/Stolzl-Medium.otf') format('opentype'); font-weight: 500; font-display: swap }
@font-face { font-family: 'Stolzl'; src: url('fonts/Stolzl-Bold.otf') format('opentype');   font-weight: 700; font-display: swap }