@tailwind base;
@tailwind components;
@tailwind utilities;

/*
  Dark Mode Global Styles
  -----------------------
  These rules automatically apply dark mode variants to common patterns
  so you don't need to add dark: classes to every element on every page.
  
  For pages with dark hero sections, add data-header-mode="dark" to the hero.
  
  Note: Using higher specificity selectors to ensure overrides work.
*/

/* 
  ============================================
  DARK MODE OVERRIDES
  Placed outside @layer for highest specificity
  ============================================
*/

/* Smooth transition for dark mode toggle */
html {
  transition: background-color 0.3s, color 0.3s;
}

/* ===== BACKGROUNDS ===== */

/* Page/section backgrounds */
html.dark body {
  background-color: theme('colors.slate.900');
}

html.dark .bg-white {
  background-color: theme('colors.slate.800') !important;
}

html.dark .bg-neutral-50 {
  background-color: theme('colors.slate.900') !important;
}

html.dark .bg-neutral-100 {
  background-color: theme('colors.slate.800') !important;
}

/* Partial opacity backgrounds */
html.dark .bg-neutral-50\/50,
html.dark .bg-neutral-50\/80 {
  background-color: theme('colors.slate.800') !important;
}

/* Hover backgrounds */
html.dark .hover\:bg-neutral-50\/50:hover,
html.dark .hover\:bg-neutral-50:hover {
  background-color: theme('colors.slate.700') !important;
}

html.dark .hover\:bg-neutral-100:hover {
  background-color: theme('colors.slate.700') !important;
}

/* Gradient backgrounds */
html.dark .bg-gradient-to-b.from-neutral-100,
html.dark .bg-gradient-to-br.from-neutral-100 {
  --tw-gradient-from: theme('colors.slate.800') !important;
}

html.dark .bg-gradient-to-b.from-neutral-50,
html.dark .bg-gradient-to-br.from-neutral-50 {
  --tw-gradient-from: theme('colors.slate.900') !important;
}

html.dark .bg-gradient-to-b.from-white,
html.dark .bg-gradient-to-br.from-white {
  --tw-gradient-from: theme('colors.slate.800') !important;
}

html.dark .bg-gradient-to-b.to-white,
html.dark .bg-gradient-to-br.to-white,
html.dark .bg-gradient-to-t.from-white {
  --tw-gradient-to: theme('colors.slate.900') !important;
}

html.dark .bg-gradient-to-b.to-neutral-50,
html.dark .bg-gradient-to-br.to-neutral-50,
html.dark .bg-gradient-to-b.to-neutral-50\/50,
html.dark .bg-gradient-to-br.to-neutral-50\/50 {
  --tw-gradient-to: theme('colors.slate.800') !important;
}

html.dark .bg-gradient-to-b.via-neutral-50,
html.dark .bg-gradient-to-b.via-white {
  --tw-gradient-via: theme('colors.slate.800') !important;
}

/* ===== TEXT COLORS ===== */

/* Headings and primary text - neutral-950 → white */
html.dark .text-neutral-950 {
  color: theme('colors.white') !important;
}

html.dark .text-neutral-900 {
  color: theme('colors.neutral.100') !important;
}

/* Labels and medium text - neutral-700 → neutral-300 */
html.dark .text-neutral-700 {
  color: theme('colors.neutral.300') !important;
}

/* Body text - neutral-600 → neutral-300 */
html.dark .text-neutral-600 {
  color: theme('colors.neutral.300') !important;
}

/* Secondary text - neutral-500 → neutral-400 */
html.dark .text-neutral-500 {
  color: theme('colors.neutral.400') !important;
}

/* Muted text - neutral-400 → neutral-500 */
html.dark .text-neutral-400 {
  color: theme('colors.neutral.500') !important;
}

/* Hover text colors */
html.dark .hover\:text-neutral-950:hover {
  color: theme('colors.white') !important;
}

html.dark .hover\:text-neutral-900:hover {
  color: theme('colors.neutral.100') !important;
}

html.dark .hover\:text-neutral-700:hover,
html.dark .group:hover .group-hover\:text-neutral-700 {
  color: theme('colors.neutral.300') !important;
}

html.dark .hover\:text-neutral-600:hover {
  color: theme('colors.neutral.300') !important;
}

/* ===== BORDERS ===== */

/* Border colors - much softer in dark mode */
html.dark .border-neutral-100 {
  border-color: theme('colors.slate.700') !important;
}

html.dark .border-neutral-200 {
  border-color: theme('colors.slate.700') !important;
}

html.dark .border-neutral-300 {
  border-color: theme('colors.slate.600') !important;
}

/* Border hover states */
html.dark .hover\:border-neutral-300:hover {
  border-color: theme('colors.slate.500') !important;
}

html.dark .hover\:border-neutral-400:hover {
  border-color: theme('colors.slate.500') !important;
}

/* Ring colors */
html.dark .ring-neutral-950\/5 {
  --tw-ring-color: rgb(255 255 255 / 0.1) !important;
}

/* Border on sections */
html.dark .border-y.border-neutral-100 {
  border-color: theme('colors.slate.800') !important;
}

html.dark .border-t.border-neutral-100 {
  border-color: theme('colors.slate.800') !important;
}

/* ===== BUTTONS ===== */

/* Dark buttons become light in dark mode */
/* Only apply to inline elements (buttons/links), not sections */
html.dark a.bg-neutral-900,
html.dark button.bg-neutral-900,
html.dark .btn.bg-neutral-900 {
  background-color: theme('colors.white') !important;
  color: theme('colors.slate.900') !important;
}

html.dark a.bg-neutral-950,
html.dark button.bg-neutral-950,
html.dark .btn.bg-neutral-950 {
  background-color: theme('colors.white') !important;
  color: theme('colors.slate.900') !important;
}

html.dark .hover\:bg-neutral-800:hover {
  background-color: theme('colors.neutral.200') !important;
  color: theme('colors.slate.900') !important;
}

/* Secondary/outline buttons */
html.dark .bg-white.border.border-neutral-200 {
  background-color: theme('colors.slate.700') !important;
  border-color: theme('colors.slate.600') !important;
  color: theme('colors.neutral.300') !important;
}

/* ===== CARDS & CONTAINERS ===== */

/* Card hover backgrounds */
html.dark .hover\:bg-neutral-50\/50:hover {
  background-color: theme('colors.slate.700') !important;
}

/* ===== SHADOWS ===== */

html.dark .shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.4) !important;
}

html.dark .shadow-lg,
html.dark .hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5) !important;
}

html.dark .hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5) !important;
}

html.dark .shadow-neutral-200\/50,
html.dark .hover\:shadow-neutral-200\/50:hover {
  --tw-shadow-color: transparent !important;
}

/* ===== FORM ELEMENTS ===== */

html.dark input:not([type="checkbox"]):not([type="radio"]),
html.dark select,
html.dark textarea {
  background-color: theme('colors.slate.700') !important;
  border-color: theme('colors.slate.600') !important;
  color: theme('colors.white') !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: theme('colors.neutral.400') !important;
}

html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: theme('colors.slate.500') !important;
  --tw-ring-color: theme('colors.slate.500') !important;
}

/* Focus ring utility classes */
html.dark .focus\:ring-neutral-200:focus {
  --tw-ring-color: theme('colors.slate.600') !important;
}

html.dark .focus\:border-neutral-400:focus {
  border-color: theme('colors.slate.500') !important;
}

/* ===== SPECIAL ELEMENTS ===== */

/* Dot pattern overlay - soften for dark mode */
html.dark [style*="radial-gradient(circle, #d4d4d4"] {
  opacity: 0.15 !important;
}

/* Staff pick badges */
html.dark .bg-emerald-100 {
  background-color: rgb(6 78 59 / 0.5) !important;
  color: theme('colors.emerald.300') !important;
}

html.dark .text-emerald-700 {
  color: theme('colors.emerald.300') !important;
}

/* Amber stars - keep visible */
html.dark .text-amber-500 {
  color: theme('colors.amber.400') !important;
}

/* Icon containers */
html.dark .bg-neutral-100.border.border-neutral-200 {
  background-color: theme('colors.slate.700') !important;
  border-color: theme('colors.slate.600') !important;
}

/* Radial glow elements */
html.dark .bg-gradient-radial {
  opacity: 0.3 !important;
}

/* Decorative blur shapes */
html.dark .bg-neutral-200\/30,
html.dark .bg-neutral-200\/20,
html.dark .bg-neutral-200\/60 {
  background-color: rgb(51 65 85 / 0.3) !important;
}

html.dark .bg-neutral-100\/80 {
  background-color: rgb(51 65 85 / 0.5) !important;
}

/* ===== PROSE / TYPOGRAPHY ===== */

/* Prose content styling for terms, privacy, blog posts etc */
html.dark .prose {
  --tw-prose-body: theme('colors.neutral.300') !important;
  --tw-prose-headings: theme('colors.white') !important;
  --tw-prose-links: theme('colors.white') !important;
  --tw-prose-bold: theme('colors.white') !important;
  --tw-prose-counters: theme('colors.neutral.400') !important;
  --tw-prose-bullets: theme('colors.neutral.400') !important;
  --tw-prose-hr: theme('colors.slate.700') !important;
  --tw-prose-quotes: theme('colors.neutral.300') !important;
  --tw-prose-quote-borders: theme('colors.slate.700') !important;
  --tw-prose-captions: theme('colors.neutral.400') !important;
  --tw-prose-code: theme('colors.white') !important;
  --tw-prose-pre-code: theme('colors.neutral.300') !important;
  --tw-prose-pre-bg: theme('colors.slate.800') !important;
  --tw-prose-th-borders: theme('colors.slate.600') !important;
  --tw-prose-td-borders: theme('colors.slate.700') !important;
}

html.dark .prose p,
html.dark .prose li,
html.dark .prose ul,
html.dark .prose ol {
  color: theme('colors.neutral.300') !important;
}

html.dark .prose h1,
html.dark .prose h2,
html.dark .prose h3,
html.dark .prose h4,
html.dark .prose h5,
html.dark .prose h6 {
  color: theme('colors.white') !important;
}

html.dark .prose strong {
  color: theme('colors.white') !important;
}

html.dark .prose a {
  color: theme('colors.white') !important;
}

html.dark .prose .lead {
  color: theme('colors.neutral.300') !important;
}

/* Strong text inside paragraphs */
html.dark p strong,
html.dark .text-neutral-500 strong {
  color: theme('colors.white') !important;
}

/* ===== IMAGES & LOGOS ===== */

/* Grayscale merchant logos - invert in dark mode so they're visible */
html.dark .grayscale {
  filter: grayscale(100%) invert(1) !important;
}

html.dark .grayscale:hover {
  filter: grayscale(0%) invert(0) !important;
}

/* Inline logos that need inversion in dark mode (about page etc) */
html.dark img[alt="LAUNCHTIP"]:not([data-shared--header-scroll-target]) {
  filter: brightness(0) invert(1);
}

/* ===== CODE BLOCKS / SYNTAX HIGHLIGHTING ===== */

/* TinyMCE codesample plugin compatibility */
.prose pre[class*="language-"],
.prose code[class*="language-"] {
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

.prose pre {
  background-color: #1e1e1e !important;
  border-radius: 0.5rem !important;
  padding: 1rem !important;
  overflow-x: auto !important;
  margin: 1.5rem 0 !important;
}

.prose pre code {
  background: none !important;
  padding: 0 !important;
  font-size: inherit !important;
  color: inherit !important;
}

.prose code {
  background-color: #f1f5f9;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
  font-weight: 500;
  color: #be185d;
}

html.dark .prose code {
  background-color: #334155;
  color: #f472b6;
}

/* WordPress Enlighter code blocks compatibility */
.prose .EnlighterJSRAW,
.prose pre.EnlighterJSRAW {
  background-color: #1e1e1e !important;
  border-radius: 0.5rem !important;
  padding: 1rem !important;
  overflow-x: auto !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  color: #e5e5e5 !important;
  white-space: pre !important;
  margin: 1.5rem 0 !important;
}

/* Clean up WordPress classes from blog content */
.prose .font-claude-response-body,
.prose .font-claude-response-heading,
.prose .font-claude-response-subheading {
  font-family: inherit !important;
  font-weight: inherit !important;
}

.prose .whitespace-normal {
  white-space: normal !important;
}

.prose p[class],
.prose h2[class],
.prose h3[class],
.prose ul[class],
.prose ol[class],
.prose li[class] {
  margin: revert !important;
}

/* ===== BLOG POST STYLES ===== */

/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

/* Blog prose dark mode - Tailwind prose plugin overrides */
html.dark .prose-neutral {
  --tw-prose-body: theme('colors.neutral.300');
  --tw-prose-headings: theme('colors.white');
  --tw-prose-lead: theme('colors.neutral.300');
  --tw-prose-links: theme('colors.white');
  --tw-prose-bold: theme('colors.white');
  --tw-prose-counters: theme('colors.neutral.400');
  --tw-prose-bullets: theme('colors.neutral.400');
  --tw-prose-hr: theme('colors.neutral.700');
  --tw-prose-quotes: theme('colors.neutral.300');
  --tw-prose-quote-borders: theme('colors.neutral.500');
  --tw-prose-captions: theme('colors.neutral.400');
  --tw-prose-th-borders: theme('colors.neutral.600');
  --tw-prose-td-borders: theme('colors.neutral.700');
}

html.dark .prose-neutral h2,
html.dark .prose-neutral h3,
html.dark .prose-neutral h4 {
  color: theme('colors.white');
}

html.dark .prose-neutral blockquote {
  background-color: theme('colors.neutral.800');
}

/* ===== WORDPRESS CONTENT FIXES ===== */

/* Fix WordPress inline images breaking container width */
.prose figure,
.prose figure.wp-caption,
.prose figure.aligncenter {
  max-width: 100% !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.prose figure img,
.prose figure.wp-caption img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

.prose figcaption,
.prose .wp-caption-text {
  font-size: 0.875rem;
  color: theme('colors.neutral.500');
  text-align: center;
  margin-top: 0.5rem;
}

html.dark .prose figcaption,
html.dark .prose .wp-caption-text {
  color: theme('colors.neutral.400');
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */