metabuilder/scss/global/_utilities.scss

// Utility classes - Material Design 3
// Reusable single-purpose classes using M3 tokens

// ============================================
// Color Utilities - M3 Semantic Colors
// ============================================

.text-primary { color: var(--mat-sys-primary); }
.text-on-primary { color: var(--mat-sys-on-primary); }
.text-secondary { color: var(--mat-sys-on-surface-variant); }
.text-disabled { color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent); }
.text-error { color: var(--mat-sys-error); }
.text-on-error { color: var(--mat-sys-on-error); }
.text-tertiary { color: var(--mat-sys-tertiary); }
.text-on-tertiary { color: var(--mat-sys-on-tertiary); }

// M3 Surface hierarchy backgrounds
.bg-surface { background-color: var(--mat-sys-surface); }
.bg-surface-dim { background-color: var(--mat-sys-surface-dim); }
.bg-surface-bright { background-color: var(--mat-sys-surface-bright); }
.bg-surface-container-lowest { background-color: var(--mat-sys-surface-container-lowest); }
.bg-surface-container-low { background-color: var(--mat-sys-surface-container-low); }
.bg-surface-container { background-color: var(--mat-sys-surface-container); }
.bg-surface-container-high { background-color: var(--mat-sys-surface-container-high); }
.bg-surface-container-highest { background-color: var(--mat-sys-surface-container-highest); }

// Color containers
.bg-primary { background-color: var(--mat-sys-primary); }
.bg-primary-container { background-color: var(--mat-sys-primary-container); }
.bg-secondary-container { background-color: var(--mat-sys-secondary-container); }
.bg-tertiary-container { background-color: var(--mat-sys-tertiary-container); }
.bg-error-container { background-color: var(--mat-sys-error-container); }

// Legacy aliases
.bg-default { background-color: var(--mat-sys-surface); }
.bg-paper { background-color: var(--mat-sys-surface-container-low); }
.bg-elevated { background-color: var(--mat-sys-surface-container); }

// ============================================
// Typography Utilities - M3 Type Scale
// ============================================

.font-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" on, "lnum" on;
}

// Legacy size mappings to M3
.text-xs { font-size: var(--mat-sys-label-small-size); }
.text-sm { font-size: var(--mat-sys-body-small-size); }
.text-md { font-size: var(--mat-sys-body-medium-size); }
.text-lg { font-size: var(--mat-sys-body-large-size); }
.text-xl { font-size: var(--mat-sys-title-large-size); }
.text-2xl { font-size: var(--mat-sys-headline-medium-size); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// ============================================
// Layout Utilities
// ============================================

.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

// ============================================
// Spacing Utilities (using fixed M3-aligned values)
// M3 spacing: 4, 8, 12, 16, 24, 32, 48, 64
// ============================================

.m-0 { margin: 0; }
.m-1 { margin: 4px; }
.m-2 { margin: 8px; }
.m-3 { margin: 12px; }
.m-4 { margin: 16px; }
.m-6 { margin: 24px; }
.m-8 { margin: 32px; }

// Legacy aliases
.m-xs { margin: 4px; }
.m-sm { margin: 8px; }
.m-md { margin: 16px; }
.m-lg { margin: 24px; }
.m-xl { margin: 32px; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }

// Legacy aliases
.mt-xs { margin-top: 4px; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.mt-xl { margin-top: 32px; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }

// Legacy aliases
.mb-xs { margin-bottom: 4px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }
.mb-xl { margin-bottom: 32px; }

.p-0 { padding: 0; }
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }

// Legacy aliases
.p-xs { padding: 4px; }
.p-sm { padding: 8px; }
.p-md { padding: 16px; }
.p-lg { padding: 24px; }
.p-xl { padding: 32px; }

// ============================================
// Border Radius - M3 Shape Scale
// ============================================

.rounded-none { border-radius: 0; }
.rounded-xs { border-radius: var(--mat-sys-corner-extra-small); }
.rounded-sm { border-radius: var(--mat-sys-corner-small); }
.rounded-md { border-radius: var(--mat-sys-corner-medium); }
.rounded-lg { border-radius: var(--mat-sys-corner-large); }
.rounded-xl { border-radius: var(--mat-sys-corner-extra-large); }
.rounded-full { border-radius: var(--mat-sys-corner-full); }

// ============================================
// Elevation - M3 Levels
// ============================================

.elevation-0 { box-shadow: none; }
.elevation-1 { box-shadow: var(--mat-sys-level1); }
.elevation-2 { box-shadow: var(--mat-sys-level2); }
.elevation-3 { box-shadow: var(--mat-sys-level3); }
.elevation-4 { box-shadow: var(--mat-sys-level4); }
.elevation-5 { box-shadow: var(--mat-sys-level5); }