/* Dark Neon Theme - Cortana-inspired technical aesthetic */

:root {
  /* Background colors */
  --bg-primary: #0a0e1a;
  --bg-secondary: #12161f;
  --bg-panel: #12161f;

  /* Text colors */
  --text-primary: #ddeeff;
  --text-secondary: #6677aa;
  --text-muted: #4a5568;

  /* Neon accent colors */
  --neon-cyan: #00d9ff;
  --neon-purple: #b968ff;
  --neon-green: #00ff88;
  --neon-orange: #ffaa00;
  --neon-red: #ff4466;

  /* Border colors */
  --border-primary: rgba(0, 217, 255, 0.3);
  --border-secondary: rgba(0, 217, 255, 0.2);

  /* Typography */
  --font-mono: 'Courier New', monospace;
  --font-size-header: 18px;
  --font-size-panel-title: 14px;
  --font-size-body: 13px;
  --font-size-label: 11px;
  --letter-spacing-header: 2px;
  --letter-spacing-panel: 1.5px;
  --letter-spacing-label: 1px;
}

/* Base body styling */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-body);
}

/* Neon text glow effect */
.neon-text {
  text-shadow: 0 0 10px rgba(0, 217, 255, 0.8),
               0 0 20px rgba(0, 217, 255, 0.4);
  color: var(--neon-cyan);
}

/* Box glow effect */
.neon-glow {
  box-shadow: 0 0 15px rgba(0, 217, 255, 0.5),
              inset 0 0 10px rgba(0, 217, 255, 0.1);
}

/* Border glow effect */
.neon-border {
  border: 1px solid rgba(0, 217, 255, 0.5);
  box-shadow: 0 0 5px rgba(0, 217, 255, 0.3);
}

/* Gradient top border for panels */
.panel-border-glow {
  border-top: 2px solid transparent;
  border-image: linear-gradient(to right, #00d9ff, #b968ff, #00d9ff) 1;
}

/* Grid pattern background */
.grid-pattern {
  background-color: var(--bg-primary);
  background-image:
    linear-gradient(rgba(0, 217, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 217, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Utility classes for status colors */
.status-success {
  color: var(--neon-green);
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
}

.status-warning {
  color: var(--neon-orange);
  text-shadow: 0 0 8px rgba(255, 170, 0, 0.6);
}

.status-error {
  color: var(--neon-red);
  text-shadow: 0 0 8px rgba(255, 68, 102, 0.6);
}

.status-info {
  color: var(--neon-cyan);
  text-shadow: 0 0 8px rgba(0, 217, 255, 0.6);
}

/* Technical label styling */
.tech-label {
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  font-size: var(--font-size-label);
  color: var(--text-secondary);
  font-weight: 600;
}

/* Panel title styling */
.panel-title {
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-panel);
  font-size: var(--font-size-panel-title);
  color: var(--neon-cyan);
  font-weight: 600;
}

/* Header styling */
.header-title {
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-header);
  font-size: var(--font-size-header);
  color: var(--neon-cyan);
  font-weight: 600;
}

/* Animations */
@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideOut {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}