/* ==========================================================================
   Design tokens — Атлас Люксо
   Значения сняты с макета Figma «Макет» (node 1:4995, 1600×2829).
   Размеры заголовков заданы через clamp(): при ширине окна 1600px и больше
   они равны макетным, ниже — плавно уменьшаются.
   ========================================================================== */

:root {
    /* --- Цвета -------------------------------------------------------- */
    --color-navy: #0d2f59;          /* основной синий: заголовки, кнопки  */
    --color-navy-deep: #0a2342;     /* тёмно-синий: body-текст, чекбокс   */
    --color-navy-hover: #0a2547;    /* кнопка при наведении               */
    --color-bronze: #b5917e;        /* акцент: надзаголовки, цена         */
    --color-bronze-line: #b08d79;   /* цвет разделительных линий          */
    --color-ink: #1b1b1b;           /* нейтральный текст описаний         */
    --color-cream: #f0eee9;         /* фон CTA-полосы                     */
    --color-placeholder: #e7e3dc;   /* фон картинки до загрузки           */
    --color-white: #ffffff;

    --color-rule: rgba(181, 145, 126, 0.2);        /* border спецификаций */
    --color-input-border: rgba(13, 47, 89, 0.2);   /* рамка поля ввода    */

    /* --- Прозрачности -------------------------------------------------- */
    --opacity-muted: 0.8;           /* описания                           */
    --opacity-subtle: 0.5;          /* копирайт, чекбокс                  */
    --opacity-rule: 0.2;            /* линии                              */

    /* --- Типографика --------------------------------------------------- */
    --font-family: "Inter", "Helvetica Neue", Arial, sans-serif;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* 3.375vw = 54px, 2.625vw = 42px, 2vw = 32px при ширине окна 1600px */
    --size-h1: clamp(30px, 3.375vw, 54px);
    --size-h2: clamp(26px, 2.625vw, 42px);
    --size-h3: clamp(22px, 2vw, 32px);

    --size-lead: 20px;
    --size-button: 19px;
    --size-body: 18px;
    --size-small: 16px;
    --size-caption: 14px;
    --size-phone: 22px;
    --size-input: 20.69px;

    /* Межстрочные интервалы — коэффициентами, чтобы работали с clamp() */
    --leading-h1: 1;                /* 54 / 54  → 3 строки = 162px        */
    --leading-h2: 1.2143;           /* 51 / 42  → 2 строки = 102px        */
    --leading-h3: 1.1;
    --leading-body: 1.3;
    --leading-lead: 1.4;
    --leading-text: 1.21;           /* «normal» для Inter                 */
    --leading-flat: 16px;

    --tracking-h1: 0.54px;
    --tracking-h2: 0.42px;
    --tracking-h3: 0.32px;
    --tracking-card: 0.2px;
    --tracking-button: 0.19px;
    --tracking-eyebrow: 0.16px;

    /* --- Геометрия ------------------------------------------------------ */
    --frame-width: 1600px;          /* ширина фрейма макета               */
    --content-width: 1440px;        /* рабочая колонка                    */
    --gutter: 80px;                 /* (1600 − 1440) / 2                  */

    --radius-button: 4px;
    --radius-input: 2.759px;
    --radius-checkbox: 5px;

    --button-padding-y: 24px;
    --button-padding-x: 48px;

    /* --- Анимации ------------------------------------------------------- */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --duration-fast: 0.18s;
    --duration-base: 0.3s;
    --duration-slow: 0.7s;
}