/* ============================================================
   МосТехГазы — ДИЗАЙН-СИСТЕМА (единственный источник правды)
   Меняешь цвет/шрифт/отступ ТОЛЬКО здесь. Не хардкодь значения в компонентах.
   ============================================================ */

:root {
  /* ---------- ЦВЕТ (стальной синий + холодный графит + циан) ---------- */
  /* Фоны / поверхности (холодные нейтрали — сталь-бумага) */
  --c-bg: #ffffff;
  --c-surface: #f3f6fa;     /* холодная бумага, секции-чередование */
  --c-surface-2: #e7eef5;
  --c-line: #e1e8f0;        /* границы, разделители */
  --c-line-strong: #c9d5e2;

  /* Текст (холодный графит / навигейт) */
  --c-ink: #0f1b2a;         /* основной */
  --c-ink-2: #46566a;       /* вторичный */
  --c-ink-3: #8494a6;       /* приглушённый */
  --c-on-dark: #dce6f0;     /* текст на тёмном */

  /* Бренд — стальной синий */
  --c-primary: #1d6fa8;
  --c-primary-600: #2586c6;  /* ярче — главный CTA */
  --c-primary-700: #17567f;
  --c-primary-800: #103f5e;  /* hover кнопок */
  --c-primary-50: #eef5fb;   /* светлая подложка */
  --c-primary-100: #d6e6f3;

  /* Акцент — циан/лёд (декор на тёмном: акцент-слово, полосы, бейджи) */
  --c-accent: #38bdf8;
  --c-accent-600: #0ea5e0;
  --c-accent-50: #eaf7fe;

  /* Семантика */
  --c-success: #15803d;     /* экономия / обмен */
  --c-success-50: #f0fdf4;
  --c-danger: #b91c1c;

  /* Тёмные блоки (глубокий навигейт) */
  --c-dark: #0f1b2a;
  --c-dark-2: #142838;

  /* ---------- ТИПОГРАФИКА ---------- */
  --font-display: "Golos Text", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Флюидная типошкала (clamp: моб → десктоп). База ~16px. */
  --fs-50: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);   /* мелкий */
  --fs-100: clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem);/* подписи */
  --fs-200: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);   /* body */
  --fs-300: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);/* lead */
  --fs-400: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem);    /* h4/h3 */
  --fs-500: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);    /* h2 */
  --fs-600: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);      /* h1 */
  --fs-700: clamp(2.4rem, 1.6rem + 3.6vw, 4.25rem);    /* hero display */

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.55;
  --tracking-tight: -0.02em;   /* для крупных заголовков */
  --tracking-normal: 0;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---------- ОТСТУПЫ (шкала) ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  /* Вертикальные отступы секций (флюидные) */
  --section-y: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);

  /* ---------- РАЗМЕРЫ / СЕТКА ---------- */
  --container: 1200px;
  --container-narrow: 820px;
  --container-pad: clamp(1rem, 0.6rem + 2vw, 2rem);

  /* ---------- РАДИУСЫ ---------- */
  /* Строгие радиусы (индустриальный минимализм, не «софт-SaaS») */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-pill: 999px;

  /* ---------- ТЕНИ ---------- */
  /* Сдержанные тени без «свечения» */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.07), 0 1px 4px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 12px 30px rgba(15, 23, 42, 0.09), 0 4px 10px rgba(15, 23, 42, 0.06);
  --shadow-primary: var(--shadow-sm);
  --shadow-accent: var(--shadow-sm);

  /* ---------- АНИМАЦИЯ (сдержанная) ---------- */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- СЛОИ (z-index) ---------- */
  --z-sticky-bar: 60;
  --z-header: 50;
  --z-modal: 100;

  /* ---------- ПРОЧЕЕ ---------- */
  --header-h: 68px;
  --tap-min: 44px; /* минимальная тач-зона на мобиле */
}

/* Уважение к настройкам пользователя по анимации */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}