/**
 * CENTER PRIMITIVE
 * Based on Every Layout's Center
 * Creates a horizontally centered column with constrained measure
 *
 * Features:
 * - Centers content with auto margins
 * - Constrains width to preserve reasonable measure
 * - Supports intrinsic centering (align-items: center)
 * - Uses content-box to allow padding without affecting max width
 *
 * Usage:
 * .center - Basic centered column
 * .center[data-center="intrinsic"] - Center children based on their natural widths
 */

.center {
  box-sizing: content-box;
  margin-inline: auto;
  max-inline-size: var(--center-max, var(--measure, 60ch));
  display: flex;
  flex-direction: column;
}

/* ========================================
   DATA ATTRIBUTE VARIANTS
   ======================================== */

/* Intrinsic centering - center children based on their natural widths */
.center[data-center="intrinsic"] {
  align-items: center;
}

/* Both axes centering - horizontal and vertical */
.center[data-center="both"] {
  margin: auto;
  place-items: center;
  min-inline-size: 100%;
  min-block-size: 100%;
}

/* Add padding for breathing room */
.center[data-center-pad="standard"] {
  padding-inline: var(--s0);
  padding-block: var(--s1);
}

/* Generous padding */
.center[data-center-pad="loose"] {
  padding-inline: var(--s1);
  padding-block: var(--s2);
}