/* ============================================================
   Дизайн-токены «У#Дачный»
   Источник: Figma «уДачный (Согласование)» → страница
   «Драфт 10.06 (АКТУАЛЬНЫЙ)» → фрейм UI-kit.
   Цвета сняты пипеткой в Figma (Properties → Colors), точные.
   Типографика: имена стилей 1920/390 из фрейма fonts UI-kit.
   ============================================================ */
:root {
    /* ---- Цвета (точные из Figma UI-kit → COLOR) ---- */
    --c-light:   #FFFFF1;   /* Light — основной фон */
    --c-green:   #11391E;   /* Dark — основной зелёный (лого, заголовки, кнопки, подвал) */
    --c-dark:    #11391E;   /* Dark — тот же зелёный (подвал/тёмные плашки) */
    --c-beige:   #EAE3D3;   /* beige — пилюли навбара, табы, бар */
    --c-coffee:  #CCC5B5;   /* coffee with milk — иконки-боксы, тёплые плашки */
    --c-red:     #E85F5C;   /* Red (important) — акцент «важно» (цена от…, скидка) */
    --c-success: #34C759;   /* green (success) — статус «свободно»/успех */

    /* Производные (полупрозрачные от зелёного) */
    --c-line:    rgba(17, 57, 30, .16);   /* тонкие разделители */
    --c-muted:   rgba(17, 57, 30, .58);   /* приглушённый текст */
    --c-line-light: rgba(255, 255, 241, .18); /* разделители на тёмном фоне */

    --bg: var(--c-light);
    --text: var(--c-green);
    --accent: var(--c-green);
    --accent-strong: var(--c-green);

    /* ---- Шрифт ---- */
    /* Figma: Geometria. Подключена локально в assets/css/fonts.css
       (assets/fonts/*.ttf). Montserrat — резервный фолбэк. */
    --font-head: "Geometria", "Montserrat", system-ui, sans-serif;
    --font-body: "Geometria", "Montserrat", system-ui, sans-serif;
    --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;

    /* ---- Типографическая шкала — брейкпоинт 1920 (десктоп) ----
       Названия = стили из UI-kit (fonts). H2 подтверждён напрямую:
       Geometria Medium 500, 65px, line-height 100%, letter-spacing -2%, UPPERCASE. */
    --fs-h1: 120px;  /* H1 — дисплейный (для героя); в макете крупный, точный размер уточнить */
    --fs-h2: 65px;   /* H2 — секционные заголовки */
    --fs-h3: 26px;   /* H3 — подзаголовки/заголовки карточек */
    --fs-t1: 20px;   /* T1 — основной текст */
    --fs-t2: 16px;   /* T2 — вторичный/мелкий текст */
    --fs-d1: 20px;   /* D1 — акцент-описание (курсив) */
    --fs-d2: 20px;   /* D2 — акцент-описание (курсив, жирнее) */
    --fs-b1: 20px;   /* B1 — текст кнопок */
    --fs-n1: 30px;   /* N1 — числа/цены средние */
    --fs-n2: 55px;   /* N2 — числа/цены крупные */

    --lh-head: 1;      /* line-height заголовков (100%) */
    --ls-head: -.02em; /* letter-spacing заголовков (-2%) */

    /* ---- Сетка / радиусы ---- */
    --container: 1600px;
    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 28px;
    --radius-pill: 999px;
    --radius-square: 12px; /* квадратные кнопки — со скруглением угла */
}

/* ---- Типографическая шкала — брейкпоинт 390 (мобилка) ----
   640px — единый мобильный брейкпоинт проекта (совпадает с медиа мобильной
   вёрстки в components.css / home.css / css страниц). */
@media (max-width: 640px) {
    :root {
        --container: 100%;
        --fs-h1: 48px;
        --fs-h2: 40px;
        --fs-h3: 24px;
        --fs-t1: 18px;
        --fs-t2: 16px;
        --fs-d1: 20px;
        --fs-d2: 20px;
        --fs-b1: 18px;
        --fs-n1: 30px;
        --fs-n2: 55px;
    }
}