@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  --brand-from: #667eea;
  --brand-to: #764ba2;
}

.font-inter {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}

.gradient-bg {
  background: linear-gradient(
    135deg,
    var(--brand-from) 0%,
    var(--brand-to) 100%
  );
}

.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Nav link base */
.nav-link {
  color: #4b5563; /* gray-600 */
  transition: color 0.2s ease;
}
.nav-link:hover {
  color: #2563eb; /* blue-600 */
}

/* Active nav link */
.nav-link.is-active {
  color: #111827; /* gray-900 */
  font-weight: 600;
}

/* Utility */
.hidden {
  display: none;
}

/* Focus visible for accessibility */
:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}