/* --- Light/Dark Mode Styles --- */
      :root {
        /* Light mode variables */
        --bg-color-light: #f9fafb; /* bg-gray-50 */
        --bg-color-white: #ffffff; /* bg-white */
        --text-color-default: #1f2937; /* gray-900 */
        --text-color-medium: #4b5563; /* gray-700 */
        --text-color-light: #6b7280; /* gray-600 */
        --border-color: #d1d5db; /* gray-300 */
        --skill-bar-bg: #e5e7eb; /* gray-200 */
        --switch-bg: #e5e7eb; /* gray-200 */
        --primary-light: #eff6ff; /* blue-100 */
        --secondary-light: #d1fae5; /* green-100 */
        --yellow-light: #fffacd; /* yellow-100 */
        --red-light: #fee2e2; /* red-100 */
      }

      .dark {
        /* Dark mode variables */
        --bg-color-light: #1f2937; /* dark bg */
        --bg-color-white: #374151; /* dark card/section bg */
        --text-color-default: #f3f4f6; /* gray-100 */
        --text-color-medium: #d1d5db; /* gray-300 */
        --text-color-light: #9ca3af; /* gray-400 */
        --border-color: #4b5563; /* gray-700 */
        --skill-bar-bg: #4b5563; /* gray-700 */
        --switch-bg: #4b5563; /* gray-700 */
        --primary-light: #1e3a8a; /* dark blue for bg-primary-100 equivalent */
        --secondary-light: #065f46; /* dark green for bg-secondary-100 equivalent */
        --yellow-light: #854d09; /* dark yellow for bg-yellow-100 equivalent */
        --red-light: #7f1d1d; /* dark red for bg-red-100 equivalent */
      }

      body {
        font-family: 'Inter', sans-serif;
        scroll-behavior: smooth;
        background-color: var(--bg-color-light); /* Apply dynamic background */
        color: var(--text-color-default); /* Apply dynamic text color */
        transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
      }

      /* Apply dynamic colors to specific elements */
      .dark .text-gray-900 {
        color: var(--text-color-default);
      }
      .dark .text-gray-800 {
        color: var(--text-color-medium); /* Slightly lighter for headings */
      }
      .dark .text-gray-700 {
        color: var(--text-color-medium);
      }
      .dark .text-gray-600 {
        color: var(--text-color-light);
      }
      .dark .bg-white {
        background-color: var(--bg-color-white);
      }
      .dark .bg-gray-50 {
        background-color: var(--bg-color-light);
      }
      .dark .border-gray-300 {
        border-color: var(--border-color);
      }
      .dark .hover\:bg-gray-100:hover {
        background-color: var(--bg-color-light);
      }
      .dark .shadow-sm {
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
      }
      .dark .shadow-md {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2),
          0 2px 4px -1px rgba(0, 0, 0, 0.12);
      }
      .dark .shadow-lg {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2),
          0 4px 6px -2px rgba(0, 0, 0, 0.1);
      }
      .dark .shadow-xl {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2),
          0 10px 10px -5px rgba(0, 0, 0, 0.08);
      }

      /* Specific element styling for dark mode */
      .dark .skill-bar {
        background-color: var(--skill-bar-bg);
      }
      .dark .switch-slider {
        background-color: var(--switch-bg);
      }
      .dark .switch-slider:before {
        background-color: var(--bg-color-light);
      }
      input:checked + .switch-slider {
        background-color: var(--primary); /* Uses Tailwind's primary color */
      }

      /* Adjusting specific background colors for dark mode icons/divs */
      .dark .bg-blue-100 {
        background-color: var(--primary-light);
      }
      .dark .bg-green-100 {
        background-color: var(--secondary-light);
      }
      .dark .bg-yellow-100 {
        background-color: var(--yellow-light);
      }
      .dark .bg-red-100 {
        background-color: var(--red-light);
      }
      .dark .bg-purple-100 {
        background-color: #4c1d95; /* dark purple */
      }
      .dark .text-purple-800 {
        color: #c4b5fd; /* light purple text */
      }
      .dark .bg-pink-100 {
        background-color: #831843; /* dark pink */
      }
      .dark .text-pink-800 {
        color: #fbcfe8; /* light pink text */
      }

      /* --- OVERRIDE FOR HOME SECTION: ALWAYS LIGHT MODE --- */
      .dark #home .text-gray-900 {
        color: #1f2937; /* Force original gray-900 color for H1 */
      }
      .dark #home .text-gray-700 {
        color: #4b5563; /* Force original gray-700 color for P */
      }
      .dark #home .text-gray-600 {
        color: #6b7280; /* Force original gray-600 color for P */
      }
      .dark #home .border-gray-300 {
        border-color: #d1d5db; /* Force original gray-300 border color for buttons */
      }
      .dark #home .hover\:bg-gray-100:hover {
        background-color: #f3f4f6; /* Force original gray-100 hover for buttons */
      }
      .dark #home .border-white {
        border-color: white !important; /* Ensure profile picture border stays white */
      }

      /* End Light/Dark Mode Styles */

      :where([class^='ri-'])::before {
        content: '\f3c2';
      }
      body {
        font-family: 'Inter', sans-serif;
        scroll-behavior: smooth;
      }
      .typing-effect::after {
        content: '|';
        animation: blink 1s infinite;
      }
      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
      }
      .skill-bar {
        height: 8px;
        border-radius: 4px;
        background-color: #e5e7eb;
        overflow: hidden;
      }
      .skill-progress {
        height: 100%;
        border-radius: 4px;
        background-color: #3b82f6;
        transition: width 1s ease-in-out;
      }
      .project-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
      .project-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
          0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }
      .custom-switch {
        position: relative;
        display: inline-block;
        width: 48px;
        height: 24px;
      }
      .custom-switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }
      .switch-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #e5e7eb;
        transition: 0.4s;
        border-radius: 24px;
      }
      .switch-slider:before {
        position: absolute;
        content: '';
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
      }
      input:checked + .switch-slider {
        background-color: #3b82f6;
      }
      input:checked + .switch-slider:before {
        transform: translateX(24px);
      }