:root {
  --color-background: #f9f5f1;
  --color-beige: #e8dccf;
  --color-terracotta: #c96f5a;
  --color-titles: #4a3b35;
  --color-text: #333333;
  --color-accent: #d89c8a;
  --font-title: "Libre Baskerville", serif;
  --font-text: "Inter", sans-serif;
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-text);
}

.body-lock-scroll {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-title);
  color: var(--color-titles);
}

.font-title {
  font-family: var(--font-title);
}

.font-text {
  font-family: var(--font-text);
}

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

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

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

.text-titles {
  color: var(--color-titles);
}

.text-main {
  color: var(--color-text);
}

.text-accent {
  color: var(--color-accent);
}

.border-terracotta {
  border-color: var(--color-terracotta);
}

.nav-link {
  color: var(--color-text);
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--color-terracotta);
}

.nav-link.active {
  color: var(--color-terracotta);
  font-weight: 600;
}

.nav-dropdown a.active {
  color: var(--color-terracotta);
  font-weight: 600;
}

.subnav-link {
  color: var(--color-titles);
  transition: color 0.2s ease, background-color 0.2s ease;
  display: block;
}

.subnav-link:hover {
  background-color: var(--color-beige);
  color: var(--color-terracotta);
}

.subnav-link.active {
  color: var(--color-terracotta);
  font-weight: 600;
}

.nav-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.group:hover .nav-dropdown,
.group:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.btn-primary {
  background-color: var(--color-terracotta);
  color: var(--color-background);
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #b5604c;
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-terracotta);
  border: 1px solid var(--color-terracotta);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-secondary:hover {
  background-color: var(--color-terracotta);
  color: var(--color-background);
}

.btn-secondary-on-dark {
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.7);
}

.btn-secondary-on-dark:hover {
  background-color: #ffffff;
  color: var(--color-terracotta);
  border-color: #ffffff;
}

.footer {
  background-color: var(--color-background);
  color: var(--color-text);
}

.footer-link {
  color: var(--color-text);
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--color-terracotta);
}

.footer-note {
  color: #4f4f4f;
}

.card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.card.revealed {
  opacity: 1;
  transform: translateY(0);
}

.tabs-link {
  transition: color 0.2s ease, border-color 0.2s ease;
}

.tabs-link.active {
  color: var(--color-terracotta);
  border-color: var(--color-terracotta);
}