/* Dark Mode Theme - UK Fence Calculator */
/* This CSS overrides the light mode styles when body has 'dark' class */

:root {
  --dm-bg-primary: #0c0a09;
  --dm-bg-secondary: #1c1917;
  --dm-bg-surface: #24211d;
  --dm-bg-surface-raised: #292524;
  --dm-bg-overlay: rgba(15, 61, 43, 0.8);
  --dm-text-primary: #fafaf9;
  --dm-text-secondary: #e7e5e4;
  --dm-text-muted: #a8a29e;
  --dm-text-inverse: #1c1917;
  --dm-border-primary: #44403c;
  --dm-border-secondary: #292524;
  --dm-brand-primary: #22c55e;
  --dm-brand-primary-hover: #4ade80;
  --dm-brand-primary-active: #16a34a;
  --dm-brand-accent: #c17847;
  --dm-button-primary-bg: #22c55e;
  --dm-button-primary-text: #1c1917;
  --dm-button-secondary-bg: #1a2e1a;
  --dm-button-accent-bg: #c17847;
  --dm-input-bg: #1c1917;
  --dm-input-border: #44403c;
  --dm-input-text: #fafaf9;
  --dm-shadow: rgba(0, 0, 0, 0.5);
  --dm-white: #ffffff;
}

body.dark {
  background-color: var(--dm-bg-primary) !important;
  color: var(--dm-text-primary) !important;
}

/* Theme Toggle Button - uses classes to avoid layout shifts */
.theme-toggle-btn,
#theme-toggle {
  transition: background-color 0.2s ease, color 0.2s ease;
  box-sizing: border-box;
}

#theme-toggle.theme-light {
  background: rgba(0, 0, 0, 0.08) !important;
}

#theme-toggle.theme-light:hover {
  background: rgba(0, 0, 0, 0.15) !important;
}

#theme-toggle.theme-light .moon-icon {
  color: #374151;
}

#theme-toggle.theme-light .sun-icon {
  color: #f59e0b;
}

#theme-toggle.theme-dark {
  background: rgba(255, 255, 255, 0.15) !important;
}

#theme-toggle.theme-dark:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

#theme-toggle.theme-dark .moon-icon {
  color: #e7e5e4;
}

#theme-toggle.theme-dark .sun-icon {
  color: #fbbf24;
}

/* Header Dark Mode */
body.dark header,
body.dark .bg-white,
body.dark .bg-white\/95,
body.dark header.bg-white,
body.dark header.bg-white\/95 {
  background-color: var(--dm-bg-secondary) !important;
  border-color: var(--dm-border-primary) !important;
}

body.dark header {
  box-shadow: 0 4px 6px -1px var(--dm-shadow), 0 2px 4px -2px var(--dm-shadow);
}

/* Navigation Links Dark Mode */
body.dark nav button,
body.dark .text-neutral-700,
body.dark .text-gray-700,
body.dark .text-gray-600 {
  color: var(--dm-text-secondary) !important;
}

body.dark nav button:hover,
body.dark .hover\:text-primary-700:hover {
  color: var(--dm-brand-primary) !important;
}

/* Section Backgrounds Dark Mode */
body.dark section,
body.dark .bg-primary-50,
body.dark .bg-primary-100,
body.dark .via-white,
body.dark .bg-gradient-to-br,
body.dark .bg-gray-50,
body.dark .bg-gray-100,
body.dark .bg-neutral-50 {
  background-color: var(--dm-bg-primary) !important;
  background-image: none !important;
}

/* Cards and Surfaces Dark Mode */
body.dark .bg-white,
body.dark .bg-neutral-50,
body.dark .bg-gray-50,
body.dark .bg-primary-50\/50 {
  background-color: var(--dm-bg-surface) !important;
}

/* Elevated Surfaces Dark Mode */
body.dark .bg-white\/95,
body.dark .shadow-sm,
body.dark .shadow-md {
  background-color: var(--dm-bg-surface-raised) !important;
  box-shadow: 0 4px 6px -1px var(--dm-shadow), 0 2px 4px -2px var(--dm-shadow) !important;
}

/* Text Colors Dark Mode */
body.dark .text-gray-900,
body.dark .text-gray-800,
body.dark .text-neutral-900,
body.dark .text-neutral-800,
body.dark .text-primary-800,
body.dark .text-primary-900,
body.dark .text-secondary-800 {
  color: var(--dm-text-primary) !important;
}

body.dark .text-gray-600,
body.dark .text-gray-500,
body.dark .text-neutral-600,
body.dark .text-neutral-500,
body.dark .text-secondary-600 {
  color: var(--dm-text-muted) !important;
}

body.dark .text-white,
body.dark .text-gray-100,
body.dark .text-gray-200 {
  color: var(--dm-text-primary) !important;
}

/* Border Colors Dark Mode */
body.dark .border-primary-100,
body.dark .border-gray-200,
body.dark .border-neutral-200,
body.dark .border-gray-100 {
  border-color: var(--dm-border-primary) !important;
}

body.dark .border-gray-300 {
  border-color: var(--dm-border-secondary) !important;
}

/* Primary Button Dark Mode */
body.dark .btn-primary,
body.dark .btn.btn-primary,
body.dark [class*="btn-primary"] {
  background-color: var(--dm-brand-primary) !important;
  color: var(--dm-text-inverse) !important;
  border-color: var(--dm-brand-primary) !important;
}

body.dark .btn-primary:hover,
body.dark .btn.btn-primary:hover {
  background-color: var(--dm-brand-primary-hover) !important;
  border-color: var(--dm-brand-primary-hover) !important;
}

/* Outline Button Dark Mode */
body.dark .btn-outline,
body.dark .btn.btn-outline {
  border-color: var(--dm-brand-primary) !important;
  color: var(--dm-brand-primary) !important;
  background-color: transparent !important;
}

body.dark .btn-outline:hover {
  background-color: var(--dm-brand-primary) !important;
  color: var(--dm-text-inverse) !important;
}

/* Ghost Button Dark Mode */
body.dark .btn-ghost,
body.dark .btn.btn-ghost {
  color: var(--dm-text-secondary) !important;
}

body.dark .btn-ghost:hover {
  background-color: var(--dm-bg-surface) !important;
  color: var(--dm-brand-primary) !important;
}

/* Secondary Button Dark Mode */
body.dark .btn-secondary,
body.dark .btn.btn-secondary {
  background-color: var(--dm-button-secondary-bg) !important;
  color: var(--dm-brand-primary) !important;
  border-color: var(--dm-brand-primary) !important;
}

/* Accent Button Dark Mode */
body.dark .btn-accent,
body.dark .btn-accent-bg {
  background-color: var(--dm-brand-accent) !important;
  color: var(--dm-text-inverse) !important;
}

/* Input Fields Dark Mode */
body.dark input,
body.dark select,
body.dark textarea {
  background-color: var(--dm-input-bg) !important;
  border-color: var(--dm-input-border) !important;
  color: var(--dm-input-text) !important;
}

body.dark input::placeholder,
body.dark textarea::placeholder {
  color: var(--dm-text-muted) !important;
}

body.dark input:focus,
body.dark select:focus,
body.dark textarea:focus {
  border-color: var(--dm-brand-primary) !important;
  outline: 2px solid var(--dm-brand-primary) !important;
  outline-offset: 2px !important;
}

/* Labels Dark Mode */
body.dark label,
body.dark .text-gray-700,
body.dark .text-gray-600 {
  color: var(--dm-text-secondary) !important;
}

/* Cards Dark Mode */
body.dark .rounded-xl,
body.dark .rounded-lg,
body.dark .rounded-md {
  background-color: var(--dm-bg-surface) !important;
  border-color: var(--dm-border-primary) !important;
}

/* Divider Dark Mode */
body.dark hr {
  border-color: var(--dm-border-primary) !important;
}

/* Footer Dark Mode */
body.dark footer,
body.dark .bg-secondary-900,
body.dark .bg-gray-900,
body.dark .bg-neutral-900 {
  background-color: var(--dm-bg-secondary) !important;
  color: var(--dm-text-primary) !important;
}

/* Logo Text Dark Mode */
body.dark .text-primary-800,
body.dark h5.text-primary-800 {
  color: var(--dm-brand-primary) !important;
}

/* Mobile Menu Dark Mode */
body.dark .md\:hidden {
  background-color: var(--dm-bg-secondary) !important;
}

/* Focus States Dark Mode */
body.dark :focus-visible,
body.dark *:focus-visible {
  outline-color: var(--dm-brand-primary) !important;
}

/* Links Dark Mode */
body.dark a {
  color: var(--dm-brand-primary) !important;
}

body.dark a:hover {
  color: var(--dm-brand-primary-hover) !important;
}

/* Table Dark Mode */
body.dark table,
body.dark th,
body.dark td {
  border-color: var(--dm-border-primary) !important;
  color: var(--dm-text-primary) !important;
}

body.dark th {
  background-color: var(--dm-bg-surface) !important;
}

body.dark tr:nth-child(even) {
  background-color: var(--dm-bg-surface-raised) !important;
}

/* Scrollbar Dark Mode */
body.dark ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

body.dark ::-webkit-scrollbar-track {
  background: var(--dm-bg-secondary);
}

body.dark ::-webkit-scrollbar-thumb {
  background: var(--dm-border-primary);
  border-radius: 6px;
}

body.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--dm-text-muted);
}

/* Specific Component Overrides */
body.dark .bg-success,
body.dark .bg-green-100 {
  background-color: var(--dm-bg-surface) !important;
  color: var(--dm-brand-primary) !important;
}

body.dark .bg-error,
body.dark .bg-red-100 {
  background-color: var(--dm-bg-surface) !important;
  color: #f87171 !important;
}

/* Ensure dark mode has priority */
body.dark * {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Faster transitions for interactive elements */
body.dark button,
body.dark input,
body.dark select,
body.dark a {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

/* Homepage kit: light prose on the dark section background */
body.dark #fence-kit h2,
body.dark #fence-kit h3,
body.dark #fence-kit h4 {
  color: #86efac !important;
}
body.dark #fence-kit p,
body.dark #fence-kit .fence-kit-stage,
body.dark #fence-kit .fence-kit-lede,
body.dark #fence-kit article p,
body.dark #fence-kit .fence-kit-info {
  color: #e7e5e4 !important;
}
body.dark #fence-kit article ul,
body.dark #fence-kit .fence-kit-note {
  color: #a8a29e !important;
}
body.dark #fence-kit article {
  background: #1c1917 !important;
  border-color: #44403c !important;
}
body.dark #fence-kit figure {
  background: #292524 !important;
  border-color: #44403c !important;
}
body.dark #fence-kit .fence-kit-badge {
  background: #1c1917 !important;
  color: #86efac !important;
  border-color: #166534 !important;
}
body.dark #fence-kit article > a {
  background: #16a34a !important;
  color: #052e16 !important;
}
body.dark #fence-kit article > a:hover {
  background: #22c55e !important;
  color: #052e16 !important;
}
body.dark #fence-kit .fence-kit-info {
  background: #1c1917 !important;
  border-left-color: #22c55e !important;
}