.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--button-height);
  padding-inline: var(--button-padding-x);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: var(--font-medium);
  transition:
    background-color var(--transition),
    color var(--transition),
    border-color var(--transition);
}

.button-primary {
  background: var(--color-primary);
  color: #ffffff;
}

.button-primary:hover {
  background: var(--color-primary-hover);
}

.button-secondary {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text);
}

.button-secondary:hover {
  background: var(--color-surface-alt);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text);
}

.project-card {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.project-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--color-surface-alt);
}

.project-content {
  padding: var(--space-6);
}

.project-title {
  margin-bottom: var(--space-3);
  font-size: var(--text-xl);
}

.project-description {
  color: var(--color-text-muted);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.skill-card,
.service-card {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-control {
  width: 100%;
  min-height: 46px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
}

textarea.form-control {
  min-height: 150px;
  resize: vertical;
}

.form-control::placeholder {
  color: var(--color-text-muted);
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.social-link {
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.social-link:hover {
  color: var(--color-primary);
}