/* ============================================================================
   MINICRM DESIGN TOKENS — единая дизайн-система
   ----------------------------------------------------------------------------
   Подключать ПЕРЕД style.css на всех страницах:
     <link rel="stylesheet" href="/tokens.css?v={{APP_VERSION}}-{{CACHE_BUST}}">
     <link rel="stylesheet" href="/style.css?v={{APP_VERSION}}-{{CACHE_BUST}}">

   Каноническая палитра — Tailwind-шкалы. Legacy-цвета (Flat UI / Bootstrap)
   сведены к этим токенам:

     #3498db / #2980b9  -> primary-500 / primary-600
     #667eea            -> primary-500      #764ba2 -> violet-600
     #2c3e50 / #333     -> gray-900 / gray-800
     #e74c3c / #c0392b  -> danger-500 / danger-600
     #27ae60 / #2ecc71  -> success-500
     #f39c12 / #ffc107  -> warning-500 / warning-400
     #6c757d / #495057  -> gray-500 / gray-600
     #e9ecef / #dee2e6  -> gray-200 / gray-300
     #f8f9fa / #f5f5f5  -> gray-50 / gray-100
   ============================================================================ */

:root {
    /* ---------- Шрифты ---------- */
    --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-mono: 'Consolas', 'Courier New', monospace;

    /* ---------- Primary (синий) ---------- */
    --primary-50:  #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;

    /* ---------- Violet (акцент) ---------- */
    --violet-50:  #faf5ff;
    --violet-100: #ede9fe;
    --violet-200: #ddd6fe;
    --violet-300: #c4b5fd;
    --violet-400: #a78bfa;
    --violet-500: #8b5cf6;
    --violet-600: #7c3aed;
    --violet-700: #6d28d9;
    --violet-800: #5b21b6;

    /* ---------- Indigo ---------- */
    --indigo-50:  #eef2ff;
    --indigo-200: #c7d2fe;
    --indigo-500: #6366f1;
    --indigo-600: #4f46e5;

    /* ---------- Success (зелёный) ---------- */
    --success-50:  #ecfdf5;
    --success-100: #d1fae5;
    --success-200: #a7f3d0;
    --success-300: #6ee7b7;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;
    --success-800: #065f46;

    /* ---------- Danger (красный) ---------- */
    --danger-50:  #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-300: #fca5a5;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --danger-800: #991b1b;

    /* ---------- Warning (янтарный) ---------- */
    --warning-50:  #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-300: #fcd34d;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;
    --warning-800: #92400e;

    /* ---------- Orange ---------- */
    --orange-100: #ffedd5;
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --orange-700: #c2410c;

    /* ---------- Teal ---------- */
    --teal-50:  #f0fdfa;
    --teal-100: #ccfbf1;
    --teal-200: #99f6e4;
    --teal-500: #14b8a6;
    --teal-600: #0d9488;
    --teal-700: #0f766e;
    --teal-800: #115e59;

    /* ---------- Info (sky/cyan) ---------- */
    --info-50:  #f0f9ff;
    --info-200: #bae6fd;
    --info-500: #0ea5e9;
    --info-600: #0284c7;
    --info-700: #0369a1;

    /* ---------- Pink ---------- */
    --pink-100: #fce7f3;
    --pink-400: #f472b6;
    --pink-700: #be185d;
    --pink-800: #9d174d;

    /* ---------- Нейтральная шкала ---------- */
    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* ---------- Семантические алиасы ---------- */
    --color-text:           var(--gray-900);
    --color-text-secondary: var(--gray-500);
    --color-text-tertiary:  var(--gray-400);
    --color-border:         var(--gray-200);
    --color-border-strong:  var(--gray-300);
    --color-surface:        #ffffff;
    --color-surface-muted:  var(--gray-50);
    --color-surface-glass:  rgba(255, 255, 255, 0.95);
    --color-bg:             var(--gray-100);
    --color-primary:        var(--primary-500);
    --color-primary-hover:  var(--primary-600);
    --color-primary-soft:   var(--primary-100);
    --color-success:        var(--success-500);
    --color-danger:         var(--danger-500);
    --color-warning:        var(--warning-500);
    --color-info:           var(--info-500);
    --color-focus:          var(--primary-500);
    --color-overlay:        rgba(0, 0, 0, 0.5);
    --black:                #000000;

    /* ---------- Радиусы ---------- */
    --radius-xs:    4px;
    --radius-sm:    6px;
    --radius-md:    8px;
    --radius-lg:    10px;
    --radius-xl:    12px;
    --radius-2xl:   16px;
    --radius-round: 20px;
    --radius-full:  999px;
    --radius-pill:  50%;

    /* ---------- Тени ---------- */
    --shadow-xs:       0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md:       0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg:       0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-xl:       0 20px 60px rgba(0, 0, 0, 0.2);
    --shadow-primary:  0 4px 15px rgba(59, 130, 246, 0.3);
    --shadow-primary-lg: 0 6px 20px rgba(59, 130, 246, 0.4);
    --shadow-danger:   0 4px 15px rgba(239, 68, 68, 0.3);
    --shadow-success:  0 4px 15px rgba(16, 185, 129, 0.3);
    --shadow-warning:  0 4px 15px rgba(245, 158, 11, 0.3);

    /* ---------- Переходы ---------- */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;

    /* ---------- Z-index ---------- */
    --z-modal:    2000;
    --z-toast:    3000;

    /* ---------- Отступы (спейсинг) ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
}

/* ============================================================================
   УТИЛИТЫ (замена inline style="..." в разметке)
   ============================================================================ */

/* ---------- Flexbox ---------- */
.d-flex        { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-none        { display: none; }
.d-block       { display: block; }
.d-grid        { display: grid; }
.flex-column   { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-nowrap   { flex-wrap: nowrap; }
.flex-1        { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow-1   { flex-grow: 1; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.align-center  { align-items: center; }
.align-start   { align-items: flex-start; }
.align-end     { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-start   { justify-content: flex-start; }
.self-end      { align-self: flex-end; }

/* ---------- Отступы: margin ---------- */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); }
.ml-1 { margin-left: var(--space-1); } .ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); } .ml-4 { margin-left: var(--space-4); }
.mr-1 { margin-right: var(--space-1); } .mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); } .mr-4 { margin-right: var(--space-4); }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }

/* ---------- Отступы: padding ---------- */
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); } .p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

/* ---------- Зазоры (gap) ---------- */
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); } .gap-6 { gap: var(--space-6); }
.gap-10 { gap: 10px; } .gap-14 { gap: 14px; }

/* ---------- Текст ---------- */
.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }
.text-muted     { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-primary   { color: var(--color-primary); }
.text-success   { color: var(--color-success); }
.text-danger    { color: var(--color-danger); }
.text-warning   { color: var(--color-warning); }
.text-info      { color: var(--color-info); }
.text-sm        { font-size: 13px; }
.text-xs        { font-size: 12px; }
.text-lg        { font-size: 18px; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.text-nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Размеры и позиционирование ---------- */
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.cursor-pointer { cursor: pointer; }
.overflow-hidden { overflow: hidden; }