/* ===== OCC/WAY — Единая палитра Dark Premium ===== */
/* Подключается ПЕРВЫМ в base.html, все CSS файлы наследуют переменные */

:root {
    /* Основные акценты бренда */
    --brand-primary: #667eea;
    --brand-secondary: #a78bfa;
    --brand-gradient: linear-gradient(135deg, #667eea, #764ba2);
    --brand-gradient-hover: linear-gradient(135deg, #7b93ff, #8b5cf6);

    /* Семантические цвета */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #3b82f6;

    /* Фоны */
    --bg-primary: #0a0a0a;
    --bg-card: #141420;
    --bg-card-hover: #1a1a2e;
    --bg-input: #1a1a2e;
    --bg-modal: rgba(16,16,32,0.95);

    /* Границы */
    --border-subtle: rgba(102, 126, 234, 0.15);
    --border-hover: rgba(102, 126, 234, 0.3);

    /* Текст */
    --text-primary: #ffffff;
    --text-secondary: rgba(255,255,255,0.6);
    --text-muted: rgba(255,255,255,0.4);
    --text-accent: #a78bfa;

    /* Тени */
    --shadow-brand: 0 4px 12px rgba(102, 126, 234, 0.25);
    --shadow-brand-hover: 0 6px 20px rgba(102, 126, 234, 0.35);
    --shadow-brand-strong: 0 8px 32px rgba(102, 126, 234, 0.4);

    /* Радиусы */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

html.theme-light {
    --brand-primary: #5b6ee8;
    --brand-secondary: #8b6fd6;
    --brand-gradient: linear-gradient(135deg, #5b6ee8, #7c5bb8);
    --brand-gradient-hover: linear-gradient(135deg, #6b7ef5, #8b5cf6);
    --bg-primary: #f0f2f5;
    --bg-card: #ffffff;
    --bg-card-hover: #eef0f4;
    --bg-input: #ffffff;
    --bg-modal: rgba(255, 255, 255, 0.98);
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(102, 126, 234, 0.25);
    --text-primary: #1a1a1f;
    --text-secondary: rgba(26, 26, 31, 0.65);
    --text-muted: rgba(26, 26, 31, 0.45);
    --text-accent: #6b5bb5;
    --shadow-brand: 0 4px 14px rgba(91, 110, 232, 0.2);
    --shadow-brand-hover: 0 6px 20px rgba(91, 110, 232, 0.28);
    --shadow-brand-strong: 0 8px 28px rgba(91, 110, 232, 0.22);
    --color-bg-primary: #f3f4f8;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f8fafc;
    --color-bg-elevated: #ffffff;
    --color-bg-hover: #eef2f7;
    --color-text-primary: #111827;
    --color-text-secondary: #475569;
    --color-text-tertiary: #64748b;
    --color-text-disabled: #94a3b8;
    --color-border-subtle: #e2e8f0;
    --color-border-default: #cbd5e1;
    --color-border-strong: #94a3b8;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8fafc;
    --bg-hover: #eef2f7;
    --border-color: #e2e8f0;
    --border-hover: #cbd5e1;
}

[data-theme="light"] {
    --brand-primary: #5b6ee8;
    --brand-secondary: #8b6fd6;
    --brand-gradient: linear-gradient(135deg, #5b6ee8, #7c5bb8);
    --brand-gradient-hover: linear-gradient(135deg, #6b7ef5, #8b5cf6);
    --bg-primary: #f0f2f5;
    --bg-card: #ffffff;
    --bg-card-hover: #eef0f4;
    --bg-input: #ffffff;
    --bg-modal: rgba(255, 255, 255, 0.98);
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(102, 126, 234, 0.25);
    --text-primary: #1a1a1f;
    --text-secondary: rgba(26, 26, 31, 0.65);
    --text-muted: rgba(26, 26, 31, 0.45);
    --text-accent: #6b5bb5;
    --shadow-brand: 0 4px 14px rgba(91, 110, 232, 0.2);
    --shadow-brand-hover: 0 6px 20px rgba(91, 110, 232, 0.28);
    --shadow-brand-strong: 0 8px 28px rgba(91, 110, 232, 0.22);
    --color-bg-primary: #f3f4f8;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f8fafc;
    --color-bg-elevated: #ffffff;
    --color-bg-hover: #eef2f7;
    --color-text-primary: #111827;
    --color-text-secondary: #475569;
    --color-text-tertiary: #64748b;
    --color-text-disabled: #94a3b8;
    --color-border-subtle: #e2e8f0;
    --color-border-default: #cbd5e1;
    --color-border-strong: #94a3b8;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f8fafc;
    --bg-hover: #eef2f7;
    --border-color: #e2e8f0;
    --border-hover: #cbd5e1;
}

html.theme-light body,
[data-theme="light"] body {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

html.theme-light .modern-card,
html.theme-light .card,
html.theme-light .modal-content,
html.theme-light .dropdown-menu,
html.theme-light .navbar-modern,
html.theme-light .way-card,
html.theme-light .wa-card,
[data-theme="light"] .modern-card,
[data-theme="light"] .card,
[data-theme="light"] .modal-content,
[data-theme="light"] .dropdown-menu,
[data-theme="light"] .navbar-modern,
[data-theme="light"] .way-card,
[data-theme="light"] .wa-card {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-subtle) !important;
}

html.theme-light .table,
html.theme-light .table td,
html.theme-light .table th,
html.theme-light .form-control,
html.theme-light .form-select,
html.theme-light input,
html.theme-light textarea,
html.theme-light select,
[data-theme="light"] .table,
[data-theme="light"] .table td,
[data-theme="light"] .table th,
[data-theme="light"] .form-control,
[data-theme="light"] .form-select,
[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

html.theme-light .text-muted,
[data-theme="light"] .text-muted {
    color: var(--text-muted) !important;
}