:root {
  --theme-main: #ffffff;
  --theme-alt: #f7faf5;
  --theme-card: #f0f5eb;
  --theme-border: #e2e8d8;
  --theme-text: #1a202c;
  --theme-text-secondary: #4a5568;
  --theme-text-muted: #64748b;
}

html[data-theme="dark"] {
  --theme-main: #0f172a;
  --theme-alt: #1e293b;
  --theme-card: #172033;
  --theme-border: #334155;
  --theme-text: #f1f5f9;
  --theme-text-secondary: #cbd5e1;
  --theme-text-muted: #94a3b8;
}

/* Shared theme controls */
.theme-header-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.75rem;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--theme-border);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--theme-text-secondary);
  cursor: pointer;
}

.theme-toggle:hover {
  border-color: #a5c62c;
  background: var(--theme-alt);
  color: var(--theme-text);
}

.theme-toggle:focus-visible {
  outline: 2px solid #a5c62c;
  outline-offset: 2px;
}

.theme-toggle-desktop {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
}

.theme-toggle-mobile {
  width: 100%;
  min-height: 2.75rem;
  justify-content: flex-start;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.theme-toggle-icons,
.theme-icon {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.theme-icon-sun {
  display: none;
}

html[data-theme="dark"] .theme-icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-icon-sun {
  display: block;
}

@media (min-width: 1024px) {
  .theme-toggle-desktop {
    display: inline-flex;
  }
}

/* Dark surfaces */
html[data-theme="dark"] body,
html[data-theme="dark"] body.bg-white,
html[data-theme="dark"] header.bg-white,
html[data-theme="dark"] main.bg-white,
html[data-theme="dark"] section.bg-white {
  background-color: var(--theme-main);
}

html[data-theme="dark"] .bg-white {
  background-color: var(--theme-card);
}

html[data-theme="dark"] .bg-alt-bg,
html[data-theme="dark"] .bg-altBg,
html[data-theme="dark"] [class~="bg-[#F7FAF5]"] {
  background-color: var(--theme-alt);
}

html[data-theme="dark"] .bg-card-bg,
html[data-theme="dark"] .bg-cardBg,
html[data-theme="dark"] [class~="bg-[#F0F5EB]"] {
  background-color: var(--theme-card);
}

html[data-theme="dark"] .bg-badge-bg,
html[data-theme="dark"] [class~="bg-[#E8F5E0]"] {
  background-color: rgba(165, 198, 44, 0.14);
}

html[data-theme="dark"] .bg-divider {
  background-color: var(--theme-border);
}

/* Dark typography */
html[data-theme="dark"] .text-primary-text,
html[data-theme="dark"] .text-text,
html[data-theme="dark"] [class~="text-[#1A202C]"] {
  color: var(--theme-text);
}

html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .text-secondary-text,
html[data-theme="dark"] [class~="text-[#4A5568]"] {
  color: var(--theme-text-secondary);
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-muted-text,
html[data-theme="dark"] .text-footer-text,
html[data-theme="dark"] [class~="text-[#64748B]"] {
  color: var(--theme-text-muted);
}

html[data-theme="dark"] .text-petro {
  color: #9cc7df;
}

html[data-theme="dark"] [style*="color: #6B8E23"] {
  color: #b8d66a !important;
}

html[data-theme="dark"] [style*="color: #7B68EE"] {
  color: #a78bfa !important;
}

/* Dark borders, hovers, and elevation */
html[data-theme="dark"] .border-divider,
html[data-theme="dark"] [class~="border-[#D0D9C8]"],
html[data-theme="dark"] [class~="border-[#E2E8D8]"] {
  border-color: var(--theme-border);
}

html[data-theme="dark"] .hover\:bg-alt-bg:hover,
html[data-theme="dark"] .hover\:bg-gray-50:hover {
  background-color: #253247;
}

html[data-theme="dark"] .hover\:text-primary-text:hover,
html[data-theme="dark"] .hover\:text-\[\#1A202C\]:hover {
  color: var(--theme-text);
}

html[data-theme="dark"] .shadow-lg,
html[data-theme="dark"] .hover\:shadow-lg:hover,
html[data-theme="dark"] .hover\:shadow-xl:hover {
  --tw-shadow-color: rgba(0, 0, 0, 0.35);
}

/* Keep brand call-to-action buttons legible on dark pages. */
html[data-theme="dark"] .bg-primary.text-primary-text,
html[data-theme="dark"] .bg-primary.text-text,
html[data-theme="dark"] .bg-primary[class~="text-[#1A202C]"],
html[data-theme="dark"] .hover\:bg-primary:hover {
  color: #0f172a;
}

html[data-theme="dark"] section[class~="bg-[#A5C62C]"] [class~="text-[#1A202C]"],
html[data-theme="dark"] section[class~="bg-[#A5C62C]"] [class~="text-[#1A202C]/80"] {
  color: #1a202c;
}

html[data-theme="dark"] section[class~="bg-[#A5C62C]"] a.bg-white,
html[data-theme="dark"] section[class~="bg-[#3B82F6]"] a.bg-white {
  background-color: #f8fafc;
}

html[data-theme="dark"] section[class~="bg-[#A5C62C]"] a.bg-white {
  color: #6b7f12;
}

html[data-theme="dark"] section[class~="bg-[#3B82F6]"] a.bg-white {
  color: #2563eb;
}

/* Contact hero uses a light inline overlay in the source page. */
html[data-theme="dark"] [style*="background-color: #F7FAF5D9"] {
  background-color: rgba(15, 23, 42, 0.86) !important;
}

/* Native controls inherit the selected color scheme if they are added later. */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  border-color: var(--theme-border);
  background-color: var(--theme-card);
  color: var(--theme-text);
}

/* Enable the requested short transition only after initial paint. */
html.theme-transition-ready body,
html.theme-transition-ready header,
html.theme-transition-ready footer,
html.theme-transition-ready nav,
html.theme-transition-ready section,
html.theme-transition-ready [class*="bg-"],
html.theme-transition-ready [class*="text-"],
html.theme-transition-ready [class*="border-"],
html.theme-transition-ready .theme-toggle {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transition-ready body,
  html.theme-transition-ready header,
  html.theme-transition-ready footer,
  html.theme-transition-ready nav,
  html.theme-transition-ready section,
  html.theme-transition-ready [class*="bg-"],
  html.theme-transition-ready [class*="text-"],
  html.theme-transition-ready [class*="border-"],
  html.theme-transition-ready .theme-toggle {
    transition-duration: 0.01ms;
  }
}