/* New Color Theme - Mossy Creek Palette */
:root {
  /* New Color Palette */
  --midnight-green: #035453;        /* Primary dark green */
  --volcano-glow: #E4572E;       /* Accent red */
  --snow: #FFFBFA;      /* Light cream */
  --mossy-khaki: #C6C596;        /* Medium khaki */
  --raisin-black: #232023;       /* Dark text */
  --rainforest-glow: #1B4D3E;    /* Bright green */
  --vanilla-pearl: #FFF7E7;      /* Light cream */
  --creamy-beige: #ECDCC3;       /* Warm beige */
}

/* Override Tailwind colors with new palette */
.text-primary,
.dark .dark\:text-white,
.text-blue-dark {
  color: var(--raisin-black) !important;
}

.dark .text-primary,
.dark .dark\:text-white {
  color: var(--vanilla-pearl) !important;
}

.text-secondary,
.text-green,
.hover\:text-secondary:hover,
.hover\:text-green:hover,
.group:hover .group-hover\:text-secondary,
.group:hover .group-hover\:text-green {
  color: var(--volcano-glow) !important;
}

.bg-primary,
.dark .dark\:bg-primary {
  background-color: var(--midnight-green) !important;
}

.bg-secondary,
.bg-green {
  background-color: var(--rainforest-glow) !important;
}

.bg-green-light {
  background-color: var(--snow) !important;
}

.bg-yellow-light,
.bg-yellow-lighter {
  background-color: var(--creamy-beige) !important;
}

.bg-grey-lightest {
  background-color: var(--vanilla-pearl) !important;
}

.bg-grey-light {
  background-color: var(--mossy-khaki) !important;
}

.border-primary {
  border-color: var(--midnight-green) !important;
}

.border-secondary,
.border-green {
  border-color: var(--volcano-glow) !important;
}

.border-grey-lighter {
  border-color: var(--mossy-khaki) !important;
}

.dark .dark\:border-secondary,
.dark .dark\:border-green-light {
  border-color: var(--rainforest-glow) !important;
}

/* Hover states */
.hover\:bg-green:hover {
  background-color: var(--volcano-glow) !important;
}

.hover\:border-secondary:hover {
  border-color: var(--volcano-glow) !important;
}

/* Group hover states */
.group:hover .group-hover\:bg-yellow {
  background-color: var(--rainforest-glow) !important;
}

/* Focus states */
.focus\:border-secondary:focus,
.focus\:ring-secondary:focus {
  border-color: var(--volcano-glow) !important;
  --tw-ring-color: var(--volcano-glow) !important;
}

/* Prose styles - for blog content */
.prose {
  color: var(--raisin-black) !important;
}

.prose :where(a):not(:where([class~=not-prose] *)) {
  color: var(--volcano-glow) !important;
}

.prose :where(a):not(:where([class~=not-prose] *)):hover {
  color: var(--midnight-green) !important;
}

.prose :where(blockquote):not(:where([class~=not-prose] *)) {
  background-color: var(--snow) !important;
  border-color: var(--midnight-green) !important;
  color: var(--raisin-black) !important;
}

.prose :where(h1,h2,h3,h4,h5,h6):not(:where([class~=not-prose] *)) {
  color: var(--midnight-green) !important;
}

.prose :where(ul>li):not(:where([class~=not-prose] *)):before {
  background-color: var(--volcano-glow) !important;
}

/* Dark mode prose */
.dark .dark\:prose-dark {
  color: var(--vanilla-pearl) !important;
}

.dark .dark\:prose-dark :where(a):not(:where([class~=not-prose] *)) {
  color: var(--rainforest-glow) !important;
}

.dark .dark\:prose-dark :where(a):not(:where([class~=not-prose] *)):hover {
  color: var(--volcano-glow) !important;
}

.dark .dark\:prose-dark :where(h1,h2,h3,h4,h5,h6):not(:where([class~=not-prose] *)) {
  color: var(--vanilla-pearl) !important;
}

.dark .dark\:prose-dark :where(ul>li):not(:where([class~=not-prose] *)):before {
  background-color: var(--rainforest-glow) !important;
}

/* Twitter card styles */
.twitter-card {
  background-color: var(--creamy-beige) !important;
}

.twitter-card .twitter-card-title {
  color: var(--raisin-black) !important;
}

.twitter-card .twitter-card-source {
  color: var(--raisin-black) !important;
}

.twitter-card .twitter-card-btn {
  border-color: var(--midnight-green) !important;
  color: var(--midnight-green) !important;
}

.twitter-card .twitter-card-btn:hover {
  background-color: var(--midnight-green) !important;
  color: var(--vanilla-pearl) !important;
}

/* Fill current for SVGs */
.fill-current {
  fill: currentColor !important;
}

/* Navigation underline animation */
.group:hover .group-hover\:h-2 {
  background-color: var(--rainforest-glow) !important;
}

/* Blog category color classes */
.bg-green {
  background-color: var(--rainforest-glow) !important;
}

.bg-primary {
  background-color: var(--midnight-green) !important;
}

.bg-secondary {
  background-color: var(--volcano-glow) !important;
}

.bg-grey-light {
  background-color: var(--mossy-khaki) !important;
}

.bg-yellow-light {
  background-color: var(--creamy-beige) !important;
}

.text-white {
  color: var(--snow) !important;
}

.text-snow {
  color: var(--snow) !important;
}

.text-primary {
  color: var(--raisin-black) !important;
}

.text-green {
  color: var(--rainforest-glow) !important;
}

.text-green-dark {
  color: var(--midnight-green) !important;
}

/* Dark mode text-green-light override for "All posts" link */
.dark .dark\:text-green-light {
  color: var(--volcano-glow) !important;
}

/* Dark mode override */
.dark .dark\:bg-midnight-green {
  background-color: var(--midnight-green) !important;
}

.dark .dark\:text-grey-light {
  color: var(--mossy-khaki) !important;
}

.dark .text-grey-light {
  color: var(--mossy-khaki) !important;
}

.dark .dark\:border-grey-lighter {
  border-color: var(--rainforest-glow) !important;
}

/* Fix for text-grey in dark mode */
.text-grey {
  color: var(--raisin-black) !important;
}

.dark .text-grey {
  color: var(--mossy-khaki) !important;
}

/* Enhanced dark mode prose styling */
.dark .dark\:prose-dark :where(strong):not(:where([class~=not-prose] *)) {
  color: var(--vanilla-pearl) !important;
}

.dark .dark\:prose-dark :where(em):not(:where([class~=not-prose] *)) {
  color: var(--vanilla-pearl) !important;
}

.dark .dark\:prose-dark :where(code):not(:where([class~=not-prose] *)) {
  background-color: var(--rainforest-glow) !important;
  color: var(--vanilla-pearl) !important;
}

.dark .dark\:prose-dark :where(blockquote):not(:where([class~=not-prose] *)) {
  background-color: var(--rainforest-glow) !important;
  border-color: var(--volcano-glow) !important;
  color: var(--vanilla-pearl) !important;
}

/* Blockquote tweaks for actual dark mode usage with Tailwind Typography (prose-invert)
   - Use volcano glow for the left border accent
   - Use primary green for the blockquote text in dark mode
*/
/* Dark mode blockquote inside Tailwind Typography (prose-invert)
   - Give it a dark background and light text to differ from light mode
   - Keep the accent border volcano-glow
*/
.dark .prose.prose-invert :where(blockquote):not(:where([class~=not-prose] *)) {
  background-color: var(--midnight-green) !important;
  color: var(--vanilla-pearl) !important;
  border-left-color: var(--volcano-glow) !important;
  border-color: var(--volcano-glow) !important;
}

/* Ensure all prose text elements are visible in dark mode */
.dark .dark\:prose-dark :where(p):not(:where([class~=not-prose] *)) {
  color: var(--vanilla-pearl) !important;
}

.dark .dark\:prose-dark :where(li):not(:where([class~=not-prose] *)) {
  color: var(--vanilla-pearl) !important;
}

/* Dark mode styling */
.dark .dark\:bg-rainforest-glow {
  background-color: var(--rainforest-glow) !important;
}

.dark .dark\:text-vanilla-pearl {
  color: var(--vanilla-pearl) !important;
}

.dark .dark\:text-volcano-glow {
  color: var(--volcano-glow) !important;
}

.dark .dark\:border-vanilla-pearl {
  border-color: var(--vanilla-pearl) !important;
}

.dark .dark\:hover\:text-volcano-glow:hover {
  color: var(--volcano-glow) !important;
}

/* Ensure volcano-glow hover states work properly */
.hover\:text-volcano-glow:hover {
  color: var(--volcano-glow) !important;
}

/* Blog title styling - ensure volcano-glow is used consistently */
.text-secondary {
  color: var(--volcano-glow) !important;
}

.dark .text-secondary {
  color: var(--volcano-glow) !important;
}

.dark .dark\:text-secondary {
  color: var(--volcano-glow) !important;
}

/* Explicit utility classes for direct color name usage */
.bg-volcano-glow { background-color: var(--volcano-glow) !important; }
.text-volcano-glow { color: var(--volcano-glow) !important; }
.bg-vanilla-pearl { background-color: var(--vanilla-pearl) !important; }
.text-vanilla-pearl { color: var(--vanilla-pearl) !important; }
.bg-midnight-green { background-color: var(--midnight-green) !important; }
.text-midnight-green { color: var(--midnight-green) !important; }
.bg-rainforest-glow { background-color: var(--rainforest-glow) !important; }
.text-rainforest-glow { color: var(--rainforest-glow) !important; }

/* Copy button hover/focus helpers */
.btn-copy { transition: filter .15s ease, opacity .15s ease; }
.btn-copy:hover { filter: brightness(1.1); }
.btn-copy:active { filter: brightness(0.95); }
.btn-copy:focus { outline: 2px solid var(--volcano-glow); outline-offset: 2px; }