/* Spacing */
.pco-mt-2 { margin-top: var(--pco-2); }
.pco-mt-3 { margin-top: var(--pco-3); }
.pco-mt-4 { margin-top: var(--pco-4); }
.pco-mb-2 { margin-bottom: var(--pco-2); }
.pco-mb-3 { margin-bottom: var(--pco-3); }
.pco-mb-4 { margin-bottom: var(--pco-4); }
.pco-p-3 { padding: var(--pco-3); }
.pco-p-4 { padding: var(--pco-4); }
.pco-p-6 { padding: var(--pco-6); }

/* Layout */
.pco-flex { display: flex; }
.pco-col { flex-direction: column; }
.pco-row { flex-direction: row; }
.pco-between { justify-content: space-between; }
.pco-center { align-items: center; }
.pco-gap-2 { gap: var(--pco-2); }
.pco-gap-3 { gap: var(--pco-3); }
.pco-gap-4 { gap: var(--pco-4); }

.pco-grid { display: grid; gap: var(--pco-4); }
.pco-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 520px) {
  .pco-grid-2 { grid-template-columns: 1fr; }
}

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

/* Visibility */
.pco-hide { display: none !important; }