/* ============================================
   THEME TOGGLE - Light/Dark Mode
   ============================================ */

/* Light Mode Variables */
body.light-mode {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-tertiary: #6b7280;
  --accent-primary: #2563eb;
  --accent-secondary: #3b82f6;
  --border-color: #e5e7eb;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Light Mode Styling */
body.light-mode {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Header */
body.light-mode header .backdrop-blur-md {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-bottom: 1px solid var(--border-color);
}

body.light-mode .nav-link {
  color: var(--text-secondary) !important;
}

body.light-mode .nav-link:hover {
  color: var(--accent-primary) !important;
}

/* Hero Section */
body.light-mode #hero {
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 50%, #ffffff 100%) !important;
}

body.light-mode #hero .absolute.inset-0 {
  background: linear-gradient(to bottom right, rgba(37, 99, 235, 0.03), rgba(59, 130, 246, 0.03)) !important;
}

body.light-mode #hero h1,
body.light-mode #hero .text-white {
  color: #111827 !important;
}

body.light-mode #hero .text-gray-300,
body.light-mode #hero p {
  color: #374151 !important;
}

body.light-mode #hero .text-blue-400 {
  color: #2563eb !important;
}

/* Sections */
body.light-mode section {
  background: var(--bg-primary);
}

body.light-mode #about {
  background: white !important;
}

body.light-mode #competences {
  background: var(--bg-secondary) !important;
}

body.light-mode #projets {
  background: white !important;
}

body.light-mode #contact {
  background: var(--bg-secondary) !important;
}

/* Cards & Containers */
body.light-mode .bg-gray-800,
body.light-mode .bg-gray-900 {
  background-color: var(--bg-primary) !important;
  border: 1px solid var(--border-color);
}

body.light-mode .bg-gray-700 {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

/* Text Colors */
body.light-mode .text-white,
body.light-mode h1, body.light-mode h2,
body.light-mode h3, body.light-mode h4 {
  color: var(--text-primary) !important;
}

body.light-mode .text-gray-300,
body.light-mode .text-gray-400,
body.light-mode .text-gray-500 {
  color: var(--text-secondary) !important;
}

/* Skill Cards */
body.light-mode .skill-card {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
}

body.light-mode .skill-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(59, 130, 246, 0.2);
}

/* Project Cards */
body.light-mode .project-card {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-color);
}

body.light-mode .project-card:hover {
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
}

/* Form Inputs */
body.light-mode input,
body.light-mode textarea {
  background-color: var(--bg-primary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

body.light-mode input::placeholder,
body.light-mode textarea::placeholder {
  color: var(--text-tertiary) !important;
}

body.light-mode input:focus,
body.light-mode textarea:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Buttons */
body.light-mode .btn-primary {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
}

body.light-mode .btn-secondary {
  color: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
}

body.light-mode .btn-secondary:hover {
  background-color: var(--accent-primary) !important;
  color: white !important;
}

/* Footer */
body.light-mode footer {
  background-color: var(--bg-tertiary) !important;
  border-top: 1px solid var(--border-color);
}

body.light-mode footer .text-gray-400,
body.light-mode footer .text-gray-500 {
  color: var(--text-secondary) !important;
}

/* Borders */
body.light-mode .border-gray-700,
body.light-mode .border-gray-800 {
  border-color: var(--border-color) !important;
}

/* Filters & Tabs */
body.light-mode .skill-tab,
body.light-mode .project-filter {
  background-color: transparent;
  color: var(--text-secondary);
  border-color: var(--border-color);
}

body.light-mode .skill-tab:hover,
body.light-mode .project-filter:hover {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

body.light-mode .skill-tab.active,
body.light-mode .project-filter.active {
  background-color: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}

/* Back to Top Button */
body.light-mode #back-to-top {
  background-color: var(--accent-primary);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

body.light-mode #back-to-top:hover {
  background-color: #2563eb;
}

/* Chatbot VOID styles are now in void-chatbot.css with built-in dark mode support */

/* Smooth Transition for Theme Switch */
body,
header,
section,
footer,
.bg-gray-800,
.bg-gray-900,
.bg-gray-700,
input,
textarea,
.skill-card,
.project-card {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Theme Toggle Icon Animation */
#theme-toggle {
  transition: transform 0.3s ease;
}

#theme-toggle:hover {
  transform: scale(1.1);
}

#theme-toggle svg {
  transition: all 0.3s ease;
}

body.light-mode #theme-toggle svg path {
  stroke: var(--accent-primary);
}

/* Shadows in Light Mode */
body.light-mode .shadow-lg,
body.light-mode .shadow-xl,
body.light-mode .shadow-2xl {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

/* Technology badges and tags in light mode */
body.light-mode .bg-blue-600\/20,
body.light-mode .bg-blue-600\/10 {
  background-color: rgba(37, 99, 235, 0.1) !important;
}

body.light-mode .text-blue-300,
body.light-mode .text-blue-400 {
  color: #2563eb !important;
}

body.light-mode .border-blue-600\/30 {
  border-color: rgba(37, 99, 235, 0.3) !important;
}

/* Improve text contrast on light backgrounds */
body.light-mode .bg-gray-800 .text-white h3,
body.light-mode .bg-gray-800 .text-white h4,
body.light-mode .bg-gray-900 .text-white h3,
body.light-mode .bg-gray-900 .text-white h4 {
  color: #111827 !important;
}

body.light-mode .bg-gray-800 p,
body.light-mode .bg-gray-900 p {
  color: #374151 !important;
}

/* Gradient Adjustments */
body.light-mode .bg-gradient-to-r,
body.light-mode .bg-gradient-to-b,
body.light-mode .bg-gradient-to-br {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(96, 165, 250, 0.1)) !important;
}

/* Modal/Overlay in Light Mode */
body.light-mode .project-modal {
  background: rgba(255, 255, 255, 0.95);
}

body.light-mode .project-modal-content {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Profile Image Border */
body.light-mode .profile-image {
  border-color: var(--accent-primary) !important;
}

/* Responsive adjustments */
@media (prefers-color-scheme: light) {
  body:not(.dark-mode):not(.light-mode) {
    --bg-primary: #ffffff;
    --bg-secondary: #f3f4f6;
    --text-primary: #1f2937;
  }
}