:root {
  /* ==== ЦВЕТА ==== */
  /* Фон страницы: тёплый off-white */
  --color-bg: #FAF8F5;
  /* Фон карточек bento (чуть светлее фона страницы) */
  --color-surface: #FFFFFF;
  /* Альтернативный фон карточки (тонированная, для 1-2 карточек на секцию) */
  --color-surface-alt: #F1EDE7;
  /* Основной текст: тёплый near-black */
  --color-ink: #1C1B19;
  /* Вторичный текст (подписи, body в карточках). Контраст на bg = 7.2:1 */
  --color-ink-soft: #524F49;
  /* Акцент: глубокий хвойный зелёный. Контраст на surface = 6.9:1 */
  --color-accent: #2F5D50;
  /* Акцент при hover/active (темнее) */
  --color-accent-strong: #234A3F;
  /* Тонированная подложка под акцент (фон бейджей, tinted-карточка) */
  --color-accent-tint: #E7EFEB;
  /* Границы карточек и разделители */
  --color-line: #E4DFD7;
  /* Текст на акцентном фоне (кнопки) */
  --color-on-accent: #FFFFFF;
  /* Цвет ошибки формы. Контраст на surface = 5.9:1 */
  --color-error: #B3352E;

  /* ==== ТИПОГРАФИКА ==== */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Шкала размеров. Использование каждого — см. раздел 3 */
  --text-display: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);   /* h1, цена */
  --text-h2:      clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem); /* заголовки секций */
  --text-h3:      clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);  /* заголовки карточек */
  --text-lead:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); /* подзаголовок hero */
  --text-body:    1rem;                                      /* основной текст */
  --text-small:   0.875rem;                                  /* примечания, footer */
  --text-label:   0.75rem;  /* uppercase-метки секций и карточек */

  --leading-display: 1.05;
  --leading-h2: 1.1;
  --leading-h3: 1.25;
  --leading-body: 1.6;

  --tracking-label: 0.08em;  /* только для uppercase-меток */
  --tracking-display: -0.015em; /* только для --text-display и --text-h2 */

  /* Насыщенности. Другие weight не использовать. */
  --weight-display: 600;  /* Fraunces */
  --weight-body: 400;     /* Inter */
  --weight-medium: 500;   /* Inter: метки, кнопки, nav */
  --weight-semibold: 600; /* Inter: заголовки карточек h3, цифры-статистика */

  /* ==== SPACING (шаг 4px) ==== */
  --space-1: 0.25rem;  /*  4px — зазор бейджа */
  --space-2: 0.5rem;   /*  8px — между меткой и заголовком */
  --space-3: 0.75rem;  /* 12px — между заголовком карточки и текстом */
  --space-4: 1rem;     /* 16px — внутренние отступы мелких элементов */
  --space-5: 1.5rem;   /* 24px — padding карточки на мобиле */
  --space-6: 2rem;     /* 32px — padding карточки на десктопе */
  --space-7: 3rem;     /* 48px — между заголовком секции и её гридом */
  --space-8: 4rem;     /* 64px — вертикальный отступ между секциями (мобайл) */
  --space-9: 6rem;     /* 96px — вертикальный отступ между секциями (десктоп) */

  /* ==== ГРИД ==== */
  --container-max: 72rem;                       /* 1152px */
  --container-pad: clamp(1rem, 4vw, 2rem);
  --gap-grid: clamp(1rem, 1.8vw, 1.375rem);     /* gap bento-сетки */

  /* ==== ФОРМА КАРТОЧЕК ==== */
  --radius-card: 1.25rem;   /* 20px — все bento-карточки */
  --radius-input: 0.625rem; /* 10px — поля формы, кнопки */
  --radius-pill: 999px;     /* бейджи, language toggle */

  /* Тени. По умолчанию карточки БЕЗ тени (только граница). */
  --shadow-hover: 0 8px 24px rgba(28, 27, 25, 0.08);

  /* ==== АНИМАЦИЯ ==== */
  --duration-fast: 150ms;    /* hover, focus */
  --duration-reveal: 500ms;  /* появление при скролле */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-shift: 12px;      /* сдвиг снизу при reveal */
  --reveal-stagger: 60ms;    /* шаг задержки между карточками одного грида */
}