:root {
    /* Отступ отсутствует */
    --spacing-none: 0;

    /* Внутри компонента: padding, gap */
    --spacing-micro: 4px;

    /* Внутри компонента: padding, gap */
    --spacing-tiny: 8px;

    /* Между элементами/компонентами, контент mobile: margin, padding, gap */
    --spacing-small: 16px;

    /* Между блоками/группами, контент Desktop/Tablet: margin, padding, gap */
    --spacing-medium: 24px;

    /* Границы контентной области для экранов >1920px */
    --spacing-large: 32px;

    --spacing-xlarge: 48px;

    /* Тени (светлые/дефолтные значения; тёмные переопределяются в themes/dark.css) */

    /* Лёгкая тень: ховер кнопок/селектов/chip, карточки шагов скрипта */
    --shadow-sm: 0 2px 4px rgb(38 38 38 / 15%);

    /* Стандарт: поповеры, дропдауны, календарь */
    --shadow-md: 0 2px 4px rgb(38 38 38 / 8%), 0 4px 8px rgb(38 38 38 / 15%);

    /* Высокий подъём: модалки, диалоги */
    --shadow-lg: 0 4px 8px rgb(38 38 38 / 10%), 0 8px 16px rgb(38 38 38 / 20%);

    /* Скругления углов */

    /* Таблицы, сепараторы, новостная строка */
    --radius-none: 0;

    /* Чекбоксы */
    --radius-micro: 4px;

    /* Маленькие кнопки */
    --radius-small: 12px;

    /* Панели, контейнеры, дропдауны, карточки, модалки, кнопки, поля ввода */
    --radius-base: 16px;

    /* Аватарки, круглые иконки, переключатели, каунтеры */
    --radius-pill: calc(infinity * 1px);

    /* Переходы */
    --transition-default: all 0.2s ease;

    --font-family: 'NotoSans', sans-serif;
    --font-family-base: 'NotoSans', sans-serif;

    /* Размеры шрифта (mobile) */
    --font-size-s: 12px;
    --font-size-m: 14px;
    --font-size-l: 14px;
    --font-size-x: 16px;
    --font-size-xl: 18px;
    --font-size-xxl: 20px;

    /* Межстрочные интервалы (mobile) */
    --line-height-s: 16px;
    --line-height-m: 20px;
    --line-height-l: 20px;
    --line-height-x: 22px;
    --line-height-xl: 25px;
    --line-height-xxl: 27px;

    /* Насыщенность шрифта */
    --font-weight-semibold: 600;
    --font-weight-medium: 500;
    --font-weight-regular: 400;
    --font-weight-light: 300;

    /* Заголовки */
    --heading-letter-spacing: 0;

    --z-index-max: 9999999;
}

/* Tablet (md) */
@media (width >= 768px) {
    :root {
        --font-size-l: 16px;
        --font-size-x: 18px;
        --font-size-xl: 20px;
        --font-size-xxl: 22px;
        --line-height-l: 22px;
        --line-height-x: 25px;
        --line-height-xl: 27px;
        --line-height-xxl: 30px;
    }
}

/* Desktop (xl) */
@media (width >= 1024px) {
    :root {
        --font-size-xl: 22px;
        --font-size-xxl: 24px;
        --line-height-xl: 30px;
        --line-height-xxl: 32px;
    }
}