/* ==========================================
   DOCA COLOR SYSTEM - CSS Variables
   На основе shadcn/ui (https://ui.shadcn.com/colors)
   
   Этот файл для использования в Django templates
   и других местах без SCSS.
   
   Использование:
   <link rel="stylesheet" href="/static/css/colors.css">
   <div style="color: var(--color-primary);">
   ========================================== */

:root {
    /* ----------------------------------------
     Primary (sky-600 как основной брендовый цвет)
     ---------------------------------------- */
    --color-primary: #00B0F0;
    --color-primary-hover: #00B0F0;
    --color-primary-active: #0369a1;
    --color-primary-light: #e0f2fe;
    --color-primary-lighter: #f0f9ff;
    --color-primary-dark: #0369a1;
    --color-primary-darker: #075985;

    /* ----------------------------------------
     Semantic colors
     ---------------------------------------- */
    --color-success: #22c55e;
    --color-success-hover: #16a34a;
    --color-success-light: #dcfce7;
    --color-success-lighter: #f0fdf4;
    --color-success-bg: #f0fdf4;
    --color-success-text: #15803d;

    --color-error: #ef4444;
    --color-error-hover: #dc2626;
    --color-error-light: #fee2e2;
    --color-error-lighter: #fef2f2;
    --color-error-bg: #fef2f2;
    --color-error-text: #b91c1c;

    --color-warning: #f59e0b;
    --color-warning-hover: #d97706;
    --color-warning-light: #fef3c7;
    --color-warning-lighter: #fffbeb;
    --color-warning-bg: #fffbeb;
    --color-warning-text: #b45309;

    --color-info: #0ea5e9;
    --color-info-hover: #0284c7;
    --color-info-light: #e0f2fe;
    --color-info-lighter: #f0f9ff;
    --color-info-bg: #f0f9ff;
    --color-info-text: #0369a1;

    /* ----------------------------------------
     Text colors
     ---------------------------------------- */
    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-tertiary: #64748b;
    --color-text-muted: #94a3b8;
    --color-text-disabled: #94a3b8;
    --color-text-inverse: #f8fafc;
    --color-text-link: #0284c7;
    --color-text-link-hover: #0369a1;

    /* ----------------------------------------
     Background colors
     ---------------------------------------- */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;
    --color-bg-tertiary: #f1f5f9;
    --color-bg-elevated: #ffffff;
    --color-bg-overlay: rgba(0, 0, 0, 0.6);
    --color-bg-hover: #f1f5f9;
    --color-bg-active: #e2e8f0;
    --color-bg-selected: #f0f9ff;

    /* ----------------------------------------
     Border colors
     ---------------------------------------- */
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-border-strong: #cbd5e1;
    --color-border-focus: #0ea5e9;
    --color-border-error: #ef4444;
    --color-border-success: #22c55e;

    /* ----------------------------------------
     Neutral scale (zinc)
     ---------------------------------------- */
    --color-zinc-50: #fafafa;
    --color-zinc-100: #f4f4f5;
    --color-zinc-200: #e4e4e7;
    --color-zinc-300: #d4d4d8;
    --color-zinc-400: #a1a1aa;
    --color-zinc-500: #71717a;
    --color-zinc-600: #52525b;
    --color-zinc-700: #3f3f46;
    --color-zinc-800: #27272a;
    --color-zinc-900: #18181b;
    --color-zinc-950: #09090b;

    /* ----------------------------------------
     Slate scale
     ---------------------------------------- */
    --color-slate-50: #f8fafc;
    --color-slate-100: #f1f5f9;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-slate-900: #0f172a;
    --color-slate-950: #020617;

    /* ----------------------------------------
     Legacy mapping (для обратной совместимости)
     НЕ ИСПОЛЬЗУЙТЕ в новом коде
     ---------------------------------------- */
    --color-primary-old: #0ea5e9;
    --text-black: #334155;
    --text-light-grey: #94a3b8;
    --text-grey: #64748b;
    --border-grey: #e2e8f0;
    --light-grey: #cbd5e1;
    --link-hover: #0369a1;
    --default-icon-color: #475569;
    --black-bg: rgba(0, 0, 0, 0.6);

    /* Comparator colors (legacy) */
    --comparator-edit: #fef6e5;
    --comparator-small-edit: #e0f2fa;
    --comparator-add: #e5fee6;
    --comparator-removed: #fee7e5;
    --comparator-no-edit: #e5fee6;
    --comparator-edit-line: #ffcd61;
    --comparator-small-edit-line: #b4ebff;
    --comparator-add-line: #2bff87;
    --comparator-removed-line: #ff6c6c;
    --comparator-no-edit-line: #2bff87;
    --comparator-selected-line: #f72525;

    /* Field colors (legacy) */
    --blue-field: #e0f5fd;
    --process-row-bg: #fafafb;
}

/* ==========================================
   UTILITY CLASSES для Django templates
   ========================================== */

/* Text colors */
.text-primary {
    color: var(--color-primary) !important;
}
.text-success {
    color: var(--color-success) !important;
}
.text-error {
    color: var(--color-error) !important;
}
.text-warning {
    color: var(--color-warning) !important;
}

/* Background colors */
.bg-primary {
    background-color: var(--color-primary) !important;
}
.bg-success {
    background-color: var(--color-success) !important;
}
.bg-error {
    background-color: var(--color-error) !important;
}
.bg-warning {
    background-color: var(--color-warning) !important;
}

/* Border colors */
.border-primary {
    border-color: var(--color-primary) !important;
}
.border-success {
    border-color: var(--color-success) !important;
}
.border-error {
    border-color: var(--color-error) !important;
}

/* SVG support - используй с class="text-primary" на родителе */
.svg-fill-current path,
.svg-fill-current circle,
.svg-fill-current rect {
    fill: currentColor !important;
}

.svg-stroke-current path,
.svg-stroke-current circle,
.svg-stroke-current line {
    stroke: currentColor !important;
}

/* SVG auto-color - применяет --color-primary к SVG с currentColor */
svg[fill="currentColor"],
svg:has([fill="currentColor"]) {
    color: var(--color-primary);
}

svg[stroke="currentColor"],
svg:has([stroke="currentColor"]) {
    color: var(--color-primary);
}