/* ============================================================
   ТУНЕЦ — Design System v2
   Общий файл для старого и нового интерфейса
   ============================================================ */

:root {
    /* === PRIMARY === */
    --color-primary:        #667eea;
    --color-primary-hover:  #5a6fd8;
    --color-primary-light:  #eef2ff;
    --color-primary-dark:   #3730a3;

    /* === SECONDARY === */
    --color-secondary:      #64748b;
    --color-secondary-hover:#475569;
    --color-secondary-light:#f1f5f9;
    --color-secondary-dark: #334155;

    /* === SEMANTIC === */
    --color-success:        #10b981;
    --color-success-hover:  #059669;
    --color-success-light:  #ecfdf5;
    --color-success-dark:   #065f46;

    --color-warning:        #f59e0b;
    --color-warning-hover:  #d97706;
    --color-warning-light:  #fff7ed;
    --color-warning-dark:   #92400e;

    --color-error:          #ef4444;
    --color-error-hover:    #dc2626;
    --color-error-light:    #fff1f2;
    --color-error-dark:     #7f1d1d;

    --color-info:           #3b82f6;
    --color-info-hover:     #2563eb;
    --color-info-light:     #eff6ff;
    --color-info-dark:      #1e3a8a;

    /* === NEUTRAL === */
    --color-bg:             #f8fafc;
    --color-bg-card:        #ffffff;
    --color-bg-sidebar:     #f1f5f9;
    --color-text:           #1a202c;
    --color-text-muted:     #718096;
    --color-text-disabled:  #a0aec0;
    --color-border:         #e2e8f0;
    --color-border-hover:   #cbd5e1;
    --color-border-focus:   #667eea;

    /* === SHADOWS === */
    --shadow-sm:  0 1px 2px rgba(0,0,0,.05);
    --shadow-md:  0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.10);
    --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.10);

    /* === SPACING === */
    --spacing-xs:   4px;
    --spacing-sm:   8px;
    --spacing-md:   16px;
    --spacing-lg:   24px;
    --spacing-xl:   32px;
    --spacing-2xl:  48px;
    --spacing-3xl:  64px;

    /* === TYPOGRAPHY === */
    --font-sans:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:    'Fira Code', 'Courier New', monospace;
    --text-xs:      12px;
    --text-sm:      14px;
    --text-base:    16px;
    --text-lg:      18px;
    --text-xl:      20px;
    --text-2xl:     24px;
    --text-3xl:     30px;
    --font-normal:  400;
    --font-medium:  500;
    --font-semibold:600;
    --font-bold:    700;
    --leading-tight:1.25;
    --leading-normal:1.5;

    /* === RADIUS === */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    12px;
    --radius-xl:    16px;
    --radius-full:  9999px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
    text-decoration: none;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}
.ds-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(102,126,234,.35);
}
.ds-btn:disabled, .ds-btn.disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* variants */
.ds-btn-primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.ds-btn-primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    box-shadow: var(--shadow-md);
    color: #fff;
    text-decoration: none;
}

.ds-btn-secondary {
    background: var(--color-secondary-light);
    color: var(--color-secondary-dark);
    border-color: var(--color-border);
}
.ds-btn-secondary:hover:not(:disabled) {
    background: #e2e8f0;
    color: var(--color-secondary-dark);
    text-decoration: none;
}

.ds-btn-outline {
    background: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.ds-btn-outline:hover:not(:disabled) {
    background: var(--color-primary-light);
    color: var(--color-primary);
    text-decoration: none;
}

.ds-btn-danger {
    background: var(--color-error);
    color: #fff;
    border-color: var(--color-error);
}
.ds-btn-danger:hover:not(:disabled) {
    background: var(--color-error-hover);
    border-color: var(--color-error-hover);
    box-shadow: var(--shadow-md);
    color: #fff;
    text-decoration: none;
}

.ds-btn-success {
    background: var(--color-success);
    color: #fff;
    border-color: var(--color-success);
}
.ds-btn-success:hover:not(:disabled) {
    background: var(--color-success-hover);
    color: #fff;
    text-decoration: none;
}

.ds-btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: transparent;
}
.ds-btn-ghost:hover:not(:disabled) {
    background: var(--color-secondary-light);
    color: var(--color-text);
    text-decoration: none;
}

/* sizes */
.ds-btn-sm { padding: 6px 12px; font-size: var(--text-xs); }
.ds-btn-lg { padding: 12px 24px; font-size: var(--text-base); }
.ds-btn-block { width: 100%; display: flex; }
.ds-btn-icon { padding: 8px; width: 36px; height: 36px; flex-shrink: 0; }

/* ============================================================
   ALERTS
   ============================================================ */
.ds-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    border: 1px solid;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    animation: dsSlideDown .25s ease-out;
}
.ds-alert-icon { flex-shrink: 0; font-size: 18px; line-height: 1; margin-top: 1px; }
.ds-alert-body { flex: 1; }
.ds-alert-title { font-weight: var(--font-semibold); margin-bottom: 2px; }
.ds-alert-msg   { color: inherit; opacity: .85; }
.ds-alert-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    opacity: .5;
    font-size: 18px;
    line-height: 1;
    padding: 0;
    transition: opacity .15s;
}
.ds-alert-close:hover { opacity: 1; }

.ds-alert-success { background: var(--color-success-light); border-color: var(--color-success); color: var(--color-success-dark); }
.ds-alert-error   { background: var(--color-error-light);   border-color: var(--color-error);   color: var(--color-error-dark);   }
.ds-alert-warning { background: var(--color-warning-light); border-color: var(--color-warning); color: var(--color-warning-dark); }
.ds-alert-info    { background: var(--color-info-light);    border-color: var(--color-info);    color: var(--color-info-dark);    }

@keyframes dsSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   CARDS
   ============================================================ */
.ds-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}
.ds-card:hover { box-shadow: var(--shadow-md); }

/* ============================================================
   BADGES
   ============================================================ */
.ds-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border-radius: var(--radius-full);
    border: 1px solid transparent;
}
.ds-badge-primary { background: var(--color-primary-light); color: var(--color-primary-dark); border-color: #c7d2fe; }
.ds-badge-success { background: var(--color-success-light); color: var(--color-success-dark); border-color: #a7f3d0; }
.ds-badge-warning { background: var(--color-warning-light); color: var(--color-warning-dark); border-color: #fde68a; }
.ds-badge-error   { background: var(--color-error-light);   color: var(--color-error-dark);   border-color: #fecaca; }
.ds-badge-neutral { background: var(--color-secondary-light); color: var(--color-secondary-dark); border-color: var(--color-border); }