/* Dark Mode CSS Variables - AutoHub Consistent Theming */
/* Include this in main.ejs head to ensure all pages use consistent colors */

:root {
  /* ========== BACKGROUND COLORS ========== */
  --bg-primary: #0d0d0f;
  --bg-secondary: #1a1a1f;
  --bg-tertiary: #27272a;
  --bg-elevated: #2b2d31;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-active: rgba(255, 255, 255, 0.08);
  
  /* ========== TEXT COLORS ========== */
  --text-primary: #f2f3f5;
  --text-secondary: #b5bac1;
  --text-muted: #80848e;
  --text-disabled: #4f545c;
  
  /* ========== BRAND COLORS ========== */
  --brand-primary: #5865f2;
  --brand-primary-hover: #4752c4;
  --brand-primary-light: rgba(88, 101, 242, 0.15);
  
  /* ========== ACCENT COLORS ========== */
  --accent-success: #23a55a;
  --accent-success-light: rgba(35, 165, 90, 0.15);
  --accent-warning: #faa61a;
  --accent-warning-light: rgba(250, 166, 26, 0.15);
  --accent-error: #ed4245;
  --accent-error-light: rgba(237, 66, 69, 0.15);
  --accent-info: #5865f2;
  --accent-info-light: rgba(88, 101, 242, 0.15);
  
  /* ========== BORDER COLORS ========== */
  --border-primary: rgba(255, 255, 255, 0.1);
  --border-secondary: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.15);
  
  /* ========== PREMIUM/GOLD ========== */
  --premium-gold: #faa61a;
  --premium-gradient: linear-gradient(135deg, #faa61a, #f47b20);
  
  /* ========== SHADOWS ========== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
  
  /* ========== GRADIENTS ========== */
  --gradient-card: linear-gradient(135deg, rgba(14, 16, 20, 0.5) 0%, rgba(20, 23, 29, 0.5) 100%);
  --gradient-button: linear-gradient(135deg, #5865f2, #7289da);
  --gradient-success: linear-gradient(135deg, #23a55a, #1e8449);
  --gradient-danger: linear-gradient(135deg, #ed4245, #c73e3a);
  
  /* ========== TYPOGRAPHY ========== */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  
  /* ========== SPACING ========== */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  
  /* ========== BORDER RADIUS ========== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* ========== TRANSITIONS ========== */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
  
  /* ========== Z-INDEX LAYERS ========== */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-tooltip: 1200;
}

/* ========== OVERRIDE COMMON HARDCODED COLORS ========== */

/* Background overrides */
[style*="background: #1a1a1f"],
[style*="background:#1a1a1f"],
[style*="background-color: #1a1a1f"] {
  background: var(--bg-secondary) !important;
}

[style*="background: #27272a"],
[style*="background:#27272a"] {
  background: var(--bg-tertiary) !important;
}

[style*="background: #2b2d31"],
[style*="background:#2b2d31"] {
  background: var(--bg-elevated) !important;
}

/* Text color overrides */
[style*="color: #f2f3f5"],
[style*="color:#f2f3f5"],
[style*="color: #ffffff"],
[style*="color:#ffffff"],
[style*="color: white"] {
  color: var(--text-primary) !important;
}

[style*="color: #b5bac1"],
[style*="color:#b5bac1"] {
  color: var(--text-secondary) !important;
}

[style*="color: #80848e"],
[style*="color:#80848e"],
[style*="color: #71717a"],
[style*="color:#71717a"] {
  color: var(--text-muted) !important;
}

/* Border overrides */
[style*="border-color: rgba(255, 255, 255, 0.1)"],
[style*="border: 1px solid rgba(255, 255, 255, 0.1)"] {
  border-color: var(--border-primary) !important;
}

/* ========== UTILITY CLASSES ========== */

.bg-primary { background: var(--bg-primary) !important; }
.bg-secondary { background: var(--bg-secondary) !important; }
.bg-tertiary { background: var(--bg-tertiary) !important; }
.bg-elevated { background: var(--bg-elevated) !important; }

.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }

.text-success { color: var(--accent-success) !important; }
.text-warning { color: var(--accent-warning) !important; }
.text-error { color: var(--accent-error) !important; }
.text-info { color: var(--accent-info) !important; }

.border-primary { border-color: var(--border-primary) !important; }
.border-secondary { border-color: var(--border-secondary) !important; }