/* ===========================================================================
   ТОКЕНЫ ДИЗАЙН-СИСТЕМЫ — ОКБ Перспективной гидромеханики
   Стиль: тёмный промышленный премиум.

   Правило: в разметке страниц не должно быть ни одного цвета, размера шрифта
   или отступа мимо этих переменных. Всё новое сначала заводится сюда.
   =========================================================================== */

:root {
  /* --- Поверхности -------------------------------------------------------
     Тёмная тема плохо держит плотные таблицы данных, поэтому вместо
     однородного чёрного — три уровня поверхности и hairline-границы
     вместо теней. Глубина строится линиями, а не размытием.            */
  --bg-base: #0b0d0f;      /* фон страницы */
  --bg-surface: #14181b;   /* секции, карточки */
  --bg-elevated: #1c2125;  /* таблицы, поднятые блоки, hover */
  --bg-inset: #080a0c;     /* «врезанные» блоки: код, чертёжные поля */

  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --line-accent: rgba(255, 106, 19, 0.45);

  /* --- Текст -------------------------------------------------------------
     Контраст проверен по WCAG: --fg-body и --fg-muted проходят AA
     на всех трёх поверхностях (см. README, раздел «Контраст»).         */
  --fg: #f2f4f5;
  --fg-body: #c9d0d4;
  --fg-muted: #97a0a6;
  --fg-faint: #6d767c;     /* только для декоративных подписей, не для смысла */

  /* --- Акцент ------------------------------------------------------------
     Один акцент. Оранжевый — он уже в ДНК текущего сайта и он же
     промышленный сигнальный цвет.                                       */
  --accent: #ff6a13;
  --accent-hover: #ff8038;
  --accent-dim: #c24e0c;
  --accent-ink: #0b0d0f;   /* текст на оранжевой заливке */
  --accent-wash: rgba(255, 106, 19, 0.08);

  /* --- Сталь -------------------------------------------------------------
     Только для линейной графики, чертёжных штрихов и схем.
     Никогда — для кнопок и основного текста.                            */
  --steel: #7fa8bf;
  --steel-dim: rgba(127, 168, 191, 0.35);

  /* --- Типографика ------------------------------------------------------- */
  --font-display: 'Onest', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Шкала: clamp по ширине окна, без скачков между брейкпоинтами */
  --fs-display: clamp(2.375rem, 1.3rem + 3.4vw, 3.875rem);   /* H1 первого экрана */
  --fs-h1: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
  --fs-h2: clamp(1.625rem, 1.1rem + 1.7vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.65vw, 1.625rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  --fs-body: 1.0625rem;   /* 17px — длинные тексты на тёмном фоне */
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-mono-label: 0.75rem;

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.65;

  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-label: 0.14em;   /* моно-метки капсом */

  /* --- Интервалы (8pt) ---------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6rem;
  --sp-12: 8rem;

  /* Вертикальный ритм секций */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* --- Сетка -------------------------------------------------------------- */
  --container: 1280px;
  --container-narrow: 880px;   /* колонка длинного текста — кейсы, статьи */
  --gutter: clamp(1.25rem, 0.5rem + 2.5vw, 2.5rem);
  --grid-gap: clamp(1rem, 0.5rem + 1.4vw, 1.5rem);

  /* --- Радиусы и границы --------------------------------------------------
     Радиусы почти нулевые: промышленный, а не «продуктовый» язык.       */
  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;

  /* --- Движение -----------------------------------------------------------
     Минимальное и точное. Ничего пружинящего.                           */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;

  --header-h: 72px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}