/* Custom styles to complement Tailwind CSS */

html {
  background: #ffffff !important;
}

:root {
  --primary-hue: 265;
  --primary-saturation: 80%;
  --primary-lightness: 50%;
  --gradient-start: #ffffff;
  --gradient-middle: #ffffff;
  --gradient-end: #ffffff;
  --text-light: #000000;
  --text-dark: #2c3e50;
  --text-muted: rgba(0, 0, 0, 0.8);
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  :root {
    --gradient-start: #ffffff;
    --gradient-middle: #ffffff;
    --gradient-end: #ffffff;
    --text-light: #000000;
    --text-dark: #2c3e50;
    --text-muted: rgba(0, 0, 0, 0.7);
  }
}

/* Main layout styling with white background */
body {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text-dark);
}

/* Header and footer styling */
header {
  background: #ffffff;
}

footer {
  background: #ffffff;
}

/* Custom animations for HTMX interactions */
#more-info:not(:empty) {
  opacity: 1 !important;
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  color: var(--text-dark);
  line-height: 1.6;
}