/* STEM MUN Colors & Typography */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Varela+Round&display=swap');

:root {
  --primary-color: #420c02;
  --primary-dark: #2e0801;
  --secondary-color: #dcd8cc;
  --secondary-warm: #cdb06f;
  --neutral-color: #ffffff;
  --accent-color: #48382f;
  --bg-soft: #fcfbfa;
}

body {
  font-family: 'Varela Round', sans-serif;
  color: var(--accent-color);
  background-color: var(--bg-soft);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--primary-color);
}

.text-primary-mun {
  color: var(--primary-color);
}

.bg-primary-mun {
  background-color: var(--primary-color);
}

.hover\:bg-primary-dark-mun:hover {
  background-color: var(--primary-dark);
}

.text-gold-mun {
  color: var(--secondary-warm);
}

.bg-gold-mun {
  background-color: var(--secondary-warm);
}

.border-gold-mun {
  border-color: var(--secondary-warm);
}

.bg-cream-mun {
  background-color: var(--secondary-color);
}

.bg-soft-mun {
  background-color: var(--bg-soft);
}

/* Custom styles matching the elegant brand theme */
.btn-mun-primary {
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 0.6rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.btn-mun-primary:hover {
  background-color: var(--primary-dark);
}

.btn-mun-secondary {
  background-color: transparent;
  color: var(--primary-color);
  padding: 0.6rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  border: 2px solid var(--primary-color);
  transition: all 0.2s ease;
}

.btn-mun-secondary:hover {
  background-color: var(--primary-color);
  color: #ffffff;
}

.btn-mun-gold {
  background-color: var(--secondary-warm);
  color: var(--primary-color);
  padding: 0.6rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-mun-gold:hover {
  opacity: 0.9;
}

/* Custom form styling */
.form-input-mun {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--secondary-color);
  border-radius: 0.375rem;
  outline: none;
  background-color: #ffffff;
  color: var(--accent-color);
  transition: border-color 0.2s ease;
}

.form-input-mun:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(66, 12, 2, 0.1);
}