


.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-inline-flex { display: inline-flex; }
.d-none { display: none; }


.fd-col { flex-direction: column; }
.fw-wrap { flex-wrap: wrap; }
.ai-center { align-items: center; }
.ai-start { align-items: flex-start; }
.ai-base { align-items: baseline; }
.jc-between { justify-content: space-between; }
.jc-center { justify-content: center; }
.jc-start { justify-content: flex-start; }
.f-1 { flex: 1; }


.gap-1 { gap: var(--space-3xs); }
.gap-2 { gap: var(--space-2xs); }
.gap-3 { gap: var(--space-xs); }
.gap-4 { gap: var(--space-sm); }
.gap-5 { gap: var(--space-md); }
.gap-6 { gap: var(--space-lg); }


.m-0 { margin: 0; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mt-2 { margin-top: var(--space-2xs); }
.mt-3 { margin-top: var(--space-xs); }
.mt-4 { margin-top: var(--space-sm); }
.mt-5 { margin-top: var(--space-md); }
.mt-6 { margin-top: var(--space-lg); }
.mb-2 { margin-bottom: var(--space-2xs); }
.mb-3 { margin-bottom: var(--space-xs); }
.mb-4 { margin-bottom: var(--space-sm); }
.mb-5 { margin-bottom: var(--space-md); }
.mb-6 { margin-bottom: var(--space-lg); }


.p-4 { padding: var(--space-sm); }
.p-5 { padding: var(--space-md); }
.p-6 { padding: var(--space-lg); }
.py-3 { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.px-4 { padding-left: var(--space-sm); padding-right: var(--space-sm); }


.text-center { text-align: center; }
.text-brand { color: var(--color-brand); }
.text-deep { color: var(--color-brand-deep); }
.text-soft { color: var(--color-ink-soft); }
.text-muted { color: var(--color-ink-muted); }
.text-white { color: #fff; }
.text-up { text-transform: uppercase; letter-spacing: 0.14em; }
.fs-xs { font-size: var(--fs-xs); }
.fs-sm { font-size: var(--fs-sm); }
.fs-lg { font-size: var(--fs-lg); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.ff-head { font-family: var(--font-heading); }
.lh-tight { line-height: 1.35; }


.bg-white { background: var(--color-surface); }
.bg-soft { background: var(--color-brand-soft); }
.bg-alt { background: var(--color-surface-alt); }
.bd-line { border: 1px solid var(--color-line); }
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }


.w-full { width: 100%; }
.maxw-prose { max-width: 62ch; }
.maxw-form { max-width: 30rem; }


@media (max-width: 768px) {
  .md-d-none { display: none; }
  .md-text-center { text-align: center; }
  .md-fd-col { flex-direction: column; }
}
