/* Layout Utilities */

/* Flexbox Shortcuts */
.space-y-xs > * + * { margin-top: var(--spacing-xs); }
.space-y-sm > * + * { margin-top: var(--spacing-sm); }
.space-y-md > * + * { margin-top: var(--spacing-md); }
.space-y-lg > * + * { margin-top: var(--spacing-lg); }
.space-y-xl > * + * { margin-top: var(--spacing-xl); }

.space-x-xs > * + * { margin-left: var(--spacing-xs); }
.space-x-sm > * + * { margin-left: var(--spacing-sm); }
.space-x-md > * + * { margin-left: var(--spacing-md); }
.space-x-lg > * + * { margin-left: var(--spacing-lg); }
.space-x-xl > * + * { margin-left: var(--spacing-xl); }

/* Typography Utilities */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Common Flexbox Patterns */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Width Utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* Button Block */
.btn-block {
  width: 100%;
  display: block;
}

/* Centering */
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}