/*
  Дизайн-токены (z_styles.md): палитра, типографика, сетка, секции, кнопки, формы.
  Темы страниц — через переопределение семантических переменных на :root или .page-* / .section--*.
*/

:root {
  /* ——— Палитра макета (только эти шестнадцатеричные + фон) ——— */
  --palette-1: #30838c;
  /* Hero: адрес + иконка map.svg (макет) */
  --c-hero-location: #30838c;
  --palette-2: #f4bb86;
  --palette-3: #9a9842;
  --palette-4: #22abba;
  --palette-error: #ed2226;
  --palette-surface: #ffffff;

  /* ——— Семантика «светлая страница» (по умолчанию) ——— */
  --c-bg-page: var(--palette-surface);
  --c-page-bg: var(--c-bg-page);
  --c-primary: var(--palette-1);
  --c-accent: var(--palette-2);
  --c-accent-muted: var(--palette-3);
  --c-accent-bright: var(--palette-4);
  --c-text: var(--palette-1);
  --c-text-muted: color-mix(in srgb, var(--palette-1) 70%, var(--palette-surface));
  --c-text-reverse: var(--palette-surface);
  --c-heading-on-light: var(--palette-1);
  --c-heading-on-dark: var(--palette-surface);
  --c-body-on-light: var(--palette-1);
  --c-body-on-dark: var(--palette-surface);

  --c-border: color-mix(in srgb, var(--palette-1) 22%, var(--palette-surface));
  --c-border-strong: color-mix(in srgb, var(--palette-1) 40%, var(--palette-surface));
  --c-focus-ring: color-mix(in srgb, var(--palette-4) 55%, var(--palette-surface));

  /* Ошибки формы (z_styles.md) */
  --c-error: var(--palette-error);

  --c-placeholder: color-mix(in srgb, var(--palette-1) 48%, var(--palette-surface));
  --c-placeholder-disabled: color-mix(in srgb, var(--palette-1) 22%, var(--palette-surface));
  --c-text-filled-disabled: color-mix(in srgb, var(--palette-1) 45%, var(--palette-surface));

  /* Кнопка primary: заливка «тема страницы» (по умолчанию = Color1) */
  --c-btn-primary-bg: var(--palette-1);
  --c-btn-primary-border: var(--c-btn-primary-bg);
  --c-btn-primary-fg: var(--c-text-reverse);
  --c-btn-primary-hover-bg: var(--palette-4);
  --c-btn-primary-hover-border: var(--palette-4);
  --c-btn-primary-hover-fg: var(--c-text-reverse);
  --c-btn-primary-active-bg: color-mix(in srgb, var(--palette-1) 78%, var(--palette-4));
  --c-btn-primary-active-border: var(--c-btn-primary-active-bg);
  --c-btn-primary-active-fg: var(--c-text-reverse);

  /* Secondary: контурный; на светлом фоне контур Color1 (как в макете hero) */
  --c-btn-secondary-bg: transparent;
  --c-btn-secondary-border: var(--palette-1);
  --c-btn-secondary-fg: var(--palette-1);
  --c-btn-secondary-hover-bg: color-mix(in srgb, var(--palette-1) 10%, transparent);
  --c-btn-secondary-hover-border: var(--palette-1);
  --c-btn-secondary-active-bg: color-mix(in srgb, var(--palette-1) 18%, transparent);

  /* ——— Шрифты ——— */
  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Unifix SP Demo", "Montserrat", system-ui, sans-serif;

  /* ——— Сетка ——— */
  --w-container: 1224px;
  --bs-gutter-x: 12px;
  --bs-gutter-y: 12px;
  --gap-inner: 12px;

  /* H1: max-width «зависит от страницы» — токен для переопределения */
  --w-h1-max: min(100%, 38ch);

  /*
    Вертикальный ритм между секциями:
    сумма = моб 50px / ПК 110px = padding-top 1/3 + margin-bottom 2/3
  */
  --section-gap-mob: 50px;
  --section-gap-lg: 110px;
  --p-section-top: calc(var(--section-gap-mob) / 3);
  --m-section-bottom: calc(var(--section-gap-mob) * 2 / 3);

  /* Hero: отступ сверху под absolute-header (не из ТЗ — только вёрстка) */
  --hero-pt: 88px;
  --hero-pb: 40px;
  --hero-mb: calc(var(--section-gap-mob) * 2 / 3);
  /* Hero главная: отступ блока (H1 + подзаголовок) до кнопок (макет) */
  --hero-home-lead-mb: 57px;

  /* ——— Типографика, mobile-first (z_styles) ——— */
  --fs-h1: 27px;
  --lh-h1: 1;
  --fw-h1: 400;

  --fs-h2: 16px;
  --lh-h2: 1;
  --fw-h2: 400;
  --mb-h2: 20px;

  --fs-body: 14px;
  --lh-body: 1.1;
  --fw-body: 400;

  --fs-btn: 14px;
  --lh-btn: 1;
  --fw-btn: 400;

  /* Кнопки (z_styles): скругление 88, паддинги 12×24 */
  --btn-radius: 88px;
  --btn-border-width: 2px;
  --btn-pad-y: 12px;
  --btn-pad-x: 24px;
  --btn-icon-gap: 8px;

  /* Формы (в ТЗ не детализированы — от палитры) */
  --input-pad-y: 12px;
  --input-pad-x: 16px;
  --input-radius: 16px;
  --textarea-min-h: 100px;
  --form-error-mt: 4px;
  --fs-form-error: 12px;
  --lh-form-error: 1.2;
}

/* Тёмная секция (не первый экран): кнопки и текст — только палитра */
.section--dark {
  --c-heading-on-light: var(--palette-surface);
  --c-body-on-dark: var(--palette-surface);
  --c-btn-primary-bg: var(--palette-2);
  --c-btn-primary-border: var(--palette-2);
  --c-btn-primary-fg: var(--palette-1);
  --c-btn-primary-hover-bg: color-mix(in srgb, var(--palette-2) 88%, var(--palette-surface));
  --c-btn-primary-hover-border: var(--c-btn-primary-hover-bg);
  --c-btn-primary-active-bg: var(--palette-4);
  --c-btn-primary-active-border: var(--palette-4);
  --c-btn-primary-active-fg: var(--palette-surface);
  --c-btn-primary-hover-fg: var(--palette-1);

  --c-btn-secondary-bg: transparent;
  --c-btn-secondary-border: var(--palette-surface);
  --c-btn-secondary-fg: var(--palette-surface);
  --c-btn-secondary-hover-bg: color-mix(in srgb, var(--palette-surface) 14%, transparent);
  --c-btn-secondary-hover-border: var(--palette-surface);
  --c-btn-secondary-active-bg: color-mix(in srgb, var(--palette-surface) 22%, transparent);
}