:root {
  --header-bg: #000000;
  --header-link-color: #FFFFFF;
  --header-link-hover: #DDB373;
  --header-button-bg: #000000;
  --header-button-text: #FFFFFF;
  --hero-title-color: #000000;
  --about-bg: #ddd3c1;
  --about-text: #000000;
  --about-button-bg: #000000;
  --about-button-text: #FFFFFF;
  --about-button-text-alt: #ddb373;
  --profile-bg: #FFFFFF;
  --profile-text: #000000;
  --services-bg: #ddd3c1;
  --services-title-text: #000000;
  --services-button-bg: #000000;
  --services-button-text: #ddb373;
  --contact-bg: #ddd3c1;
  --contact-text: #000000;
  --contact-input-border: #4A403A;
  --contact-input-bg: #FFFFFF;
  --contact-button-bg: #000000;
  --contact-button-text: #ddb373;
  --footer-bg: #757575;
  --footer-text: #afaaaf;
  --footer-link: #afaaaf;
}

body {
  font-family: 'Roboto', sans-serif;
}

.hero-bg {
  background-size: cover;
  background-position: center;
}

.noto-serif {
  font-family: 'Noto Serif Thai', serif;
}

.menu-link {
  transition: color 0.3s ease, transform 0.2s ease;
}
.menu-link:hover {
  transform: translateY(-2px);
}

/* Borde por defecto */
input,
textarea {
  border-color: var(--contact-input-border);
}

/* Solo al intentar enviar y detectar inválidos */
#contact-form.submitted input:invalid,
#contact-form.submitted textarea:invalid {
  border-color: #e3342f !important;
}