:root {
  --color-ivory: #FFFEF5;
  --color-warm-gray: #8C8C82;
  --color-indigo: #4B3B7A;
  --color-indigo-light: #6B5B8A;
  --color-graphite: #383838;
  --color-black: #1A1A1A;
  --color-border: #E5E3DE;
  --color-bg-alt: #F5F4F0;
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes grow {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.animate-fade {
  animation: fade 0.6s ease-in-out;
}

.animate-grow {
  animation: grow 0.8s ease-out;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-alt);
}

::-webkit-scrollbar-thumb {
  background: var(--color-indigo);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-graphite);
}

.text-brand { color: var(--color-indigo); }
.bg-brand { background-color: var(--color-indigo); }
.border-brand { border-color: var(--color-indigo); }
.bg-ivory { background-color: var(--color-ivory); }
.bg-warm { background-color: var(--color-bg-alt); }
.text-graphite { color: var(--color-graphite); }

/* Form validation: default border matches theme when error is cleared */
#contact-form input.border-gray-300,
#contact-form textarea.border-gray-300 {
  border-color: #E5E3DE;
}