/**
 * Design Tokens для NeuroParse
 * Единые значения для цветов, spacing, border-radius, типографики, теней
 */

:root {
    /* ===== ЦВЕТА ===== */
    
    /* Primary */
    --color-primary: #475569;
    --color-primary-dark: #334155;
    --color-primary-gradient: #475569;
    
    /* Success */
    --color-success-start: #11998e;
    --color-success-end: #38ef7d;
    --color-success-gradient: #10b981;
    
    /* Info */
    --color-info-start: #3494E6;
    --color-info-end: #EC6EAD;
    --color-info-gradient: #0ea5e9;
    
    /* Warning */
    --color-warning-start: #f093fb;
    --color-warning-end: #f5576c;
    --color-warning-gradient: #f59e0b;
    
    /* Danger (Bootstrap default) */
    --color-danger: #dc3545;
    
    /* Текст */
    --color-text-primary: #333;
    --color-text-secondary: #666;
    --color-text-tertiary: #999;
    --color-text-white: #ffffff;
    
    /* Фон */
    --color-bg-white: #ffffff;
    --color-bg-light: #f8f9fa;
    --color-bg-lighter: #f0f0f0;
    
    /* ===== BORDER-RADIUS ===== */
    --border-radius-sm: 6px;
    --border-radius-md: 8px;
    --border-radius-lg: 10px;
    --border-radius-circle: 50%;
    
    /* ===== SPACING ===== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-xxl: 24px;
    --spacing-xxxl: 32px;
    --spacing-huge: 48px;
    
    /* ===== ТИПОГРАФИКА ===== */
    /* Размеры */
    --font-size-h1: 2rem;
    --font-size-h2: 1.75rem;
    --font-size-h3: 1.5rem;
    --font-size-h4: 1.25rem;
    --font-size-h5: 1.1rem;
    --font-size-body: 1rem;
    --font-size-small: 0.875rem;
    --font-size-tiny: 0.75rem;
    
    /* Font-weight */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line-height */
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    
    /* ===== ТЕНИ ===== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/* ===== БАЗОВЫЕ UI КОМПОНЕНТЫ ===== */

/* Унифицированная кнопка Primary */
.ui-btn-primary,
.btn.ui-btn-primary {
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md) var(--spacing-xxl);
    font-weight: var(--font-weight-semibold);
    transition: all 0.3s ease;
}

.ui-btn-primary:hover:not(:disabled),
.btn.ui-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.ui-btn-primary:disabled,
.btn.ui-btn-primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Унифицированная карточка */
.ui-card {
    background: var(--color-bg-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xxl);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
}

.ui-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* Унифицированный Empty State */
.ui-empty-state {
    text-align: center;
    padding: 60px var(--spacing-xl);
    background: var(--color-bg-white);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

.ui-empty-state-icon {
    font-size: 5rem;
    color: var(--color-primary);
    opacity: 0.3;
    margin-bottom: var(--spacing-xxl);
}

.ui-empty-state-title {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
}

.ui-empty-state-text {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xxl);
    line-height: var(--line-height-relaxed);
}

/* Унифицированный Alert (расширение Bootstrap) */
.ui-alert {
    display: flex;
    align-items: center;
}

.ui-alert-icon {
    margin-right: var(--spacing-md);
    flex-shrink: 0;
}

.ui-alert-content {
    flex-grow: 1;
}

/* Унифицированный Helper/Error текст для форм */
.ui-form-help {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
}

.ui-form-error {
    font-size: var(--font-size-small);
    color: var(--color-danger);
    margin-top: var(--spacing-xs);
    display: block;
}

/* Унифицированный Stats Card (структура, градиенты остаются разные) */
.ui-stats-card {
    color: var(--color-text-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xxl);
    margin-bottom: var(--spacing-xxl);
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s ease;
}

.ui-stats-card:hover {
    transform: translateY(-4px);
}

.ui-stats-number {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
}

.ui-stats-label {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Унифицированный Form Card */
.ui-form-card {
    background: var(--color-bg-white);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xxxl);
    box-shadow: var(--shadow-md);
    max-width: 700px;
    margin: 0 auto;
}

/* Унифицированный Form Section */
.ui-form-section {
    background: var(--color-bg-light);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
}

.ui-form-section-title {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-primary);
}

/* Утилиты для типографики */
.ui-h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
}

.ui-h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
}

.ui-h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
}

.ui-h4 {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
}

.ui-h5 {
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-semibold);
}

/* Утилиты для spacing */
.ui-mb-sm { margin-bottom: var(--spacing-sm); }
.ui-mb-md { margin-bottom: var(--spacing-md); }
.ui-mb-lg { margin-bottom: var(--spacing-lg); }
.ui-mb-xl { margin-bottom: var(--spacing-xl); }
.ui-mb-xxl { margin-bottom: var(--spacing-xxl); }

/* Responsive adjustments */
@media (max-width: 768px) {
    .ui-form-card {
        padding: var(--spacing-xxl);
    }
    
    .ui-stats-card {
        padding: var(--spacing-xl);
    }
    
    .ui-empty-state {
        padding: var(--spacing-xxxl) var(--spacing-xl);
    }
}