/*
 * Общие переменные дизайна (сайт, кабинеты, админка).
 * Новые стили пишем только через эти переменные, без цветов и размеров «вручную».
 * Устаревшие имена внизу оставлены как псевдонимы, пока весь CSS не переведён.
 */
:root {

    /* Цвета: primary — шапка и карточки, accent — остальные действия, ссылки, табы */
    --color-primary: #0b2f55;
    --color-primary-hover: #071f39;
    --color-accent: #007fff;
    --color-accent-hover: #0066cc;
    --color-accent-soft: #e6f2ff;
    --color-focus-ring: rgba(0, 127, 255, 0.16);

    --color-text: #172332;
    --color-text-secondary: #697586;
    --color-text-placeholder: #8a9bb0;
    --color-danger: #d93a3a;
    --color-danger-soft: #fff0f0;
    --color-success: #18713b;
    --color-success-soft: #e9f8ef;

    --color-background: #ffffff;
    --color-surface: #f5f8fb;
    --color-border: #e4eaf0;
    --color-border-strong: #cddbea;

    /* Шрифт: Arial без внешних файлов */
    --font-family: Arial, Helvetica, sans-serif;

    /* Шкала размеров шрифта */
    --font-size-xs: 12px;     /* счётчики, мелкие подписи */
    --font-size-sm: 14px;     /* подписи полей, вторичный текст */
    --font-size-md: 16px;     /* основной текст, поля ввода */
    --font-size-lg: 20px;     /* заголовок карточки */
    --font-size-xl: 28px;     /* заголовок раздела */
    --font-size-2xl: 40px;
    --font-size-page: clamp(40px, 4.4vw, 60px);     /* заголовок страницы (h1 первого экрана) */
    --font-size-section: clamp(28px, 2.5vw, 36px);  /* заголовок раздела (h2) */
    --font-size-title: clamp(28px, 3vw, 40px);      /* h1 страницы без первого экрана (услуга, форма) */
    --line-height-tight: 1.25;
    --line-height-base: 1.5;

    /* Отступы: шаг 4 px */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --section-gap: 48px;      /* между разделами страницы */
    --section-padding: 40px;  /* отступ раздела сверху и снизу, на телефоне 32px */

    /* Скругления: 8 / 12 / 16 */
    --radius-sm: 8px;         /* кнопки, поля, бейджи */
    --radius-md: 12px;        /* карточки */
    --radius-lg: 16px;        /* крупные блоки, баннеры */
    --radius-full: 999px;

    /* Элементы управления: два размера на весь сайт */
    --control-height: 48px;
    --control-height-sm: 40px;
    --control-padding-x: 16px;
    --step-size: 40px;        /* кружок с номером шага */

    --container-width: 1400px;

    --gradient-primary: linear-gradient(110deg, #0b2f55 0%, #0a4f8f 100%);

    --shadow-small: 0 6px 20px rgba(20, 50, 80, 0.06);
    --shadow-medium: 0 20px 60px rgba(20, 50, 80, 0.10);
    /* Многослойные мягкие тени карточек: в покое почти незаметны, при наведении — глубина */
    --shadow-card: 0 1px 2px rgba(11, 47, 85, 0.04), 0 4px 16px rgba(11, 47, 85, 0.04);
    --shadow-card-hover: 0 2px 4px rgba(11, 47, 85, 0.04), 0 20px 44px rgba(11, 47, 85, 0.12);

    --transition: 180ms ease;

    /* Псевдонимы старых имён — удалить после перевода CSS */
    --color-primary-dark: var(--color-primary-hover);
    --color-muted: var(--color-text-secondary);
    --radius-small: var(--radius-sm);
    --radius-medium: var(--radius-lg);
    --radius-large: 28px;
}