/**
 * Dashboard Design Tokens
 * Единый источник правды для стилей ЛК клиента и юриста
 * 
 * Использование: var(--dashboard-*)
 * Темы: [data-theme="dark"] автоматически через Tailwind dark:
 */

:root {
    /* === ЦВЕТА ФОНА === */
    --dashboard-bg: #f8fafc;                    /* Основной фон страницы */
    --dashboard-bg-secondary: #f1f5f9;          /* Вторичный фон */
    --dashboard-card-bg: #ffffff;               /* Фон карточек */
    --dashboard-sidebar-bg: #0f172a;            /* Фон sidebar (тёмный) */
    --dashboard-sidebar-card-bg: #1e293b;       /* Фон карточки в sidebar */
    
    /* === ЦВЕТА ТЕКСТА === */
    --dashboard-text: #0f172a;                  /* Основной текст */
    --dashboard-text-secondary: #475569;        /* Вторичный текст */
    --dashboard-text-muted: #94a3b8;            /* Приглушённый текст */
    --dashboard-text-inverse: #ffffff;          /* Инверсный текст (на тёмном) */
    
    /* === АКЦЕНТНЫЕ ЦВЕТА === */
    --dashboard-accent: #0891b2;                /* Основной акцент (cyan-600) */
    --dashboard-accent-hover: #0e7490;          /* Акцент при hover */
    --dashboard-accent-light: #ecfeff;          /* Светлый акцент для фона */
    
    /* === СТАТУСНЫЕ ЦВЕТА === */
    --dashboard-success: #10b981;               /* Успех (emerald-500) */
    --dashboard-success-bg: #d1fae5;            /* Фон успеха */
    --dashboard-warning: #f59e0b;               /* Предупреждение (amber-500) */
    --dashboard-warning-bg: #fef3c7;            /* Фон предупреждения */
    --dashboard-danger: #ef4444;                /* Ошибка (red-500) */
    --dashboard-danger-bg: #fee2e2;             /* Фон ошибки */
    --dashboard-info: #3b82f6;                  /* Информация (blue-500) */
    --dashboard-info-bg: #dbeafe;               /* Фон информации */
    
    /* === ГРАНИЦЫ === */
    --dashboard-border: #e2e8f0;                /* Основная граница */
    --dashboard-border-light: #f1f5f9;          /* Светлая граница */
    --dashboard-border-dark: #cbd5e1;           /* Тёмная граница */
    
    /* === ТЕНИ === */
    --dashboard-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --dashboard-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --dashboard-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --dashboard-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    
    /* === РАДИУСЫ === */
    --dashboard-radius-sm: 0.375rem;            /* 6px */
    --dashboard-radius: 0.5rem;                 /* 8px */
    --dashboard-radius-md: 0.75rem;             /* 12px */
    --dashboard-radius-lg: 1rem;                /* 16px */
    --dashboard-radius-xl: 1.5rem;              /* 24px */
    --dashboard-radius-full: 9999px;            /* Круглый */
    
    /* === ОТСТУПЫ === */
    --dashboard-spacing-xs: 0.25rem;            /* 4px */
    --dashboard-spacing-sm: 0.5rem;             /* 8px */
    --dashboard-spacing-md: 1rem;               /* 16px */
    --dashboard-spacing-lg: 1.5rem;             /* 24px */
    --dashboard-spacing-xl: 2rem;               /* 32px */
    
    /* === ТИПОГРАФИКА === */
    --dashboard-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --dashboard-font-size-xs: 0.75rem;          /* 12px */
    --dashboard-font-size-sm: 0.875rem;         /* 14px */
    --dashboard-font-size-base: 1rem;           /* 16px */
    --dashboard-font-size-lg: 1.125rem;         /* 18px */
    --dashboard-font-size-xl: 1.25rem;          /* 20px */
    --dashboard-font-size-2xl: 1.5rem;          /* 24px */
    
    /* === ПЕРЕХОДЫ === */
    --dashboard-transition-fast: 150ms ease;
    --dashboard-transition: 200ms ease;
    --dashboard-transition-slow: 300ms ease;
    
    /* === KPI КАРТОЧКИ (градиенты) === */
    --dashboard-kpi-blue: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --dashboard-kpi-purple: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    --dashboard-kpi-amber: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --dashboard-kpi-green: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --dashboard-kpi-orange: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    --dashboard-kpi-cyan: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    
    /* === ФОРМА: ЧИПЫ/ТЕГИ (специализации) === */
    --form-chip-bg: #f1f5f9;                    /* slate-100 */
    --form-chip-text: #475569;                  /* slate-600 */
    --form-chip-border: transparent;
    --form-chip-hover-bg: #e2e8f0;              /* slate-200 */
    --form-chip-hover-border: #cbd5e1;          /* slate-300 */
    --form-chip-selected-bg: #0891b2;           /* cyan-600 */
    --form-chip-selected-text: #ffffff;
    --form-chip-selected-border: #0891b2;
    --form-chip-disabled-bg: #f8fafc;           /* slate-50 */
    --form-chip-disabled-text: #94a3b8;         /* slate-400 */
    
    /* === ФОРМА: СОСТОЯНИЯ === */
    --form-focus-ring: rgba(8, 145, 178, 0.3);  /* cyan-600 с прозрачностью */
    --form-error: #ef4444;                      /* red-500 */
    --form-error-bg: #fef2f2;                   /* red-50 */
    --form-success: #10b981;                    /* emerald-500 */
    --form-success-bg: #ecfdf5;                 /* emerald-50 */
    
    /* === АККОРДЕОН === */
    --accordion-header-bg: #ffffff;
    --accordion-header-hover-bg: #f8fafc;       /* slate-50 */
    --accordion-content-bg: #ffffff;
    --accordion-border: #e2e8f0;                /* slate-200 */
    --accordion-icon-color: #64748b;            /* slate-500 */
}

/* === DARK MODE === */
.dark {
    --dashboard-bg: #0f172a;                    /* slate-900 */
    --dashboard-bg-secondary: #1e293b;          /* slate-800 */
    --dashboard-card-bg: #1e293b;               /* slate-800 */
    --dashboard-sidebar-bg: #1e293b;            /* slate-800 - светлее для читаемости */
    --dashboard-sidebar-card-bg: #334155;       /* slate-700 */
    
    --dashboard-text: #f1f5f9;                  /* slate-100 */
    --dashboard-text-secondary: #cbd5e1;        /* slate-300 */
    --dashboard-text-muted: #64748b;            /* slate-500 */
    
    --dashboard-accent-light: #164e63;          /* cyan-900 */
    
    --dashboard-success-bg: #064e3b;            /* emerald-900 */
    --dashboard-warning-bg: #78350f;            /* amber-900 */
    --dashboard-danger-bg: #7f1d1d;             /* red-900 */
    --dashboard-info-bg: #1e3a8a;               /* blue-900 */
    
    --dashboard-border: #334155;                /* slate-700 */
    --dashboard-border-light: #1e293b;          /* slate-800 */
    --dashboard-border-dark: #475569;           /* slate-600 */
    
    --dashboard-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --dashboard-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
    --dashboard-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --dashboard-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
    
    /* === ФОРМА: ЧИПЫ/ТЕГИ (dark) === */
    --form-chip-bg: #334155;                    /* slate-700 */
    --form-chip-text: #e2e8f0;                  /* slate-200 */
    --form-chip-hover-bg: #475569;              /* slate-600 */
    --form-chip-hover-border: #64748b;          /* slate-500 */
    --form-chip-selected-bg: #06b6d4;           /* cyan-500 */
    --form-chip-selected-text: #0f172a;         /* slate-900 */
    --form-chip-selected-border: #06b6d4;
    --form-chip-disabled-bg: #1e293b;           /* slate-800 */
    --form-chip-disabled-text: #64748b;         /* slate-500 */
    
    /* === ФОРМА: СОСТОЯНИЯ (dark) === */
    --form-focus-ring: rgba(6, 182, 212, 0.4);  /* cyan-500 с прозрачностью */
    --form-error-bg: #450a0a;                   /* red-950 */
    --form-success-bg: #052e16;                 /* green-950 */
    
    /* === АККОРДЕОН (dark) === */
    --accordion-header-bg: #1e293b;             /* slate-800 */
    --accordion-header-hover-bg: #334155;       /* slate-700 */
    --accordion-content-bg: #1e293b;            /* slate-800 */
    --accordion-border: #334155;                /* slate-700 */
    --accordion-icon-color: #94a3b8;            /* slate-400 */
}