/* ==========================================================================
   CIRCUIT LAW UTILITIES
   Keep these low-specificity and composable.
   ========================================================================== */

/* Layout */
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-wrap { flex-wrap: wrap; }
.u-items-center { align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-justify-center { justify-content: center; }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }

/* Text */
.u-text-left { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right { text-align: right; }
.u-text-sm { font-size: var(--font-size-sm); }
.u-text-lg { font-size: var(--font-size-lg); }

/* Spacing */
.u-mb-2 { margin-bottom: var(--space-2); }
.u-mb-3 { margin-bottom: var(--space-3); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-p-2 { padding: var(--space-2); }
.u-p-3 { padding: var(--space-3); }
.u-p-4 { padding: var(--space-4); }
.u-p-6 { padding: var(--space-6); }

/* Radius + shadow */
.u-radius-sm { border-radius: var(--radius-sm); }
.u-radius-md { border-radius: var(--radius-md); }
.u-radius-lg { border-radius: var(--radius-lg); }
.u-shadow-sm { box-shadow: var(--shadow-sm); }
.u-shadow-md { box-shadow: var(--shadow-md); }

/* Sizing + visibility */
.u-w-full { width: 100%; }
.u-max-w-md { max-width: 32rem; }
.u-hidden { display: none; }

/* Tailwind-like aliases for convenience */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.p-4 { padding: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.text-lg { font-size: var(--font-size-lg); }

/* DS color utility mappings */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary,
.bg-light { background-color: var(--bg-secondary); }
.text-main,
.text-dark { color: var(--text-main); }
.text-muted-ds { color: var(--text-muted); }
.text-brand { color: var(--brand-viridian); }