/*
 * Цветовая система сайта — та же, что в приложениях SF (клиент, распознавание, менеджер).
 * Значения взяты из style.css клиента, чтобы сайт и продукт выглядели одним семейством.
 */

:root {
    /* фон и поверхности */
    --sf-bg: #17111b;
    --sf-bg-2: #221823;
    --sf-bg-grad-a: #2a1822;
    --sf-bg-grad-b: #140e16;
    --sf-surface: rgba(255, 255, 255, 0.075);
    --sf-surface-solid: #281c2a;
    --sf-surface-hi: rgba(255, 255, 255, 0.11);

    /* границы и разделители */
    --sf-border: rgba(255, 255, 255, 0.14);
    --sf-border-hi: rgba(255, 71, 92, 0.6);

    /* текст */
    --sf-text: #fdf3f4;
    --sf-text-dim: #c7a9b0;
    --sf-text-faint: #97808a;

    /* акцент */
    --sf-primary: #ff4d5e;
    --sf-primary-2: #f0274f;
    --sf-glow: 0 0 18px rgba(255, 77, 94, 0.6);
    --sf-glow-soft: 0 0 12px rgba(255, 77, 94, 0.38);

    /* состояния */
    --sf-ok: #22c55e;
    --sf-warn: #f59e0b;
    --sf-danger: #ef4444;

    /* геометрия */
    --sf-radius: 14px;
    --sf-radius-sm: 10px;
    --sf-radius-lg: 22px;
    --sf-blur: 14px;

    /* ритм: шаг 4px, чтобы блоки выстраивались по одной сетке */
    --sf-space-1: 4px;
    --sf-space-2: 8px;
    --sf-space-3: 12px;
    --sf-space-4: 16px;
    --sf-space-5: 24px;
    --sf-space-6: 32px;
    --sf-space-7: 48px;
    --sf-space-8: 64px;
    --sf-space-9: 96px;

    /* типографика */
    --sf-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sf-h1: clamp(30px, 3.6vw, 50px);
    --sf-h2: clamp(26px, 3.2vw, 38px);
    --sf-h3: clamp(19px, 2vw, 23px);
    --sf-lead: clamp(16px, 1.5vw, 19px);
    --sf-body: 16px;
    --sf-small: 14px;

    /* ширина контента */
    --sf-container: 1436px; /* + 54px по бокам = 1544px, как шапка */
    --sf-container-narrow: 880px;

    /* тени */
    --sf-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    --sf-shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.35);

    /* плавность */
    --sf-ease: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
    :root {
        --sf-ease: 0.001s linear;
    }
}

/*
 * Astra красит заголовки, текст и фоны через свои переменные.
 * Переопределяем их на нашу палитру — иначе пришлось бы бороться со специфичностью
 * в каждом правиле по отдельности.
 */
:root {
    --ast-global-color-0: #ff4d5e;   /* акцент */
    --ast-global-color-1: #f0274f;   /* акцент, наведение */
    --ast-global-color-2: #fdf3f4;   /* заголовки */
    --ast-global-color-3: #c7a9b0;   /* основной текст */
    --ast-global-color-4: #17111b;   /* фон страницы */
    --ast-global-color-5: #221823;   /* фон блоков */
    --ast-global-color-6: #281c2a;   /* дополнительный фон */
    --ast-global-color-7: rgba(255, 255, 255, 0.14); /* границы */
    --ast-global-color-8: #97808a;   /* приглушённый текст */

    --ast-code-block-background: #1d1420;
    --ast-comment-inputs-background: rgba(255, 255, 255, 0.05);
}