/*
 * АНТЕРУС — токены дизайн-системы. Единственный источник визуальных значений.
 * Компоненты (static/design-system.css) используют только эти переменные.
 * Значения из «Оформления» в админке (--appearance-*, --site-*-font) имеют приоритет, если опубликованы.
 *
 * Шрифты (локально, SIL Open Font License 1.1, font-display: swap):
 *   Montserrat — заголовки. static/theme/assets/fonts/Montserrat-Variable*.woff2, ось wght 100–900,
 *     подключение static/presentation/fonts.css. Используются 300 (H1–H2), 400 и 500 (H3–H6).
 *   Golos Text — текст, навигация, кнопки, формы. static/theme/assets/fonts/GolosText-*.ttf,
 *     начертания 400, 500, 600, 700, подключение static/theme/typography-standard.css.
 *   Синтетические начертания запрещены: font-synthesis: none.
 *
 * Контраст (WCAG 2.1, проверено скриптом):
 *   text-primary / background 15.7 · text-secondary / background 5.5 · brand-dark / background 8.6
 *   белый / brand-accent 5.1 · белый / brand-dark 9.6 · brand-accent / background 4.6
 *   border-strong / background 3.5 (поля и элементы управления) · error / background 5.9 · success / background 5.1
 */
/* Important declarations in the first layer win: published appearance remains authoritative. */
@layer appearance-controls, design-system;
:root {
  /* Шрифты */
  --font-family-heading: var(--site-heading-font, 'Montserrat'), 'Helvetica Neue', Arial, sans-serif;
  --font-family-body: var(--site-body-font, 'Golos Text'), 'Helvetica Neue', Arial, sans-serif;
  --font-weight-display: 300;   /* H1, H2 */
  --font-weight-heading: 400;   /* H3, H4 */
  --font-weight-strong-heading: 500; /* H5, H6, имена в карточках */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Типографическая шкала: размер / межстрочный */
  --text-body-size: var(--type-body, 16px);   --text-body-line: 24px;
  --text-lead-size: var(--type-lead, 18px);   --text-lead-line: 28px;
  --text-caption-size: 14px;   --text-caption-line: 20px;
  --text-micro-size: 12px;     --text-micro-line: 16px;   /* только служебные метки: дата, счётчик */
  --text-nav-size: var(--appearance-nav-size, 15px);       --text-nav-line: 20px;
  --text-button-size: var(--appearance-button-size, 16px); --text-button-line: 20px;
  --text-h1-size: var(--appearance-h1-size, 64px);          --text-h1-line: 1.08;
  --text-h2-size: var(--appearance-h2-size, 44px);          --text-h2-line: 1.14;
  --text-h3-size: var(--appearance-h3-size, 26px);          --text-h3-line: 1.23;
  --text-h4-size: var(--appearance-h4-size, 20px);          --text-h4-line: 1.3;
  --text-h5-size: 18px;        --text-h5-line: 1.33;
  --text-h6-size: 16px;        --text-h6-line: 1.5;
  --letter-spacing-display: -0.02em;
  --letter-spacing-label: 0.08em;  /* надписи капслоком */

  /* Цвета */
  --color-brand-dark: var(--appearance-primary, #1E4D41);
  --color-brand-dark-hover: #173D33;
  --color-brand-dark-active: #11302A;
  --color-brand-accent: var(--appearance-accent, #B3502F);
  --color-brand-accent-hover: #9C4429;
  --color-brand-accent-active: #873A23;
  --color-on-brand: var(--appearance-cta-text, #FFFFFF);
  --color-on-primary: var(--appearance-primary-text, #FFFFFF);
  /* Foregrounds are tied to their actual surface, never to an arbitrary brand fill. */
  --color-text-link: var(--appearance-outline, #1E4D41);
  --color-text-link-hover: var(--appearance-link-hover, #B3502F);
  --color-muted-ink: var(--appearance-muted-text, #1E4D41);
  --color-white-ink: var(--appearance-white-text, #1E4D41);
  --color-background: var(--appearance-background, #F5F2EC);
  --color-surface: var(--appearance-surface, #FBF9F5);
  --color-surface-raised: var(--appearance-surface, #FFFFFF);
  --color-surface-muted: #E3EBE5;     /* теги, мягкие плашки */
  --color-surface-muted-hover: #D5E1D8;
  --color-text-primary: var(--appearance-body, #171A18);
  --color-text-secondary: var(--appearance-secondary-text, #5C645F);
  --color-text-on-photo: #FFFFFF;
  --color-border: #E2DCD1;            /* декоративные разделители и рамки карточек */
  --color-border-strong: var(--appearance-outline, #7C837E); /* safe published border; default 3.5:1 */
  --color-success: #2A7353;
  --color-success-surface: #E6F0EA;
  --color-error: #B3261E;
  --color-error-surface: #F8E7E5;
  --color-disabled: #A9AEA9;
  --color-disabled-surface: #ECE9E3;
  --color-focus: var(--appearance-focus, #1E4D41);
  --color-media-backdrop: #000000;   /* видео во весь экран */
  --color-photo-overlay: linear-gradient(180deg, rgba(12, 31, 24, .1) 0%, rgba(12, 31, 24, .55) 55%, rgba(12, 31, 24, .85) 100%);

  /* Отступы */
  --space-4: 4px;  --space-8: 8px;  --space-12: 12px; --space-16: 16px; --space-24: 24px;
  --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-80: 80px;
  --section-gap: var(--space-80);          /* между секциями страницы */
  --heading-gap: var(--space-24);          /* заголовок секции → содержимое */
  --text-gap: var(--space-16);             /* заголовок → описание */
  --action-gap: var(--space-24);           /* описание → кнопка */

  /* Сетка */
  --container-width: 1280px;
  --container-gutter: 48px;
  --grid-gap: var(--space-24);
  --container: min(var(--container-width), calc(100vw - 2 * var(--container-gutter)));
  --container-edge: max(var(--container-gutter), calc((100vw - var(--container-width)) / 2));
  /* Брейкпоинты (для справки: CSS-переменные нельзя использовать в @media):
     mobile ≤ 767, tablet 768–1023, laptop 1024–1279, desktop ≥ 1280 */

  /* Радиус: один на весь сайт. Элементы ниже 48 px получают капсулу той же кривизны. */
  --radius: var(--appearance-radius-surface, 24px);
  --radius-checkbox: 6px;
  --radius-control: var(--appearance-radius, var(--radius));  /* кнопки: «Оформление» в админке может задать свой */

  /* Тени: только плавающие элементы */
  --shadow-floating: 0 8px 28px rgba(30, 77, 65, .10);
  --shadow-none: none;

  /* Кнопки и интерактивные элементы */
  --control-height: 48px;
  --control-padding-x: var(--space-24);
  --control-border-width: 1px;
  --icon-button-size: 44px;
  --touch-target: 44px;
  --tag-height: 32px;
  --tag-padding-x: var(--space-12);
  --focus-ring: 3px solid var(--color-focus);
  --focus-offset: 3px;
  --transition: .2s cubic-bezier(.2, .7, .2, 1);

  /* Шапка */
  --header-offset: 112px;  /* sticky-шапка не перекрывает якоря */
  --header-clearance: 180px; /* отступ содержимого под плавающей шапкой */
}

@media (max-width: 1279px) {
  /* планшет: заголовки плавно между мобильной и настольной шкалой */
  :root { --container-gutter: 32px; --text-h1-size: var(--appearance-h1-size, clamp(40px, 5vw, 56px)); --text-h2-size: var(--appearance-h2-size, clamp(32px, 3.6vw, 40px)); }
}
@media (max-width: 767px) {
  :root {
    --container-gutter: 20px;
    --text-h1-size: var(--appearance-h1-size, 36px); --text-h1-line: 1.11;
    --text-h2-size: var(--appearance-h2-size, 30px); --text-h2-line: 1.2;
    --text-h3-size: var(--appearance-h3-size, 22px); --text-h3-line: 1.27;
    --text-h4-size: var(--appearance-h4-size, 18px);
    --text-lead-size: var(--type-lead, 17px); --text-lead-line: 26px;
    --section-gap: var(--space-64);
    --touch-target: 48px;
    --header-offset: 88px;
    --header-clearance: 104px;
  }
}