/* ==========================================================================
   Dark Mode Styles
   Note: Rules are duplicated for both system preference (@media) and manual
   toggle (html.dark) to support both detection methods.
   ========================================================================== */

/* System preference dark mode */
@media (prefers-color-scheme: dark) {
  .theme-toggle {
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
  }

  .theme-toggle:hover {
    background: var(--dark-hover-bg);
  }

  .tool-pill {
    background: var(--dark-bg-translucent);
    border-color: var(--dark-border-translucent);
    color: var(--color-primary-dark);
  }

  .tool-pill:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-text-inverse-dark);
  }

  .intro .social-links a {
    color: var(--color-primary-dark);
  }
}

/* Manual dark mode toggle */
html.dark .theme-toggle {
  border-color: var(--color-primary-dark);
  color: var(--color-primary-dark);
}

html.dark .theme-toggle:hover {
  background: var(--dark-hover-bg);
}

html.dark .tool-pill {
  background: var(--dark-bg-translucent);
  border-color: var(--dark-border-translucent);
  color: var(--color-primary-dark);
}

html.dark .tool-pill:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-inverse-dark);
}

html.dark .intro .social-links a {
  color: var(--color-primary-dark);
}