/*
  Тропы — токены сайта. Источник правды: design/brandbook.md.

  🔴 Бренд сменился 15.08.2026 целиком: была зелёно-белая схема с Unbounded,
  стала нашивка национального парка — хвоя, бумага, терракота, солнце,
  Alegreya Sans. Зелёный ушёл из акцентов в фон и типографику.

  ⚠️ Имена переменных намеренно нейтральные (--accent, а не --green): прежние
  `--green-primary` в новом бренде означали бы терракоту, и каждый, кто откроет
  файл, спотыкался бы об это. Старые имена оставлены псевдонимами внизу —
  ими ещё пользуются страницы, которые не переписаны.
*/

/*
  🔴 Шрифты лежат у нас, а не на Google Fonts.

  Прежняя редакция подключала их с `fonts.googleapis.com`. Для сайта с
  российской аудиторией это лишняя точка отказа: сторонний CDN, до которого
  часть пользователей доедет медленно, а часть — не доедет вовсе, и тогда
  страница показывается системным гротеском мимо бренда. Файлы конвертированы
  из тех же TTF, что вшиты в приложение (`@expo-google-fonts`), — на сайте
  и в приложении буквы одни и те же.

  ⚠️ Начертаний ровно четыре: заголовочное в обычном и жирном, текстовое
  в обычном и полужирном. Каждое лишнее — это ещё 30–80 КБ на первой загрузке.
  Обе гарнитуры под SIL OFL 1.1: раздавать со своего домена разрешено.
*/
@font-face {
  font-family: 'Alegreya Sans';
  src: url('/fonts/alegreya-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('/fonts/alegreya-sans-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('/fonts/onest-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Onest';
  src: url('/fonts/onest-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* ── Бренд ── */
  --pine:             #1F3D2B;
  --pine-deep:        #16301F;
  --accent:           #C05A2E;
  --accent-hover:     #A34A24;
  --accent-soft:      #F6E2D6;
  --accent-softer:    #FBF1E9;
  --sun:              #E8A33D;

  /* ── Поверхности: бумага вместо белого ── */
  --bg:               #FAF3E4;
  --bg-warm:          #F2E6CE;
  --surface:          #FFFBF2;
  --surface-2:        #F5EEDC;

  /* ── Границы — в тон бумаге, не серые ── */
  --border:           #E0D5BC;
  --border-strong:    #C9B894;

  /* ── Текст: тёплый тёмный, не чёрный ── */
  --text-primary:     #26241D;
  --text-secondary:   #4A4638;
  --text-muted:       #6E6857;
  --text-inverse:     #FFF6EA;

  /* ── Смысловые ── */
  --amber:            #E8A33D;
  --amber-soft:       #F9E7C4;
  --amber-dark:       #7A5416;
  --red:              #B23A2E;
  --red-soft:         #F6D9D2;
  --sky:              #2E6C8A;
  --info-soft:        #DCEAF0;
  --info-text:        #245B74;

  /*
    ── Сложность маршрута ──
    🔴 Одна лестница на весь продукт, те же значения, что в приложении.
    Подбор идёт под зелёную карту, а не под интерфейс: маркер должен читаться
    на светло-зелёной суше, поэтому «лёгкий» — самый тёмный тон.
  */
  --trail-easy:       #1F3D2B;
  --trail-moderate:   #E8A33D;
  --trail-hard:       #C05A2E;
  --trail-expert:     #8F2C22;

  /* ── Карта ── */
  --map-track:        #C05A2E;
  --map-user-loc:     #2E6C8A;
  --map-user-halo:    rgba(46, 108, 138, 0.18);
  --map-finish:       #B23A2E;

  /* ── Оверлеи ── */
  --overlay:          rgba(20, 24, 16, 0.6);
  --overlay-light:    rgba(20, 24, 16, 0.3);
  --glass-light:      rgba(255, 251, 242, 0.88);
  --glass-dense:      rgba(255, 251, 242, 0.94);

  /* ── Тени с хвойным подтоном: чёрные на бумаге выглядят грязными ── */
  --shadow-sm: 0 1px 2px rgba(31, 61, 43, 0.07);
  --shadow-md: 0 4px 12px rgba(31, 61, 43, 0.09);
  --shadow-lg: 0 12px 34px rgba(31, 61, 43, 0.12);

  /* ── Радиусы ── */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* ── Отступы (сетка 4px) ── */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;

  /* ── Шрифты ── */
  --font-display: 'Alegreya Sans', system-ui, sans-serif;
  --font-body:    'Onest', system-ui, sans-serif;

  /*
    ── Псевдонимы прежних имён ──
    ⚠️ Чтобы не переписанные страницы не рассыпались. Новый код их не использует:
    «green» здесь означает терракоту, и это ровно та путаница, ради ухода
    от которой имена и поменяли.
  */
  --green-primary:    var(--accent);
  --green-hover:      var(--accent-hover);
  --green-dark:       var(--pine);
  --green-soft:       var(--accent-soft);
  --green-softer:     var(--accent-softer);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Типографические роли ─────────────────────────────────────────────── */

.t-overline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-wrap: balance;
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  line-height: 1.15;
  color: var(--text-primary);
  text-wrap: balance;
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--text-primary);
}

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.t-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/*
  Имя бренда всегда капсом с разрядкой: без неё гротеск в капсе выглядит
  плотно и теряет «нашивочность».
*/
.t-brand {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}