@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');
@import url('/theme.css');

.nav-link {
  color: var(--color-muted);
  transition: .2s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 9%, transparent);
}

.input {
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 14px;
  padding: 13px 15px;
  transition: .2s ease;
}

.input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent);
  outline: none;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-radius: 14px;
  padding: 13px 18px;
  font-weight: 700;
  transition: .2s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 700;
}

.pill {
  border-radius: 999px;
}

.avatar {
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary), #a59cff);
  color: white;
  font-weight: 800;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

input[type='checkbox'] {
  accent-color: var(--color-primary);
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 88px;
  z-index: 50;
  max-width: 340px;
}

@media (min-width: 768px) {
  .toast {
    bottom: 24px;
  }
}