/* ============================================================
   FixCRM — Design Tokens & CSS Custom Properties
   Единый источник истины для цветов, типографики, отступов
   ============================================================ */

:root {
  /* --- Primary Colors --- */
  --color-primary:        #2563eb;
  --color-primary-dark:   #1d4ed8;
  --color-primary-light:  #eff6ff;
  --color-primary-muted:  #dbeafe;

  /* --- Semantic Colors --- */
  --color-success:        #10b981;
  --color-success-light:  #d1fae5;
  --color-warning:        #f59e0b;
  --color-warning-light:  #fef3c7;
  --color-danger:         #ef4444;
  --color-danger-light:   #fee2e2;
  --color-info:           #3b82f6;
  --color-info-light:     #dbeafe;
  --color-purple:         #8b5cf6;
  --color-purple-light:   #ede9fe;

  /* --- Neutral Palette --- */
  --color-gray-900: #0f172a;
  --color-gray-800: #1e293b;
  --color-gray-700: #334155;
  --color-gray-600: #475569;
  --color-gray-500: #64748b;
  --color-gray-400: #94a3b8;
  --color-gray-300: #cbd5e1;
  --color-gray-200: #e2e8f0;
  --color-gray-100: #f1f5f9;
  --color-gray-50:  #f8fafc;
  --color-white:    #ffffff;

  /* --- Status Colors (Order Statuses) --- */
  --status-new-bg:       #eff6ff;
  --status-new-text:     #1d4ed8;
  --status-diag-bg:      #fef3c7;
  --status-diag-text:    #92400e;
  --status-work-bg:      #fed7aa;
  --status-work-text:    #9a3412;
  --status-waiting-bg:   #fce7f3;
  --status-waiting-text: #9d174d;
  --status-ready-bg:     #d1fae5;
  --status-ready-text:   #065f46;
  --status-done-bg:        #e0e7ff;
  --status-done-text:      #3730a3;
  --status-warranty-bg:    #ccfbf1;
  --status-warranty-text:  #0f766e;
  --status-cancel-bg:      #fee2e2;
  --status-cancel-text:    #991b1b;

  /* --- Layout --- */
  --sidebar-width:       240px;
  --sidebar-collapsed:   64px;
  --header-height:       60px;
  --content-max-width:   none;

  /* --- Spacing Scale --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* --- Border Radius --- */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.09), 0 4px 8px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.5);
  --shadow-xl: 0 24px 40px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.4);
  /* Focus ring */
  --shadow-focus: 0 0 0 3px rgba(37,99,235,0.18);

  /* --- Typography --- */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  22px;
  --text-3xl:  32px;

  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold:800;

  /* --- Transitions --- */
  --transition-fast:   100ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Z-index Scale --- */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-tooltip:   600;

  /* --- Sidebar (светлая тема — под тон страницы) --- */
  --sidebar-bg:             #ffffff;
  --sidebar-text:           var(--color-gray-600);
  --sidebar-text-active:    var(--color-gray-900);
  --sidebar-active-bg:      var(--color-primary-light);
  --sidebar-active-border:  var(--color-primary);
  --sidebar-hover-bg:       #f0f2f5;
  --sidebar-border:         var(--border-color);

  /* --- Page Surfaces --- */
  --page-bg:      #f4f6f9;
  --card-bg:      #ffffff;
  --card-bg-raised: #ffffff;
  --border-color: #e4e8ef;

  /* --- Semantic Text --- */
  --text-primary:   var(--color-gray-900);
  --text-secondary: var(--color-gray-700);
  --text-muted:     var(--color-gray-500);
  --text-faint:     var(--color-gray-400);

  /* --- Input focus ring --- */
  --input-focus-ring: 0 0 0 3px rgba(37,99,235,0.15);
}

/* Dark Mode */
[data-theme="dark"] {
  /* Layout surfaces — 3 уровня глубины */
  --page-bg:        #0d1117;
  --card-bg:        #161b22;
  --card-bg-raised: #1c2330;
  --border-color:   #2a3444;

  /* Sidebar — тёмная */
  --sidebar-bg:             #090d13;
  --sidebar-text:           rgba(255,255,255,0.55);
  --sidebar-text-active:    #ffffff;
  --sidebar-active-bg:      rgba(255,255,255,0.07);
  --sidebar-active-border:  var(--color-primary);
  --sidebar-hover-bg:       rgba(255,255,255,0.04);
  --sidebar-border:         #1a2230;

  /* Shadows — stronger in dark mode */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.55), 0 4px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.03);
  --shadow-xl: 0 24px 40px rgba(0,0,0,0.6), 0 8px 16px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.03);
  --shadow-focus: 0 0 0 3px rgba(37,99,235,0.3);

  /* Semantic text */
  --text-primary:   rgba(255,255,255,0.95);
  --text-secondary: rgba(255,255,255,0.70);
  --text-muted:     rgba(255,255,255,0.45);
  --text-faint:     rgba(255,255,255,0.28);

  /* Input focus ring */
  --input-focus-ring: 0 0 0 3px rgba(37,99,235,0.28);

  /* Gray scale — text grays lighten, bg grays darken */
  --color-gray-900: #f1f5f9;
  --color-gray-800: #e2e8f0;
  --color-gray-700: #cbd5e1;
  --color-gray-600: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-400: #4e6280;
  --color-gray-300: #334155;
  --color-gray-200: #293548;
  --color-gray-100: #1e2d40;
  --color-gray-50:  #172133;

  /* Semantic light backgrounds → dark tinted */
  --color-primary-light:  rgba(37,99,235,0.15);
  --color-primary-muted:  rgba(37,99,235,0.35);
  --color-success-light:  rgba(16,185,129,0.15);
  --color-warning-light:  rgba(245,158,11,0.15);
  --color-danger-light:   rgba(239,68,68,0.15);
  --color-purple-light:   rgba(139,92,246,0.15);
  --color-info-light:     rgba(59,130,246,0.15);

  /* Status badge backgrounds → dark tinted */
  --status-new-bg:       rgba(37,99,235,0.18);
  --status-new-text:     #93c5fd;
  --status-diag-bg:      rgba(245,158,11,0.18);
  --status-diag-text:    #fcd34d;
  --status-work-bg:      rgba(234,88,12,0.18);
  --status-work-text:    #fdba74;
  --status-waiting-bg:   rgba(157,23,77,0.18);
  --status-waiting-text: #f9a8d4;
  --status-ready-bg:     rgba(16,185,129,0.18);
  --status-ready-text:   #6ee7b7;
  --status-done-bg:        rgba(55,48,163,0.18);
  --status-done-text:      #a5b4fc;
  --status-warranty-bg:    rgba(15,118,110,0.18);
  --status-warranty-text:  #5eead4;
  --status-cancel-bg:      rgba(153,27,27,0.18);
  --status-cancel-text:    #fca5a5;
}