/* Layout utilities */
.ph-u-flex {
  display: flex;
}

.ph-u-flex-wrap {
  flex-wrap: wrap;
}

.ph-u-items-center {
  align-items: center;
}

.ph-u-justify-between {
  justify-content: space-between;
}

.ph-u-gap-2 {
  gap: var(--ph-space-2);
}

.ph-u-gap-3 {
  gap: var(--ph-space-3);
}

.ph-u-gap-4 {
  gap: var(--ph-space-4);
}

/* Spacing utilities */
.ph-u-mt-2 {
  margin-top: var(--ph-space-2);
}

.ph-u-mt-3 {
  margin-top: var(--ph-space-3);
}

.ph-u-mt-4 {
  margin-top: var(--ph-space-4);
}

.ph-u-mb-2 {
  margin-bottom: var(--ph-space-2);
}

.ph-u-mb-3 {
  margin-bottom: var(--ph-space-3);
}

.ph-u-mb-4 {
  margin-bottom: var(--ph-space-4);
}

.ph-u-p-3 {
  padding: var(--ph-space-3);
}

.ph-u-p-4 {
  padding: var(--ph-space-4);
}

.ph-u-p-5 {
  padding: var(--ph-space-5);
}

/* Surfaces */
.ph-card {
  background: var(--ph-color-surface);
  border: 1px solid var(--ph-color-border);
  border-radius: var(--ph-radius-md);
  box-shadow: var(--ph-shadow-sm);
}

.ph-card-elevated {
  box-shadow: var(--ph-shadow-md);
}

.ph-section {
  padding: var(--ph-space-5);
}

/* Text helpers */
.ph-text-muted {
  color: var(--ph-color-text-muted);
}

.ph-text-strong {
  color: var(--ph-color-text-strong);
}

/* Button primitives for incremental adoption */
.ph-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ph-space-2);
  min-height: 38px;
  padding: 0 var(--ph-space-4);
  border-radius: var(--ph-radius-pill);
  border: 1px solid transparent;
  font-size: var(--ph-font-size-md);
  font-weight: var(--ph-font-weight-semibold);
  text-decoration: none;
}

.ph-btn-primary {
  color: #fff;
  background: var(--ph-color-primary);
  border-color: var(--ph-color-primary);
}

.ph-btn-primary:hover,
.ph-btn-primary:focus {
  color: #fff;
  background: var(--ph-color-primary-strong);
  border-color: var(--ph-color-primary-strong);
}

.ph-btn-soft {
  color: var(--ph-color-primary);
  background: #e8f7f5;
  border-color: #d4efeb;
}

.ph-btn-soft:hover,
.ph-btn-soft:focus {
  color: var(--ph-color-primary-strong);
  background: #dcf2ee;
  border-color: #cae9e4;
}