/* Padding all */
.u-p-xs {
  padding: var(--space-xs) !important;
}
.u-p-sm {
  padding: var(--space-sm) !important;
}
.u-p-md {
  padding: var(--space-md) !important;
}
.u-p-lg {
  padding: var(--space-lg) !important;
}
.u-p-xl {
  padding: var(--space-xl) !important;
}
.u-p-2xl {
  padding: var(--space-2xl) !important;
}
/* Margin 0 utilities */
.u-m-0 {
  margin: 0 !important;
}
.u-mt-0 {
  margin-top: 0 !important;
}
.u-mb-0 {
  margin-bottom: 0 !important;
}
.u-ml-0 {
  margin-left: 0 !important;
}
.u-mr-0 {
  margin-right: 0 !important;
}
.u-mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.u-my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Padding 0 utilities */
.u-p-0 {
  padding: 0 !important;
}
.u-pt-0 {
  padding-top: 0 !important;
}
.u-pb-0 {
  padding-bottom: 0 !important;
}
.u-pl-0 {
  padding-left: 0 !important;
}
.u-pr-0 {
  padding-right: 0 !important;
}
.u-px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.u-py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Margin auto utilities */

.u-m-auto {
  margin: auto !important;
}
.u-mt-auto {
  margin-top: auto !important;
}
.u-mb-auto {
  margin-bottom: auto !important;
}
.u-ml-auto {
  margin-left: auto !important;
}
.u-mr-auto {
  margin-right: auto !important;
}
.u-mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.u-my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* Padding auto utilities */
.u-p-auto {
  padding: auto !important;
}
.u-pt-auto {
  padding-top: auto !important;
}
.u-pb-auto {
  padding-bottom: auto !important;
}
.u-pl-auto {
  padding-left: auto !important;
}
.u-pr-auto {
  padding-right: auto !important;
}
.u-px-auto {
  padding-left: auto !important;
  padding-right: auto !important;
}
.u-py-auto {
  padding-top: auto !important;
  padding-bottom: auto !important;
}
/* Padding Left */
.u-pl-xs {
  padding-left: var(--space-xs);
}
.u-pl-sm {
  padding-left: var(--space-sm);
}
.u-pl-md {
  padding-left: var(--space-md);
}
.u-pl-lg {
  padding-left: var(--space-lg);
}
.u-pl-xl {
  padding-left: var(--space-xl);
}
.u-pl-2xl {
  padding-left: var(--space-2xl);
}

/* Margin Left */
.u-ml-xs {
  margin-left: var(--space-xs);
}
.u-ml-sm {
  margin-left: var(--space-sm);
}
.u-ml-md {
  margin-left: var(--space-md);
}
.u-ml-lg {
  margin-left: var(--space-lg);
}
.u-ml-xl {
  margin-left: var(--space-xl);
}
.u-ml-2xl {
  margin-left: var(--space-2xl);
}

/* Margin Top & Bottom (mtb) */
.u-my-xs {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.u-my-sm {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.u-my-md {
  margin-top: var(--space-md) !important;
  margin-bottom: var(--space-md);
}
.u-my-lg {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.u-my-xl {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xl);
}
.u-my-2xl {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

/* Padding Top & Bottom (ptb) */
.u-ptb-xs {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}
.u-ptb-sm {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}
.u-ptb-md {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}
.u-ptb-lg {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.u-ptb-xl {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.u-ptb-2xl {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}
/* Padding Right */
.u-pr-xs {
  padding-right: var(--space-xs);
}
.u-pr-sm {
  padding-right: var(--space-sm);
}
.u-pr-md {
  padding-right: var(--space-md);
}
.u-pr-lg {
  padding-right: var(--space-lg);
}
.u-pr-xl {
  padding-right: var(--space-xl);
}
.u-pr-2xl {
  padding-right: var(--space-2xl);
}
/* Background color utility */
/* Background color utility */
.u-bg-pink {
  background: #fffafb !important;
}
.u-text-center {
  text-align: center !important;
}
.u-text-right {
  text-align: right !important;
}
.u-text-left {
  text-align: left !important;
}

/* ========== Utility Classes (using theme variables) ========== */

/* Margin */

.u-mb-xs {
  margin-bottom: var(--space-xs) !important;
}
.u-mb-sm {
  margin-bottom: var(--space-sm) !important;
}
.u-mb-md {
  margin-bottom: var(--space-md) !important;
}
.u-mb-lg {
  margin-bottom: var(--space-lg) !important;
}
.u-mb-xl {
  margin-bottom: var(--space-xl) !important;
}
.u-mb-2xl {
  margin-bottom: var(--space-2xl) !important;
}

.u-mt-xs {
  margin-top: var(--space-xs) !important;
}
.u-mt-sm {
  margin-top: var(--space-sm) !important;
}
.u-mt-md {
  margin-top: var(--space-md) !important;
}
.u-mt-lg {
  margin-top: var(--space-lg) !important;
}
.u-mt-xl {
  margin-top: var(--space-xl) !important;
}
.u-mt-2xl {
  margin-top: var(--space-2xl) !important;
}
.u-mr-xs {
  margin-right: var(--space-xs) !important;
}
.u-mr-sm {
  margin-right: var(--space-sm) !important;
}

/* Padding */
.u-py-xs {
  padding-top: var(--space-xs) !important;
  padding-bottom: var(--space-xs) !important;
}
.u-py-sm {
  padding-top: var(--space-sm) !important;
  padding-bottom: var(--space-sm) !important;
}
.u-py-md {
  padding-top: var(--space-md) !important;
  padding-bottom: var(--space-md) !important;
}
.u-py-lg {
  padding-top: var(--space-lg) !important;
  padding-bottom: var(--space-lg) !important;
}
.u-py-xl {
  padding-top: var(--space-xl) !important;
  padding-bottom: var(--space-xl) !important;
}

.u-px-xs {
  padding-left: var(--space-xs) !important;
  padding-right: var(--space-xs) !important;
}
.u-px-sm {
  padding-left: var(--space-sm) !important;
  padding-right: var(--space-sm) !important;
}
.u-px-md {
  padding-left: var(--space-md) !important;
  padding-right: var(--space-md) !important;
}
.u-px-lg {
  padding-left: var(--space-lg) !important;
  padding-right: var(--space-lg) !important;
}
.u-px-xl {
  padding-left: var(--space-xl) !important;
  padding-right: var(--space-xl) !important;
}

/* Text color */
.u-text-primary {
  color: var(--color-primary) !important;
}
.u-text-secondary {
  color: var(--color-secondary) !important;
}
.u-text-muted {
  color: var(--color-muted) !important;
}
.u-text-error {
  color: var(--color-error) !important;
}
.u-text-success {
  color: var(--color-success) !important;
}

/* Background color */
.u-bg-primary {
  background: var(--color-primary) !important;
}
.u-bg-secondary {
  background: var(--color-secondary) !important;
}
.u-bg-muted {
  background: var(--color-muted) !important;
}

/* Font weight */
.u-fw-bold {
  font-weight: var(--font-weight-bold) !important;
}
.u-fw-medium {
  font-weight: var(--font-weight-medium) !important;
}
.u-fw-normal {
  font-weight: var(--font-weight-normal) !important;
}

/* Font size */
.u-fs-xs {
  font-size: var(--font-xs) !important;
}
.u-fs-sm {
  font-size: var(--font-sm) !important;
}
.u-fs-base {
  font-size: var(--font-base) !important;
}
.u-fs-lg {
  font-size: var(--font-lg) !important;
}
.u-fs-xl {
  font-size: var(--font-xl) !important;
}

/* Line height */
.u-lh-tight {
  line-height: var(--line-height-tight) !important;
}
.u-lh-normal {
  line-height: var(--line-height-normal) !important;
}
.u-lh-loose {
  line-height: var(--line-height-loose) !important;
}

/* Letter spacing */
.u-ls-tight {
  letter-spacing: var(--letter-spacing-tight) !important;
}
.u-ls-normal {
  letter-spacing: var(--letter-spacing-normal) !important;
}
.u-ls-wide {
  letter-spacing: var(--letter-spacing-wide) !important;
}
.u-ls-widest {
  letter-spacing: var(--letter-spacing-widest) !important;
}

/* Border radius */
.u-radius-sm {
  border-radius: var(--radius-sm) !important;
}
.u-radius-md {
  border-radius: var(--radius-md) !important;
}
.u-radius-lg {
  border-radius: var(--radius-lg) !important;
}
.u-radius-full {
  border-radius: var(--radius-full) !important;
}

/* Width/height */
.u-w-full {
  width: 100% !important;
}
.u-h-full {
  height: 100% !important;
}

/* Flex/center */
.u-flex-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Display */
.u-block {
  display: block !important;
}
.u-inline {
  display: inline !important;
}
.u-inline-block {
  display: inline-block !important;
}

/* Visually hidden (for a11y) */
.u-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.u-border-red {
  border: 1px solid var(--color-red) !important;
}
.u-border-pink {
  border: 1px solid var(--color-pink) !important;
}
.u-serif {
  font-family: var(--font-family-serif, "Noto Serif JP", serif) !important;
}
.u-sp-only {
  display: none;
  @media (max-width: 768px) {
    display: block;
  }
}
.u-pc-only {
  @media (max-width: 768px) {
    display: block;
  }
}