/* Utility classes for consistent layout and color control */
.u-bg-primary {
  background: var(--color-primary) !important;
}

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

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

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

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

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

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

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

.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-radius-pill {
  border-radius: 999px !important;
}

.u-radius-lg {
  border-radius: 24px !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-saffron-surface);
  --card-contrast: var(--card-saffron-contrast);
  --card-muted: var(--card-saffron-muted);
  --card-border: var(--card-saffron-border);
  --card-badge-surface: var(--card-saffron-badge-surface);
  --card-badge-contrast: var(--card-saffron-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--dark {
  --surface: #1b0f16;
  --surface-contrast: #ffffff;
  --surface-muted: rgba(255, 255, 255, 0.7);
  --badge-surface: rgba(255, 255, 255, 0.16);
  --badge-contrast: #ffffff;
  --card-surface: var(--card-saffron-surface);
  --card-contrast: var(--card-saffron-contrast);
  --card-muted: var(--card-saffron-muted);
  --card-border: var(--card-saffron-border);
  --card-badge-surface: var(--card-saffron-badge-surface);
  --card-badge-contrast: var(--card-saffron-badge-contrast);
}

.section--saffron {
  --surface: var(--color-secondary);
  --surface-contrast: #3a0f23;
  --surface-muted: rgba(58, 15, 35, 0.8);
  --badge-surface: rgba(58, 15, 35, 0.12);
  --badge-contrast: #3a0f23;
  --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--aqua {
  --surface: var(--color-accent);
  --surface-contrast: #052028;
  --surface-muted: rgba(5, 32, 40, 0.7);
  --badge-surface: rgba(5, 32, 40, 0.12);
  --badge-contrast: #052028;
  --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--misted {
  --surface: var(--color-misted);
  --surface-contrast: #3a0f23;
  --surface-muted: rgba(58, 15, 35, 0.8);
  --badge-surface: rgba(58, 15, 35, 0.12);
  --badge-contrast: #3a0f23;
  --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--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--saffron {
  --card-surface: var(--card-saffron-surface);
  --card-contrast: var(--card-saffron-contrast);
  --card-muted: var(--card-saffron-muted);
  --card-border: var(--card-saffron-border);
  --card-badge-surface: var(--card-saffron-badge-surface);
  --card-badge-contrast: var(--card-saffron-badge-contrast);
}

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

.card--misted {
  --card-surface: var(--card-misted-surface);
  --card-contrast: var(--card-misted-contrast);
  --card-muted: var(--card-misted-muted);
  --card-border: var(--card-misted-border);
  --card-badge-surface: var(--card-misted-badge-surface);
  --card-badge-contrast: var(--card-misted-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);
}