/**
 * XEVOTECH COLOR SYSTEM
 * A dark-intelligence palette for enterprise technology
 * Version: 1.0.0
 */

/* ============================================
   DARK THEME (Primary)
   ============================================ */
:root {
  /* Foundation - The void and surfaces */
  --xevo-void: #08090C;
  --xevo-surface: #0F1117;
  --xevo-surface-elevated: #161922;
  
  /* Structure - Borders and dividers */
  --xevo-border: #1C1F2A;
  --xevo-border-hover: #2E3347;
  --xevo-divider: rgba(28, 31, 42, 0.6);
  
  /* Text - Hierarchy from muted to maximum */
  --xevo-text-muted: #6B7280;
  --xevo-text-secondary: #9CA3AF;
  --xevo-text-primary: #E4E6ED;
  --xevo-white: #F7F8FA;
  
  /* Accents - The signal system */
  --xevo-signal: #3B82F6;
  --xevo-signal-hover: #60A5FA;
  --xevo-signal-glow: rgba(59, 130, 246, 0.4);
  --xevo-pulse: #6366F1;
  --xevo-pulse-soft: rgba(99, 102, 241, 0.2);
  
  /* States - Feedback colors */
  --xevo-confirm: #10B981;
  --xevo-confirm-soft: rgba(16, 185, 129, 0.15);
  --xevo-heat: #F97316;
  --xevo-heat-soft: rgba(249, 115, 22, 0.15);
  --xevo-alert: #EF4444;
  --xevo-alert-soft: rgba(239, 68, 68, 0.15);
  
  /* Gradients - Predefined combinations */
  --xevo-gradient-signal: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
  --xevo-gradient-hero: linear-gradient(180deg, transparent 0%, #08090C 100%);
  --xevo-gradient-card: linear-gradient(145deg, #0F1117 0%, #161922 100%);
}

/* ============================================
   LIGHT THEME
   ============================================ */
[data-theme="light"] {
  /* Foundation - Inverted for light mode */
  --xevo-void: #F8F9FB;
  --xevo-surface: #FFFFFF;
  --xevo-surface-elevated: #F0F1F5;
  
  /* Structure - Lightened */
  --xevo-border: #E2E5EE;
  --xevo-border-hover: #D1D5DB;
  --xevo-divider: rgba(226, 229, 238, 0.6);
  
  /* Text - Inverted hierarchy */
  --xevo-text-muted: #9CA3AF;
  --xevo-text-secondary: #6B7280;
  --xevo-text-primary: #1A1D27;
  --xevo-white: #08090C;
  
  /* Accents - Same signal, adjusted for contrast */
  --xevo-signal: #2563EB;
  --xevo-signal-hover: #3B82F6;
  --xevo-signal-glow: rgba(37, 99, 235, 0.3);
  --xevo-pulse: #4F46E5;
  --xevo-pulse-soft: rgba(79, 70, 229, 0.15);
  
  /* States - Slightly adjusted for light backgrounds */
  --xevo-confirm: #059669;
  --xevo-confirm-soft: rgba(5, 150, 105, 0.1);
  --xevo-heat: #EA580C;
  --xevo-heat-soft: rgba(234, 88, 12, 0.1);
  --xevo-alert: #DC2626;
  --xevo-alert-soft: rgba(220, 38, 38, 0.1);
  
  /* Gradients - Adjusted for light theme */
  --xevo-gradient-signal: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%);
  --xevo-gradient-hero: linear-gradient(180deg, transparent 0%, #F8F9FB 100%);
  --xevo-gradient-card: linear-gradient(145deg, #FFFFFF 0%, #F0F1F5 100%);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.bg-void { background-color: var(--xevo-void); }
.bg-surface { background-color: var(--xevo-surface); }
.bg-surface-elevated { background-color: var(--xevo-surface-elevated); }

.text-white { color: var(--xevo-white); }
.text-primary { color: var(--xevo-text-primary); }
.text-secondary { color: var(--xevo-text-secondary); }
.text-muted { color: var(--xevo-text-muted); }

.border-subtle { border-color: var(--xevo-border); }
.border-hover { border-color: var(--xevo-border-hover); }

.accent-signal { color: var(--xevo-signal); }
.bg-signal { background-color: var(--xevo-signal); }
.border-signal { border-color: var(--xevo-signal); }

.glow-signal { box-shadow: 0 0 20px var(--xevo-signal-glow); }
.glow-signal-lg { box-shadow: 0 0 40px var(--xevo-signal-glow); }