/*--------------------------------------------------------------
# DARK MODE VARIABLES
--------------------------------------------------------------*/
:root {
  /* Dark Mode Colors */
  --dark-color-background: #0f172a;
  --dark-color-foreground: #f8fafc;
  --dark-color-primary: #818cf8;
  --dark-color-primary-light: #a5b4fc;
  --dark-color-primary-dark: #4f46e5;
  --dark-color-secondary: #22d3ee;
  --dark-color-accent: #a78bfa;
  --dark-color-gray-50: #1e293b;
  --dark-color-gray-100: #334155;
  --dark-color-gray-200: #475569;
  --dark-color-gray-300: #64748b;
  --dark-color-gray-400: #94a3b8;
  --dark-color-gray-500: #cbd5e1;
  --dark-color-gray-600: #e2e8f0;
  --dark-color-gray-700: #f1f5f9;
  --dark-color-gray-800: #f8fafc;
  --dark-color-gray-900: #ffffff;
  
  /* Code Colors - Dark Mode */
  --dark-color-code-background: #112240;
  --dark-color-code-text: #e2e8f0;
}

/*--------------------------------------------------------------
# DARK MODE STYLES
--------------------------------------------------------------*/
.dark-mode {
  /* Base Colors */
  --color-background: var(--dark-color-background);
  --color-foreground: var(--dark-color-foreground);
  --color-primary: var(--dark-color-primary);
  --color-primary-light: var(--dark-color-primary-light);
  --color-primary-dark: var(--dark-color-primary-dark);
  --color-secondary: var(--dark-color-secondary);
  --color-accent: var(--dark-color-accent);
  
  /* Gray Shades */
  --color-gray-50: var(--dark-color-gray-50);
  --color-gray-100: var(--dark-color-gray-100);
  --color-gray-200: var(--dark-color-gray-200);
  --color-gray-300: var(--dark-color-gray-300);
  --color-gray-400: var(--dark-color-gray-400);
  --color-gray-500: var(--dark-color-gray-500);
  --color-gray-600: var(--dark-color-gray-600);
  --color-gray-700: var(--dark-color-gray-700);
  --color-gray-800: var(--dark-color-gray-800);
  --color-gray-900: var(--dark-color-gray-900);
  
  /* Code Colors */
  --color-code-background: var(--dark-color-code-background);
  --color-code-text: var(--dark-color-code-text);
}

/* Dark Mode Specific Styles */
.dark-mode .header.scrolled {
  background-color: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(10px);
}

.dark-mode .theme-toggle .fa-moon {
  display: none;
}

.dark-mode .theme-toggle .fa-sun {
  display: block;
}

.dark-mode .project-placeholder {
  background: linear-gradient(135deg, #4f46e5, #22d3ee);
}

.dark-mode .shape-1 {
  background-color: var(--dark-color-primary);
}

.dark-mode .shape-2 {
  background-color: var(--dark-color-secondary);
}

.dark-mode .shape-3 {
  background-color: var(--dark-color-accent);
}

.dark-mode .footer {
  background-color: #020617;
}

.dark-mode .certification-icon,
.dark-mode .contact-icon,
.dark-mode .social-link {
  background-color: var(--dark-color-gray-100);
}

.dark-mode .form-group input, 
.dark-mode .form-group textarea {
  background-color: var(--dark-color-gray-50);
  border-color: var(--dark-color-gray-200);
}

.dark-mode .form-group input:focus, 
.dark-mode .form-group textarea:focus {
  border-color: var(--dark-color-primary);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.3);
}