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

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

  /* Текст (тёмный тик-графит) */
  --c-ink: #0d2b29;         /* основной */
  --c-ink-2: #46605d;       /* вторичный */
  --c-ink-3: #7d9895;       /* приглушённый */
  --c-on-dark: #d7ece9;     /* текст на тёмном */

  /* Бренд — тёмная бирюза / изумруд */
  --c-primary: #0e8c82;
  --c-primary-600: #12a594;  /* ярче — главный CTA */
  --c-primary-700: #0b6f68;
  --c-primary-800: #084f4a;  /* hover кнопок */
  --c-primary-50: #e9f7f5;   /* светлая подложка */
  --c-primary-100: #c9ece7;

  /* Акцент — мята (декор на тёмном: акцент-слово, полосы, бейджи) */
  --c-accent: #2dd4bf;
  --c-accent-600: #14b8a6;
  --c-accent-50: #e6fbf7;

  /* Второй акцент — золото/латунь (цифры, бейдж ХИТ, кавычки, деталь логотипа) */
  --c-gold: #e0a526;
  --c-gold-600: #c78d16;
  --c-gold-700: #a8760f;
  --c-gold-50: #faf1dc;

  /* Медь/терракота — тёплый ИНДУСТРИАЛЬНЫЙ комплемент к бирюзе.
     С золотом образуют «тёплый металл»: медь=заливки/глубина, золото=блик. */
  --c-copper: #c2683a;
  --c-copper-600: #a9552b;
  --c-copper-700: #86401f;
  --c-copper-50: #f8ede4;
  --c-copper-100: #f0d8c7;

  /* Тёплая бумага — тёплый нейтральный для чередования секций
     (вместо холодного «туманного» тинта: он и делал сайт скучным). */
  --c-warm: #f7f3ec;
  --c-warm-2: #efe7d9;
  --c-warm-line: #e7ddca;

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

  /* Тёмные блоки (глубокий тик) */
  --c-dark: #0b2b2a;
  --c-dark-2: #103b38;

  /* ---------- ТИПОГРАФИКА ---------- */
  --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;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;

  /* Флюидная типошкала (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);
  --section-y-sm: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);  /* слим-банд (цифры) */
  --section-y-lg: clamp(3.5rem, 2.2rem + 5vw, 7rem);        /* закрывающий CTA */

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

  /* ---------- РАДИУСЫ ---------- */
  /* Мягче прежнего — но по-разному под роль (карточки крупнее кнопок) */
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ---------- ТЕНИ ---------- */
  /* Мягкие, ink-тонированные (не чёрные, низкая альфа) */
  --shadow-xs: 0 1px 2px rgba(13, 43, 41, 0.05);
  --shadow-sm: 0 6px 18px rgba(13, 43, 41, 0.06);
  --shadow-md: 0 10px 28px rgba(13, 43, 41, 0.08);
  --shadow-lg: 0 18px 40px rgba(13, 43, 41, 0.10);
  --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;
  }
}