/**
 * variables.css — токены дизайна. Меняешь цвет/отступ/радиус один раз
 * здесь — влияет на весь проект. Остальные CSS-файлы ничего не
 * хардкодят напрямую, только ссылаются на эти переменные.
 */
:root {
    /* Цвета поверхностей */
    --color-bg:          #f3f5f9;
    --color-surface:     #ffffff;
    --color-surface-2:   #f7f9fc;
    --color-border:      #e1e6ee;
    --color-border-strong: #c9d2e0;

    /* Текст */
    --color-text:        #263041;
    --color-text-muted:  #8a94a6;
    --color-text-faint:  #b7bfcc;

    /* Акценты */
    --color-primary:      #2980b9;
    --color-primary-dark: #1a5276;
    --color-primary-bg:   #eaf2fb;
    --color-success:      #27ae60;
    --color-success-bg:   #eafaf1;
    --color-warning:      #b9770e;
    --color-warning-bg:   #fef5e7;
    --color-danger:       #c0392b;
    --color-danger-bg:    #fdecea;

    /* Форма/радиусы/тени */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 6px 20px rgba(15,23,42,.06);

    /* Отступы (шкала 4px) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Типографика */
    --font-sans: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

    /* Ширина рабочей области — резиновая с потолком */
    --container-max: 1600px;
}