/* ============================================================
   CSORT Design System — единые токены и базовые компоненты.
   Подключается ПЕРВЫМ; страничные CSS переопределяют при нужде.
   Бренд: акцент #e01818. Светлая «продуктовая» тема, десктоп + мобайл.
   ============================================================ */
:root {
    /* Бренд / акценты */
    --ds-brand: #e01818;
    --ds-brand-600: #c41414;
    --ds-brand-700: #a51111;
    --ds-brand-tint: #fdecec;

    /* Текст */
    --ds-text: #1f2632;
    --ds-text-2: #5b6579;
    --ds-text-3: #8a93a3;

    /* Поверхности */
    --ds-bg: #f5f6f8;          /* фон страницы */
    --ds-surface: #ffffff;      /* карточки */
    --ds-surface-2: #fbfbfc;
    --ds-border: #e7eaef;
    --ds-border-strong: #d7dbe2;

    /* Радиусы / тени */
    --ds-radius: 10px;
    --ds-radius-sm: 8px;
    --ds-radius-lg: 16px;
    --ds-shadow-sm: 0 1px 2px rgba(31, 38, 50, .06);
    --ds-shadow: 0 6px 20px rgba(31, 38, 50, .08);
    --ds-shadow-lg: 0 18px 48px rgba(31, 38, 50, .14);

    /* Типографика / раскладка */
    --ds-font: "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --ds-container: 1140px;
}

/* Базовая нормализация (мягкая, чтобы не ломать существующие экраны —
   применяем точечно через классы .ds-*) */
.ds-scope, .ds-scope * { box-sizing: border-box; }
.ds-scope {
    margin: 0;
    font-family: var(--ds-font);
    color: var(--ds-text);
    background: var(--ds-surface);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.ds-scope a { color: inherit; text-decoration: none; }

.ds-container { width: 100%; max-width: var(--ds-container); margin: 0 auto; padding: 0 24px; }

/* Кнопки */
.ds-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1.5px solid transparent; border-radius: var(--ds-radius-sm);
    font-family: inherit; font-weight: 500; font-size: 15px; line-height: 1;
    padding: 12px 20px; cursor: pointer; transition: transform .12s ease, background .12s ease, border-color .12s ease;
    white-space: nowrap;
}
.ds-btn:hover { transform: translateY(-1px); }
.ds-btn--primary { background: var(--ds-brand); color: #fff; }
.ds-btn--primary:hover { background: var(--ds-brand-600); }
.ds-btn--ghost { background: transparent; color: var(--ds-text); border-color: var(--ds-border-strong); }
.ds-btn--ghost:hover { background: var(--ds-bg); }
.ds-btn--lg { padding: 15px 28px; font-size: 16px; }
.ds-btn--block { width: 100%; }

/* Карточка */
.ds-card {
    background: var(--ds-surface); border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm);
}

/* Пилюля/бейдж */
.ds-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ds-brand-tint); color: var(--ds-brand-700);
    font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px;
}

/* Заголовки секций */
.ds-eyebrow { color: var(--ds-brand); font-weight: 500; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.ds-h1 { font-size: 48px; line-height: 1.08; color: var(--ds-text); margin: 0; font-weight: 700; letter-spacing: -.02em; }
.ds-h2 { font-size: 32px; line-height: 1.15; color: var(--ds-text); margin: 0; font-weight: 700; letter-spacing: -.01em; }
.ds-lead { font-size: 19px; color: var(--ds-text-2); }

@media (max-width: 760px) {
    .ds-h1 { font-size: 34px; }
    .ds-h2 { font-size: 26px; }
    .ds-lead { font-size: 17px; }
    .ds-container { padding: 0 18px; }
}