/* =========================================================
   ВАРИАНТ 03 · ALTITUDE — дизайн-токены
   Источник: DESIGN (2).md (Altitude, «midnight financial editorial»).
   Почти чёрный холст, off-white serif-заголовки, единственный акцент — синий
   (только функционально). Палитра/типографика/отступы/радиусы строго из образца.
   ========================================================= */
/* ═══════════════════════════════════════════════════════════════════════════
   Резервный serif с подогнанными метриками (PRD-04 п.6, Core Web Vitals).

   Заголовки набраны Lora (кириллица). Пока она грузится, font-display: swap
   показывает текст резервным шрифтом — и в момент подмены строки «прыгают»,
   если метрики не совпали. Это и есть CLS.

   Значения ниже посчитаны, а не подобраны на глаз: средняя ширина символа
   по русскому алфавиту с цифрами и пунктуацией (67 общих глифов) у Lora
   0.66357 em, у Georgia 0.66821 em -> size-adjust 99.31%. Ascent/descent
   пересчитаны так, чтобы высота строки резерва совпала с Lora (1.28 em).
   Перемерить при смене шрифта: см. отчёт к коммиту «фаза 4».
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Lora Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Liberation Serif");
  size-adjust: 99.31%;
  ascent-override: 101.30%;
  descent-override: 27.59%;
  line-gap-override: 0%;
}

:root {
  /* ---------- Цвета (палитра образца) ---------- */
  --carbon-canvas:  #181818; /* основной холст страницы */
  --obsidian:       #111111; /* глубже всего — футер, контраст-блоки */
  --graphite-card:  #1f1f1f; /* карточки, инпуты — на ступень выше холста */
  --slate-elevated: #262626; /* hover-состояния, строки таблиц, hairline-границы */
  --iron-peak:      #323232; /* верхний ярус — поповеры, бордеры инпутов */
  --bone:           #eeeeee; /* основной текст и hairline (не чистый белый) */
  --ash:            #e4e4e4; /* вторичные границы карточек */
  --fog:            #a4a19b; /* приглушённый текст, штрихи иконок */
  --smoke:          #5e5d59; /* тонкие разделители, плейсхолдеры, low-emphasis */
  --pewter:         #4b4b4b; /* глубокие границы, разделители таблиц */
  --pure-white:     #ffffff; /* глифы иконок, светлые контраст-карточки */
  --voltage-blue:   #2b7fff; /* ЕДИНСТВЕННЫЙ акцент — только функционально: ссылки, фокус */
  --mid-navy:       #1a365d; /* декоративный глубокий синий — штрихи иконок/границ */

  /* ---------- Шрифты ----------
     Libre Baskerville (latin) + Lora (cyrillic, из списка замен образца) — serif-заголовки.
     Inter — весь функциональный UI. Fira Code — терминальные/табличные контексты. */
  --font-serif: "Libre Baskerville", "Lora", "Lora Fallback", Georgia, "Times New Roman", serif;
  --font-ui:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:  "Fira Code", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---------- Типографическая шкала ----------
     Кегль заголовков адаптирован под ДЛИННЫЕ русские слова через clamp
     (образец до 72px; здесь читаемость важнее масштаба). Tracking serif -0.025em. */
  --text-display:    clamp(1.6rem, 6.4vw, 3.35rem); /* hero — нижняя граница ужата под мобайл 390px, чтобы длинные русские строки не вылезали */
  --text-heading-lg: clamp(1.55rem, 3vw, 2.25rem);  /* сериф-заголовки секций (≈48px) */
  --text-heading:    clamp(1.3rem, 2.1vw, 1.75rem); /* 28px */
  --text-heading-sm: 1.125rem;                       /* 18px */
  --text-body-lg:    1rem;       /* 16px — подзаголовки/лиды */
  --text-body:       0.9375rem;  /* 15px — основной текст (комфортнее 14 под RU) */
  --text-small:      0.8125rem;  /* 13px — таблицы, мета */
  --text-caption:    0.6875rem;  /* 11px — капс-лейблы/бейджи */

  --lead-display: 1.1;
  --lead-heading: 1.18;
  --lead-body:    1.55;

  --track-serif:  -0.025em; /* плотный tracking serif-заголовков */
  --track-label:  0.06em;   /* +tracking для мелких капс-лейблов и бейджей */

  --w-regular: 400;
  --w-medium:  500;
  --w-semibold: 600;

  /* ---------- Отступы (шкала образца, база 4px) ---------- */
  --space-4: 4px;   --space-8: 8px;   --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-48: 48px;
  --space-64: 64px; --space-80: 80px; --space-96: 96px; --space-128: 128px;

  --section-gap: clamp(56px, 8vw, 80px); /* образец: 80px, на мобайле ужат */
  --card-pad: var(--space-24);

  /* ---------- Геометрия (радиусы образца) ---------- */
  --radius-sm: 4px;   /* кнопки, инпуты, бейджи, иконки */
  --radius-md: 8px;   /* карточки */
  --radius-lg: 16px;  /* крупные поверхности/визуалы */

  /* ---------- Контейнер ---------- */
  --page-max: 1200px;
  --container-narrow: 820px;
  --gutter: clamp(20px, 5vw, 48px);

  /* ---------- Тайминги движения (animate / design-motion-principles) ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* мягкий выход — reveal/hover */
  --dur-fast: 160ms;
  --dur-base: 220ms;
  --dur-slow: 300ms;

  /* Тени образца — «шёпот» 0.05 непрозрачности, не подъёмы */
  --shadow-card: rgba(51, 51, 51, 0.05) 0px 2px 15px 0px, rgba(51, 51, 51, 0.05) 0px 1px 2px -1px;

  /* ---------- Иконка телефона для компактной мобильной шапки ----------
     Лежит здесь, а не файлом в img/: это часть интерфейса, а не контента.
     Подключается маской, поэтому цвет берётся от текста, а не зашит в картинку.
     Внешних запросов не делает — data-URI покрыт директивой 'img-src self data:'. */
  --icon-phone: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20d=%27M20.01%2015.38c-1.23%200-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57%201.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53%200-.54-.45-.99-.99-.99H4.19C3.65%203%203%203.24%203%203.81%203%2013.28%2010.73%2021%2020.19%2021c.54%200%20.81-.63.81-1.17v-3.44c0-.54-.45-.99-.99-.99z%27/%3E%3C/svg%3E");
}