/* Dynamic theme colors */
:root {
  --primary-color: #2C7FFF;
  --secondary-color: #466D5D;
  --background-color: #ede6da;
  --white-color: #ffffff;
  --accent-color: #ffd369;
}

/* All headers use secondary color */
h1, h2, h3, h4, h5, h6 {
  color: var(--secondary-color);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: var(--secondary-color);
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  color: color-mix(in srgb, var(--secondary-color) 80%, black);
}

/* Footer headers use accent color */
#colophon h1, #colophon h2, #colophon h3, #colophon h4, #colophon h5, #colophon h6 {
  color: var(--accent-color);
}

#colophon h1 a, #colophon h2 a, #colophon h3 a, #colophon h4 a, #colophon h5 a, #colophon h6 a {
  color: var(--accent-color);
}

#colophon h1 a:hover, #colophon h2 a:hover, #colophon h3 a:hover, #colophon h4 a:hover, #colophon h5 a:hover, #colophon h6 a:hover {
  color: color-mix(in srgb, var(--accent-color) 80%, black);
}

/* Utility classes for dynamic colors */
.bg-primary-500 { background-color: var(--primary-color); }
.text-primary-500 { color: var(--primary-color); }
.bg-secondary-500 { background-color: var(--secondary-color); }
.text-secondary-500 { color: var(--secondary-color); }
.bg-accent-500 { background-color: var(--accent-color); }
.text-accent-500 { color: var(--accent-color); }
.bg-theme-background { background-color: var(--background-color); }
.text-theme-background { color: var(--background-color); }
.bg-white-custom { background-color: var(--white-color); }
.text-white-custom { color: var(--white-color); }

/* Hover states */
.hover\:bg-primary-500:hover { background-color: var(--primary-color); }
.hover\:bg-secondary-500:hover { background-color: var(--secondary-color); }
.hover\:bg-accent-500:hover { background-color: var(--accent-color); }
.hover\:text-primary-500:hover { color: var(--primary-color); }
.hover\:text-secondary-500:hover { color: var(--secondary-color); }
.hover\:text-accent-500:hover { color: var(--accent-color); }