/*
 * ==========================================================
 * LAYOUT DNA — Dorodova.ru
 * Единый источник дизайн-токенов проекта.
 * Подключается через @import в style.css.
 * Изменения согласуются с архитектором проекта.
 * Версия: v22.04.v17
 * ==========================================================
 */

:root {
   /* ───────────────────────────────────────────────────────
       ЦВЕТА (Brand Colors)
    ─────────────────────────────────────────────────────── */
   --color-emerald: #2E8B57;
   /* Основной брендовый */
   --color-sage: #8A9A5B;
   /* Второстепенный зеленый */
   --color-sage-light: #A4B475;
   --color-lime: #828a35;
   --color-terracotta: #C76E55;
   /* Акцентный теплый */
   --color-dark: #1A1C18;
   /* Основной текст */
   --color-cream: #FFFFFF;
   --color-white: #FFFFFF;
   --color-glow-soft: rgba(138, 154, 91, 0.08);

   /* Текс */
   --text-primary: #1A1C18;
   --text-secondary: #5C6155;

   /* ───────────────────────────────────────────────────────
       РАДИУСЫ (Border Radius Tokens)
    ─────────────────────────────────────────────────────── */
   --radius-xs: 8px;
   /* Мелкие элементы: dropdown-link, input */
   --radius-sm: 16px;
   /* Малые карточки */
   --radius-md: 24px;
   /* Средние блоки */
   --radius-lg: 32px;
   /* Основные карточки (.dor-card) */
   --radius-xl: 40px;
   /* Крупные секции (.article-body, .faq-item) */
   --radius-pill: 100px;
   /* Кнопки, теги, хедер */

   /* ───────────────────────────────────────────────────────
       КНОПКИ (Button Tokens)
    ─────────────────────────────────────────────────────── */
   --btn-padding-y: 16px;
   /* Вертикальный padding кнопок */
   --btn-padding-x: 32px;
   /* Горизонтальный padding кнопок */
   --btn-font-size: 17px;
   /* Размер шрифта кнопок */
   --btn-font-weight: 700;
   /* Жирность шрифта кнопок */
   --btn-border-radius: 100px;
   /* Скругление кнопок */

   /* ───────────────────────────────────────────────────────
       СТЕКЛО (Glass Effect Tokens)
    ─────────────────────────────────────────────────────── */
   --glass-bg: rgba(255, 255, 255, 0.65);
   --glass-border: rgba(255, 255, 255, 0.6);
   --glass-blur: 30px;
   --glass-opacity: 0.3;

   --shadow-glass:
      0 4px 30px rgba(0, 0, 0, 0.05),
      0 1px 3px rgba(0, 0, 0, 0.02),
      inset 0 0 1px rgba(255, 255, 255, 0.4);

   /* ───────────────────────────────────────────────────────
       ГЕОМЕТРИЯ: ДЕСКТОП
    ─────────────────────────────────────────────────────── */
   --d-site-gutter: 20px;
   /* Отступ page-wrapper на десктопе */
   --d-header-top: 20px;
   /* sticky top шапки */
   --d-content-offset: 24px;
   /* Внутренний padding карточек */

   /* ───────────────────────────────────────────────────────
       ГЕОМЕТРИЯ: МОБИЛЬНЫЙ (Золотой стандарт ДНК)
    ─────────────────────────────────────────────────────── */
   --m-site-gutter: 10px;
   /* Отступ от края экрана */
   --m-header-top: 20px;
   /* sticky top шапки */
   --m-content-offset: 18px;
   /* Внутренний padding карточек */

   /* ───────────────────────────────────────────────────────
       ШКАЛА ОТСТУПОВ — Desktop (Spacing Scale)

       Уровень   Значение  Где применяется
       ──────────────────────────────────────────────────────
       xs         8px      icon gap, tiny padding (badge, tag)
       sm        16px      между близкими элементами: label→value,
                           category→title внутри карточки
       md        24px      text→text, text→button (CTA в карточке),
                           между элементами формы
       lg        32px      gap между карточками в гриде,
                           заголовок секции → контент
       xl        48px      внутренний padding крупных карточек,
                           между секциями на mobile
       2xl       64px      внутренний padding article-body,
                           крупные блоки hero
       3xl       80px      вертикальный ритм секций desktop
    ─────────────────────────────────────────────────────── */
   --space-xs: 8px;
   --space-sm: 16px;
   --space-md: 24px;
   --space-lg: 32px;
   --space-xl: 48px;
   --space-2xl: 64px;
   --space-3xl: 80px;

   /* ───────────────────────────────────────────────────────
       ШКАЛА ОТСТУПОВ — Mobile (Mobile Spacing Scale)

       На мобайле всё сжимается пропорционально,
       кроме xs/sm (они и так малы).
    ─────────────────────────────────────────────────────── */
   --m-space-xs: 8px;
   /* Без изменений */
   --m-space-sm: 12px;
   --m-space-md: 18px;
   /* Text→button, внутри карточки = m-content-offset */
   --m-space-lg: 24px;
   /* Gap между карточками mobile */
   --m-space-xl: 32px;
   /* Внутренний padding карточек mobile */
   --m-space-2xl: 48px;
   /* Вертикальный ритм секций mobile */
   --m-space-3xl: 64px;
   /* Вертикальный ритм секций mobile */
   --m-hero-padding-mobile: 40px;
   /* Hero padding mobile */

   /* Дополнительные токены для специфических мобильных отступов */
   --m-section-padding-lg: 32px;    /* Для крупных секций на mobile */
   --m-section-padding-sm: 24px;    /* Для компактных секций на mobile */

   /* ───────────────────────────────────────────────────────
       ТИПОГРАФИЯ (Typography Scale)
    ─────────────────────────────────────────────────────── */
   --font-h1-d: 44px;
   --font-h1-m: 32px;
   --font-h1-weight: 700;

   --font-h2-d: 32px;
   --font-h2-m: 24px;
   --font-h2-weight: 600;

   --font-h3-d: 24px;
   --font-h3-m: 20px;
   --font-h3-weight: 600;

   --font-h4-d: 20px;
   --font-h4-m: 18px;
   --font-h4-weight: 600;

   --font-body-d: 16px;
   --font-body-m: 15px;
   --font-body-weight: 500;

   --font-body-lg-d: 18px;
   --font-body-lg-m: 16px;
   --font-body-lg-weight: 500;

   --font-sm-d: 14px;
   --font-sm-m: 13px;
   --font-sm-weight: 600;

   --font-xs-d: 12px;
   --font-xs-m: 11px;
   --font-xs-weight: 600;

   /* ───────────────────────────────────────────────────────
       PAGE HERO — Универсальный заголовок страницы

       Правила:
       - Если есть .page-badge: заголовок следует сразу после badge
       - Если нет .page-badge: заголовок получает margin-top: var(--space-md)
         для выравнивания по вертикали
    ─────────────────────────────────────────────────────── */

   /* Алиасы для секций (для читаемости в style.css) */
   --section-padding-d: var(--space-3xl);
   /* 80px */
   --section-padding-m: var(--m-space-2xl);
   /* 48px */
}