/* 
   ==========================================================================
   DCIM ENTERPRISE DESIGN TOKENS (2025-2026 Standard)
   Methodology: Atomic Design & OOUX
   ==========================================================================
*/

:root {
  /* --- 1. TYPOGRAPHY SCALES (Fluid Typography 1024px to 3840px) --- */
  --font-ui: 'Inter', 'Segoe UI', sans-serif;
  --font-data: 'JetBrains Mono', 'Fira Code', monospace;

  --min-bp: 1024px;
  --max-bp: 3840px;

  /* Formula: clamp(min, calc(min + (max - min) * ((100vw - min-bp) / (max-bp - min-bp))), max) */
  --font-xs: clamp(11px, calc(11px + (14 - 11) * ((100vw - 1024px) / (3840 - 1024))), 14px);
  --font-sm: clamp(13px, calc(13px + (16 - 13) * ((100vw - 1024px) / (3840 - 1024))), 16px);
  --font-md: clamp(14px, calc(14px + (18 - 14) * ((100vw - 1024px) / (3840 - 1024))), 18px);
  --font-lg: clamp(18px, calc(18px + (24 - 18) * ((100vw - 1024px) / (3840 - 1024))), 24px);
  --font-xl: clamp(24px, calc(24px + (36 - 24) * ((100vw - 1024px) / (3840 - 1024))), 36px);
  --font-2xl: clamp(32px, calc(32px + (48 - 32) * ((100vw - 1024px) / (3840 - 1024))), 48px);

  /* --- 2. SPACING (4pt Grid System) --- */
  --space-micro: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* --- 3. BORDER RADIUS (Industrial Utility) --- */
  --radius-sm: 2px;
  --radius-md: 4px;
}

/* --- 4. COLORS (Strict Semantic Palette) --- */
/* Default (Dark Mode) */
:root, [data-theme="dark"] {
  --bg-app: #0B0E14;
  --bg-panel: #111827;
  --bg-input: #1F2937;
  --bg-hover: rgba(255, 255, 255, 0.04);
  --bg-active: rgba(59, 130, 246, 0.1);
  
  --text-primary: #F3F4F6;
  --text-secondary: #9CA3AF;
  --text-muted: #6B7280;
  
  --border-color: #374151;
  --border-focus: #3B82F6;
  --grid-pattern: rgba(255, 255, 255, 0.04);
  
  --status-critical: #EF4444;
  --status-warning: #F59E0B;
  --status-normal: #10B981;
  --status-unknown: #6B7280;
  --status-blocked: #8B5CF6;
  
  --accent: #3B82F6;
  --accent-hover: #2563EB;
}

/* Light Mode (WCAG AA Compliant) */
[data-theme="light"] {
  --bg-app: #F3F4F6;
  --bg-panel: #FFFFFF;
  --bg-input: #E5E7EB;
  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-active: rgba(59, 130, 246, 0.1);
  
  --text-primary: #111827;
  --text-secondary: #4B5563;
  --text-muted: #9CA3AF;
  
  --border-color: #D1D5DB;
  --border-focus: #2563EB;
  --grid-pattern: rgba(0, 0, 0, 0.04);
  
  --status-critical: #DC2626; /* Darker red for contrast on light */
  --status-warning: #D97706;  /* Darker amber */
  --status-normal: #059669;   /* Darker green */
  --status-unknown: #9CA3AF;
  --status-blocked: #7C3AED;
  
  --accent: #2563EB;
  --accent-hover: #1D4ED8;
}

/* --- ATOMIC UTILITY CLASSES --- */

.data-text {
  font-family: var(--font-data) !important;
  letter-spacing: -0.5px;
}

.status-text-critical { color: var(--status-critical); }
.status-text-warning { color: var(--status-warning); }
.status-text-normal { color: var(--status-normal); }

.bg-status-critical { background-color: var(--status-critical); color: white; }
.bg-status-warning { background-color: var(--status-warning); color: #000; }
.bg-status-normal { background-color: var(--status-normal); color: white; }

/* Skeleton Loading Pattern */
.skeleton {
  background: linear-gradient(90deg, var(--bg-input) 25%, var(--border-color) 50%, var(--bg-input) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite linear;
  border-radius: var(--radius-sm);
  color: transparent !important;
  pointer-events: none;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}