.theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .toggle-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .toggle-label {
    display: flex;
    position: relative;
    bottom: 1px;
    left: 8px;
    width: 2.8rem; /* w-11 */
    height: 1.5rem; /* h-6 */
    cursor: pointer;
    border-radius: 9999px; /* rounded-full */
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .toggle-handle {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    display: flex;
    height: 1.1rem;
    width: 1.1rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: white;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .toggle-checkbox:checked + .toggle-label .toggle-handle {
    transform: translateX(1.375rem);
    background-color: black;
  }

  .sun-icon, .moon-icon {
    transition: opacity 200ms ease-in-out;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .moon-icon {
    opacity: 0;
  }

  .toggle-checkbox:checked + .toggle-label .moon-icon {
    opacity: 1;
  }

  .toggle-checkbox:checked + .toggle-label .sun-icon {
    opacity: 0;
  }

  /* Light mode styles */
  .toggle-label {
    background-color: #e5e7eb;
  }

  .toggle-checkbox:checked + .toggle-label {
    background-color: #2563eb;
  }

  /* Light mode - show sun, hide moon */
  .sun-icon {
    opacity: 1;
  }
  
  .moon-icon {
    opacity: 0;
  }

  /* Dark mode - hide sun, show moon */
  .dark .sun-icon {
    opacity: 0;
  }
  
  .dark .moon-icon {
    opacity: 1;
  }
  
  /* Toggle background colors */
  .dark .toggle-label {
    background-color: #374151;
  }

  .dark .toggle-handle {
    background: #f3f4f6;
  }

  .toggle-checkbox:checked + .toggle-label {
    background-color: #3c83f6;
  }

  .toggle-label[data-state="checked"] {
    background-color: #3c83f6; /* blue */
  }

  .toggle-label[data-state="unchecked"] {
    background-color: #e5e7eb; /* gray-200 */
  }