/* components.css — базовые компоненты дизайн-системы (значения только из tokens.css).
   Витрина: /secure-admin/design-system/#components
   Новые экраны собираются из этих классов; старые переводятся на них постепенно. */

/* ---- Поля ввода ---- */
.ds-label {
    display: block;
    margin-bottom: var(--ds-space-1);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-weight-medium);
    color: var(--ds-ink-soft);
}

.ds-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    background: var(--ds-white);
    color: var(--ds-ink);
    font-family: var(--ds-font);
    font-size: var(--ds-text-lg);
    line-height: 1.4;
    transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
}

.ds-input::placeholder { color: var(--ds-muted); }
.ds-input:focus { outline: none; border-color: var(--ds-ink); box-shadow: var(--ds-focus); }
.ds-input:disabled { background: var(--ds-surface); color: var(--ds-muted); cursor: not-allowed; }
.ds-input.is-invalid { border-color: var(--ds-red); }
textarea.ds-input { min-height: 96px; resize: vertical; }

.ds-hint { margin-top: var(--ds-space-1); font-size: var(--ds-text-sm); color: var(--ds-muted); }
.ds-hint.is-error { color: var(--ds-red); }

/* ---- Статусы (бейджи) ---- */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);
    padding: 3px 10px;
    border-radius: var(--ds-radius-pill);
    background: var(--ds-surface);
    color: var(--ds-ink-soft);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-weight-medium);
    line-height: 1.5;
    white-space: nowrap;
}

.ds-badge--green { background: var(--ds-green-bg); color: var(--ds-green); }
.ds-badge--yellow { background: var(--ds-yellow-bg); color: var(--ds-ink); }
.ds-badge--red { background: var(--ds-red-bg); color: var(--ds-red); }
.ds-badge--dark { background: var(--ds-ink); color: var(--ds-white); }

/* ---- Уведомления ---- */
.ds-alert {
    padding: var(--ds-space-3) var(--ds-space-4);
    border-radius: var(--ds-radius);
    border: 1px solid var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-ink);
    font-size: var(--ds-text-base);
    line-height: 1.5;
}

.ds-alert--success { background: var(--ds-green-bg); border-color: var(--ds-green-bg); color: var(--ds-green); }
.ds-alert--warning { background: var(--ds-yellow-bg); border-color: var(--ds-yellow-bg); color: var(--ds-ink); }
.ds-alert--error { background: var(--ds-red-bg); border-color: var(--ds-red-bg); color: var(--ds-red); }

/* ---- Карточка ---- */
.ds-card {
    background: var(--ds-white);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-4);
}

.ds-card--raised { border-color: transparent; box-shadow: var(--ds-shadow); }

/* ---- Заголовки и текст ---- */
.ds-title { font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-semibold); color: var(--ds-ink); line-height: 1.25; }
.ds-subtitle { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-semibold); color: var(--ds-ink); line-height: 1.3; }
.ds-text { font-size: var(--ds-text-base); color: var(--ds-ink); line-height: 1.55; }
.ds-caption { font-size: var(--ds-text-sm); color: var(--ds-muted); }