/**
 * Dark mode styles override for manual toggle
 */

/* Dark mode body background */
.dark body {
  background: #1c1917; /* Same as stone-900 */
  background: linear-gradient(212deg, rgba(28, 25, 23, 1) 0%, rgba(38, 35, 33, 1) 100%);
}

/* Light mode body background with !important to override system preference */
html:not(.dark) body {
  background: rgb(246, 245, 241) !important;
  background: linear-gradient(212deg, rgba(246, 245, 241, 1) 0%, rgba(245, 245, 245, 1) 100%) !important;
  color: #353534 !important;
}

/* Dark mode specific overrides with higher specificity */
html.dark .dark\:bg-stone-700 {
  background-color: var(--color-stone-700) !important;
}

html.dark .dark\:bg-stone-800 {
  background-color: var(--color-stone-800) !important;
}

html.dark .dark\:bg-stone-900 {
  background-color: var(--color-stone-900) !important;
}

html.dark .dark\:text-stone-100 {
  color: var(--color-stone-100) !important;
}

html.dark .dark\:text-stone-200 {
  color: var(--color-stone-200) !important;
}

html.dark .dark\:text-stone-300 {
  color: var(--color-stone-300) !important;
}

html.dark .dark\:text-stone-400 {
  color: var(--color-stone-400) !important;
}

/* Light mode specific overrides with higher specificity */
html:not(.dark) .dark\:bg-stone-700 {
  background-color: transparent !important;
}

html:not(.dark) .dark\:bg-stone-800 {
  background-color: var(--color-white) !important;
}

html:not(.dark) .dark\:bg-stone-900 {
  background-color: var(--color-stone-50) !important;
}

html:not(.dark) .dark\:text-stone-100 {
  color: var(--color-stone-900) !important;
}

html:not(.dark) .dark\:text-stone-200 {
  color: var(--color-stone-800) !important;
}

html:not(.dark) .dark\:text-stone-300 {
  color: var(--color-stone-700) !important;
}

html:not(.dark) .dark\:text-stone-400 {
  color: var(--color-stone-600) !important;
}

/* Ensure proper overrides for hover states */
html:not(.dark) .dark\:hover\:text-stone-200:hover {
  color: var(--color-stone-900) !important;
}

html:not(.dark) .dark\:hover\:text-stone-300:hover {
  color: var(--color-stone-700) !important;
}

html:not(.dark) .dark\:hover\:text-stone-400:hover {
  color: var(--color-stone-600) !important;
}

html:not(.dark) .dark\:hover\:bg-stone-600:hover {
  background-color: var(--color-stone-300) !important;
}

html.dark .dark\:prose-invert {
  --tw-prose-body: var(--tw-prose-invert-body) !important;
  --tw-prose-headings: var(--tw-prose-invert-headings) !important;
  --tw-prose-lead: var(--tw-prose-invert-lead) !important;
  --tw-prose-links: var(--tw-prose-invert-links) !important;
  --tw-prose-bold: var(--tw-prose-invert-bold) !important;
  --tw-prose-counters: var(--tw-prose-invert-counters) !important;
  --tw-prose-bullets: var(--tw-prose-invert-bullets) !important;
  --tw-prose-hr: var(--tw-prose-invert-hr) !important;
  --tw-prose-quotes: var(--tw-prose-invert-quotes) !important;
  --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders) !important;
  --tw-prose-captions: var(--tw-prose-invert-captions) !important;
  --tw-prose-kbd: var(--tw-prose-invert-kbd) !important;
  --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows) !important;
  --tw-prose-code: var(--tw-prose-invert-code) !important;
  --tw-prose-pre-code: var(--tw-prose-invert-pre-code) !important;
  --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg) !important;
  --tw-prose-th-borders: var(--tw-prose-invert-th-borders) !important;
  --tw-prose-td-borders: var(--tw-prose-invert-td-borders) !important;
}

/* Force light mode prose style */
html:not(.dark) .dark\:prose-invert {
  --tw-prose-body: oklch(0.373 0.034 259.733) !important;
  --tw-prose-headings: oklch(0.21 0.034 264.665) !important;
  --tw-prose-lead: oklch(0.446 0.03 256.802) !important;
  --tw-prose-links: oklch(0.21 0.034 264.665) !important;
  --tw-prose-bold: oklch(0.21 0.034 264.665) !important;
  --tw-prose-counters: oklch(0.551 0.027 264.364) !important;
  --tw-prose-bullets: oklch(0.872 0.01 258.338) !important;
  --tw-prose-hr: oklch(0.928 0.006 264.531) !important;
  --tw-prose-quotes: oklch(0.21 0.034 264.665) !important;
  --tw-prose-quote-borders: oklch(0.928 0.006 264.531) !important;
  --tw-prose-captions: oklch(0.551 0.027 264.364) !important;
  --tw-prose-kbd: oklch(0.21 0.034 264.665) !important;
  --tw-prose-code: oklch(0.21 0.034 264.665) !important;
  --tw-prose-pre-code: oklch(0.928 0.006 264.531) !important;
  --tw-prose-pre-bg: oklch(0.278 0.033 256.848) !important;
  --tw-prose-th-borders: oklch(0.872 0.01 258.338) !important;
  --tw-prose-td-borders: oklch(0.928 0.006 264.531) !important;
}

/* All hover overrides are now handled by the higher specificity selectors above */

/* Improve visibility of section headings in dark mode */
html.dark h2[style*="box-shadow: inset 0 -0.5em"] {
  box-shadow: inset 0 -0.5em rgba(255, 255, 255, 0.25) !important;
}

/* Also adjust specific colors to be more visible in dark mode */
html.dark h2[style*="#ffbf63"] {
  box-shadow: inset 0 -0.5em rgba(255, 191, 99, 0.4) !important;
}

html.dark h2[style*="#c1b7ff"] {
  box-shadow: inset 0 -0.5em rgba(193, 183, 255, 0.4) !important;
}

html.dark h2[style*="#cde4e1"] {
  box-shadow: inset 0 -0.5em rgba(205, 228, 225, 0.4) !important;
}

html.dark h2[style*="#6ee7b7"] {
  box-shadow: inset 0 -0.5em rgba(110, 231, 183, 0.4) !important;
}

/* Ensure section headings use original colors in light mode */
html:not(.dark) h2[style*="box-shadow: inset 0 -0.5em"] {
  box-shadow: inset 0 -0.5em #ffbf63 !important; 
}

html:not(.dark) h2[style*="#ffbf63"] {
  box-shadow: inset 0 -0.5em #ffbf63 !important;
}

html:not(.dark) h2[style*="#c1b7ff"] {
  box-shadow: inset 0 -0.5em #c1b7ff !important;
}

html:not(.dark) h2[style*="#cde4e1"] {
  box-shadow: inset 0 -0.5em #cde4e1 !important;
}

html:not(.dark) h2[style*="#6ee7b7"] {
  box-shadow: inset 0 -0.5em #6ee7b7 !important;
}

/* Theme toggle button animations */
@keyframes spin-sun {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spin-moon {
  from { transform: rotate(-90deg); }
  to { transform: rotate(0deg); }
}

.dark #light-icon {
  animation: spin-sun 0.5s ease-in-out;
}

#dark-icon.rotate-0 {
  animation: spin-moon 0.5s ease-in-out;
}

/* Theme toggle animation */
#theme-toggle {
  transition: all 0.3s ease;
}