/* ==========================================================================
   TOKENS — единственный источник правды по цвету, типографике, ритму
   ========================================================================== */

:root {
  /* --- Цвет: поверхности ---------------------------------------------------
     Плиточная система: серый фон страницы, белые плиты контента.
     Разделение идёт контрастом поверхностей, а не бордерами.            */
  --c-bg: #EEF0F5;
  --c-surface: #FFFFFF;
  --c-surface-2: #F5F6FA;
  --c-surface-3: #E9ECF3;
  --c-line: #E3E6EE;

  /* --- Цвет: текст — нейтральные оттенки чёрного --------------------------- */
  --c-heading: #0D0F13;
  --c-text: #191C22;
  /* Вторичный текст встречается и на сером фоне страницы — оттенок подобран
     так, чтобы проходить 4.5:1 на всех трёх поверхностях. */
  --c-muted: #656B77;

  /* --- Цвет: бренд ---------------------------------------------------------
     Тёмно-зелёный работает точечно: primary-кнопки, тёмный CTA-блок,
     подвал и знак. В тексте не используется.                            */
  --c-brand: #002F2F;
  --c-brand-deep: #001E1E;
  --c-brand-mid: #14614A;
  --c-panel: #1B1E24;
  --c-accent: #FFDD58;
  --c-accent-deep: #F2C63D;

  /* --- Цвет: служебные состояния ------------------------------------------ */
  --c-error: #C0261C;
  --c-error-bg: #FDF2F1;
  --c-success: #1B6B49;
  --c-success-bg: #EFF7F3;

  /* --- Цвет: на тёмном ---------------------------------------------------- */
  --c-on-dark: #FFFFFF;
  --c-on-dark-muted: #A6B6B4;
  --c-on-dark-line: rgba(255, 255, 255, .14);
  --c-on-dark-field: rgba(255, 255, 255, .07);

  /* --- Типографика ---------------------------------------------------------
     Golos Text — заголовки и метки, Inter — текст.
     Прописные набираются весом 600 и положительным трекингом: тяжёлый вес
     вместе с отрицательным трекингом превращает строку в чёрную плашку. */
  --font-head: 'Golos Text', 'Segoe UI', Arial, sans-serif;
  --font-base: 'Inter', 'Segoe UI', Arial, sans-serif;

  /* Нижняя граница H1 — 26px: при большем кегле слово «БЛАГОУСТРОЙСТВА»
     не помещается в ширину плиты на 375px и рвёт раскладку. */
  --fs-h1: clamp(1.625rem, 0.97rem + 2.78vw, 3.75rem);      /* 26 → 60 */
  --fs-h2: clamp(1.5rem, 1.16rem + 1.45vw, 2.5rem);         /* 24 → 40 */
  --fs-h3: clamp(1.1875rem, 1.07rem + 0.5vw, 1.5rem);       /* 19 → 24 */
  --fs-h4: clamp(1.0625rem, 1.0rem + 0.27vw, 1.25rem);      /* 17 → 20 */
  --fs-body: clamp(1rem, 0.98rem + 0.09vw, 1.0625rem);      /* 16 → 17 */
  --fs-small: clamp(0.875rem, 0.85rem + 0.09vw, 0.9375rem); /* 14 → 15 */
  --fs-caption: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem);/* 12 → 13 */
  --fs-metric: clamp(2rem, 1.53rem + 2vw, 3.25rem);         /* 32 → 52 */
  --fs-metric-sm: clamp(1.625rem, 1.34rem + 1.2vw, 2.25rem);/* 26 → 36 */
  --fs-step: clamp(1.375rem, 1.14rem + 1vw, 2rem);          /* 22 → 32 */

  --fw-head: 600;
  --fw-medium: 500;

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.6;

  --ls-caps: 0.01em;
  --ls-head: -0.01em;
  --ls-eyebrow: 0.12em;

  --measure: 68ch;

  /* --- Сетка и отступы ---------------------------------------------------- */
  --container: 1600px;
  --gutter: 40px;
  --grid-gap: 20px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 80px;
  --s-10: 120px;

  /* Ритм между плитами, а не между цветными полосами */
  --section-y: clamp(20px, 2vw, 32px);
  --block-pad: clamp(24px, 3vw, 56px);
  --block-pad-tight: clamp(20px, 2vw, 32px);

  /* --- Радиусы ------------------------------------------------------------ */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- Тени — холодные и почти незаметные --------------------------------- */
  --sh-1: 0 1px 2px rgba(16, 20, 32, .04);
  --sh-2: 0 12px 28px rgba(16, 20, 32, .08);
  --sh-menu: 0 20px 48px rgba(16, 20, 32, .14);

  /* --- Слои --------------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;

  /* --- Тайминги ----------------------------------------------------------- */
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 520ms;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* --- Служебное ---------------------------------------------------------- */
  --header-h: 80px;
  --focus-ring: 0 0 0 3px var(--c-bg), 0 0 0 6px var(--c-heading);
  --focus-ring-dark: 0 0 0 3px var(--c-brand-deep), 0 0 0 6px var(--c-accent);
}

@media (max-width: 1279px) {
  :root { --gutter: 32px; }
}

@media (max-width: 1023px) {
  :root { --gutter: 24px; --header-h: 72px; }
}

@media (max-width: 767px) {
  :root { --gutter: 16px; --grid-gap: 12px; --header-h: 64px; }
}