/**
 * CUBE CSS - Layer 3: Utilities
 * Single-purpose classes using data attributes
 * Use sparingly - prefer composition patterns
 */

/* Padding utilities */
[data-pad="xs"] { padding: var(--space-xs); }
[data-pad="sm"] { padding: var(--space-sm); }
[data-pad="md"] { padding: var(--space-md); }
[data-pad="lg"] { padding: var(--space-lg); }

/* Block padding (vertical) */
[data-pad-block="xs"] { padding-block: var(--space-xs); }
[data-pad-block="sm"] { padding-block: var(--space-sm); }
[data-pad-block="md"] { padding-block: var(--space-md); }
[data-pad-block="lg"] { padding-block: var(--space-lg); }

/* Inline padding (horizontal) */
[data-pad-inline="xs"] { padding-inline: var(--space-xs); }
[data-pad-inline="sm"] { padding-inline: var(--space-sm); }
[data-pad-inline="md"] { padding-inline: var(--space-md); }
[data-pad-inline="lg"] { padding-inline: var(--space-lg); }

/* Text alignment */
[data-text="center"] { text-align: center; }
[data-text="left"] { text-align: left; }
[data-text="right"] { text-align: right; }

/* Font weight */
[data-weight="normal"] { font-weight: var(--font-weight-normal); }
[data-weight="bold"] { font-weight: var(--font-weight-bold); }

/* Visually hidden but accessible to screen readers */
[data-visually-hidden] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Blend modes */
[data-blend="difference"] { mix-blend-mode: difference; }
[data-blend="multiply"] { mix-blend-mode: multiply; }

/* Text utilities */
[data-nowrap] { white-space: nowrap; }
[data-uppercase] { text-transform: uppercase; }

/* Opacity utilities */
[data-opacity="subtle"] { opacity: var(--opacity-subtle); }
[data-opacity="muted"] { opacity: var(--opacity-muted); }
[data-opacity="medium"] { opacity: var(--opacity-medium); }
[data-opacity="high"] { opacity: var(--opacity-high); }
[data-opacity="full"] { opacity: var(--opacity-full); }

/* Display utilities */
.hidden { display: none; }