/* ============================================================================
   MINICRM design tokens — ported for the JSON Metrics Collector admin panel.
   Light "glass" theme, primary blue with gradient accents.
   Load BEFORE app.css.
   ============================================================================ */
:root {
  /* Fonts */
  --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: 'Consolas', 'Cascadia Code', 'Courier New', monospace;

  /* Primary (blue) */
  --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 (accent) */
  --violet-50:#faf5ff; --violet-100:#ede9fe; --violet-200:#ddd6fe;
  --violet-400:#a78bfa; --violet-500:#8b5cf6; --violet-600:#7c3aed; --violet-700:#6d28d9;

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

  /* Success (green) */
  --success-50:#ecfdf5; --success-100:#d1fae5; --success-200:#a7f3d0;
  --success-500:#10b981; --success-600:#059669; --success-700:#047857;

  /* Danger (red) */
  --danger-50:#fef2f2; --danger-100:#fee2e2; --danger-200:#fecaca;
  --danger-300:#fca5a5; --danger-500:#ef4444; --danger-600:#dc2626; --danger-700:#b91c1c;

  /* Warning (amber) + orange */
  --warning-50:#fffbeb; --warning-100:#fef3c7; --warning-200:#fde68a;
  --warning-400:#fbbf24; --warning-500:#f59e0b; --warning-600:#d97706; --warning-700:#b45309;
  --orange-100:#ffedd5; --orange-400:#fb923c; --orange-500:#f97316; --orange-600:#ea580c;

  /* Teal + Info */
  --teal-50:#f0fdfa; --teal-100:#ccfbf1; --teal-500:#14b8a6; --teal-600:#0d9488;
  --info-50:#f0f9ff; --info-100:#e0f2fe; --info-200:#bae6fd; --info-500:#0ea5e9; --info-600:#0284c7; --info-700:#0369a1;

  /* Neutral scale */
  --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;

  /* Semantic aliases */
  --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(17,24,39,0.55);

  /* Radius */
  --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%;

  /* Shadows */
  --shadow-xs:0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:0 2px 8px rgba(0,0,0,.08);
  --shadow-md:0 4px 15px rgba(0,0,0,.1);
  --shadow-lg:0 8px 32px rgba(0,0,0,.1);
  --shadow-xl:0 20px 60px rgba(0,0,0,.2);
  --shadow-primary:0 4px 15px rgba(59,130,246,.3);
  --shadow-primary-lg:0 6px 20px rgba(59,130,246,.4);
  --shadow-danger:0 4px 15px rgba(239,68,68,.3);
  --shadow-success:0 4px 15px rgba(16,185,129,.3);
  --shadow-warning:0 4px 15px rgba(245,158,11,.3);

  /* Transitions + z-index + spacing */
  --transition-fast:.15s ease; --transition-base:.3s ease;
  --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;
}