/* Utility classes for consistent layout and color control */
.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.top-50 {
  top: 50% !important;
}

.start-50 {
  left: 50% !important;
}

.translate-middle {
  transform: translate(-50%, -50%) !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.u-bg-primary {
  background: var(--color-primary) !important;
}

.u-bg-secondary {
  background: var(--color-secondary) !important;
}

.u-bg-white {
  background: var(--color-white) !important;
}

.u-bg-light {
  background: var(--color-bg-alt) !important;
}

.u-bg-soft {
  background: var(--color-bg-soft) !important;
}

.u-bg-neutral {
  background: var(--color-neutral-light) !important;
}

.u-text-white {
  color: #ffffff !important;
}

.u-text-primary {
  color: var(--color-primary) !important;
}

.u-text-muted {
  color: var(--text-muted) !important;
}

.u-text-dark {
  color: var(--color-text) !important;
}

.u-text-left {
  text-align: left !important;
}

.u-text-center {
  text-align: center !important;
}

.u-text-opacity-95 {
  opacity: 0.95 !important;
}

.u-text-opacity-85 {
  opacity: 0.85 !important;
}

.u-text-lead {
  font-size: var(--type-lead-size);
  line-height: 1.6;
}

.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-pt-md {
  padding-top: var(--space-md) !important;
}

.u-pb-md {
  padding-bottom: var(--space-md) !important;
}

.u-padding-lg {
  padding: var(--space-lg) !important;
}

.u-padding-xl {
  padding: var(--space-xl) !important;
}

.u-radius-sm {
  border-radius: 8px !important;
}

.u-radius-md {
  border-radius: 12px !important;
}

.u-radius-pill {
  border-radius: 999px !important;
}

.u-radius-lg {
  border-radius: 24px !important;
}

.u-radius-xl {
  border-radius: 32px !important;
}

.u-shadow-sm {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.u-shadow-md {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
}

/* Composed patterns */
.section--primary {
  --surface: var(--color-primary);
  --surface-contrast: var(--color-white);
  --surface-muted: rgba(255, 255, 255, 0.8);
  --badge-surface: rgba(255, 255, 255, 0.18);
  --badge-contrast: #ffffff;
  --card-surface: var(--card-secondary-surface);
  --card-contrast: var(--card-secondary-contrast);
  --card-muted: var(--card-secondary-muted);
  --card-border: var(--card-secondary-border);
  --card-badge-surface: var(--card-secondary-badge-surface);
  --card-badge-contrast: var(--card-secondary-badge-contrast);
}

.section--cards-primary {
  --card-surface: var(--card-primary-surface);
  --card-contrast: var(--card-primary-contrast);
  --card-muted: var(--card-primary-muted);
  --card-border: var(--card-primary-border);
  --card-badge-surface: var(--card-primary-badge-surface);
  --card-badge-contrast: var(--card-primary-badge-contrast);
  --card-shadow: var(--card-primary-shadow);
  --card-icon-surface: var(--card-primary-icon-surface);
}

.section--secondary {
  --surface: var(--color-secondary);
  --surface-contrast: #1a2f31;
  --surface-muted: rgba(26, 47, 49, 0.8);
  --badge-surface: rgba(26, 47, 49, 0.12);
  --badge-contrast: #1a2f31;
  --card-surface: var(--card-primary-surface);
  --card-contrast: var(--card-primary-contrast);
  --card-muted: var(--card-primary-muted);
  --card-border: var(--card-primary-border);
  --card-badge-surface: var(--card-primary-badge-surface);
  --card-badge-contrast: var(--card-primary-badge-contrast);
  --card-shadow: var(--card-primary-shadow);
  --card-icon-surface: var(--card-primary-icon-surface);
}

.section--neutral {
  --surface: var(--color-neutral-light);
  --surface-contrast: #1a2f31;
  --surface-muted: rgba(26, 47, 49, 0.75);
  --badge-surface: rgba(26, 47, 49, 0.12);
  --badge-contrast: #1a2f31;
  --card-surface: var(--card-primary-surface);
  --card-contrast: var(--card-primary-contrast);
  --card-muted: var(--card-primary-muted);
  --card-border: var(--card-primary-border);
  --card-badge-surface: var(--card-primary-badge-surface);
  --card-badge-contrast: var(--card-primary-badge-contrast);
  --card-shadow: var(--card-primary-shadow);
  --card-icon-surface: var(--card-primary-icon-surface);
}

.section--dark {
  --surface: var(--color-dark);
  --surface-contrast: var(--color-white);
  --surface-muted: rgba(255, 255, 255, 0.7);
  --badge-surface: rgba(255, 255, 255, 0.16);
  --badge-contrast: #ffffff;
  --card-surface: var(--card-secondary-surface);
  --card-contrast: var(--card-secondary-contrast);
  --card-muted: var(--card-secondary-muted);
  --card-border: var(--card-secondary-border);
  --card-badge-surface: var(--card-secondary-badge-surface);
  --card-badge-contrast: var(--card-secondary-badge-contrast);
}

.section--soft:not(.section--primary):not(.section--secondary):not(.section--neutral):not(.section--dark) {
  --surface: var(--color-bg-soft);
  --card-surface: var(--card-white-surface);
  --card-contrast: var(--card-white-contrast);
  --card-muted: var(--card-white-muted);
  --card-border: var(--card-white-border);
  --card-badge-surface: var(--card-white-badge-surface);
  --card-badge-contrast: var(--card-white-badge-contrast);
  --card-shadow: var(--shadow-md);
}

.card--primary {
  --card-surface: var(--card-primary-surface);
  --card-contrast: var(--card-primary-contrast);
  --card-muted: var(--card-primary-muted);
  --card-border: var(--card-primary-border);
  --card-badge-surface: var(--card-primary-badge-surface);
  --card-badge-contrast: var(--card-primary-badge-contrast);
  --card-shadow: var(--card-primary-shadow);
  --card-icon-surface: var(--card-primary-icon-surface);
}

.card--secondary {
  --card-surface: var(--card-secondary-surface);
  --card-contrast: var(--card-secondary-contrast);
  --card-muted: var(--card-secondary-muted);
  --card-border: var(--card-secondary-border);
  --card-badge-surface: var(--card-secondary-badge-surface);
  --card-badge-contrast: var(--card-secondary-badge-contrast);
}

.card--neutral {
  --card-surface: var(--card-neutral-surface);
  --card-contrast: var(--card-neutral-contrast);
  --card-muted: var(--card-neutral-muted);
  --card-border: var(--card-neutral-border);
  --card-badge-surface: var(--card-neutral-badge-surface);
  --card-badge-contrast: var(--card-neutral-badge-contrast);
}

.card--dark {
  --card-surface: var(--card-dark-surface);
  --card-contrast: var(--card-dark-contrast);
  --card-muted: var(--card-dark-muted);
  --card-border: var(--card-dark-border);
  --card-badge-surface: var(--card-dark-badge-surface);
  --card-badge-contrast: var(--card-dark-badge-contrast);
}

.card--white {
  --card-surface: var(--card-white-surface);
  --card-contrast: var(--card-white-contrast);
  --card-muted: var(--card-white-muted);
  --card-border: var(--card-white-border);
  --card-badge-surface: var(--card-white-badge-surface);
  --card-badge-contrast: var(--card-white-badge-contrast);
}