/* ============================================================================
   DESIGN SYSTEM — UTILITIES  (Stage 1)
   ----------------------------------------------------------------------------
   Small, reusable, single-purpose helper classes built from tokens.
   Prefixed with u- to avoid clashing with Bootstrap/AdminLTE utilities.
   ========================================================================= */

/* --- Surfaces ------------------------------------------------------------ */
.u-surface   { background-color: var(--surface); }
.u-surface-2 { background-color: var(--surface-2); }
.u-bg-app    { background-color: var(--background); }

/* --- Text colors --------------------------------------------------------- */
.u-text-primary   { color: var(--text-primary) !important; }
.u-text-secondary { color: var(--text-secondary) !important; }
.u-text-muted     { color: var(--text-muted) !important; }
.u-text-gold      { color: var(--gold-dark) !important; }
.u-text-brand     { color: var(--primary) !important; }

/* --- Accent backgrounds (soft tints) ------------------------------------- */
.u-bg-brand-soft { background-color: var(--primary-soft); }
.u-bg-gold-soft  { background-color: var(--gold-soft); }

/* --- Radius -------------------------------------------------------------- */
.u-radius-sm   { border-radius: var(--radius-sm) !important; }
.u-radius-md   { border-radius: var(--radius-md) !important; }
.u-radius-lg   { border-radius: var(--radius-lg) !important; }
.u-radius-pill { border-radius: var(--radius-pill) !important; }

/* --- Elevation ----------------------------------------------------------- */
.u-shadow-sm { box-shadow: var(--shadow-sm) !important; }
.u-shadow-md { box-shadow: var(--shadow-md) !important; }
.u-shadow-lg { box-shadow: var(--shadow-lg) !important; }
.u-shadow-none { box-shadow: none !important; }

/* --- Borders ------------------------------------------------------------- */
.u-border        { border: var(--border-width) solid var(--border-color) !important; }
.u-border-top    { border-top: var(--border-width) solid var(--border-color) !important; }
.u-border-strong { border-color: var(--border-color-strong) !important; }

/* --- Interaction --------------------------------------------------------- */
.u-transition { transition: var(--transition-base); }
.u-hover-lift { transition: transform var(--animation-speed) var(--ease),
                            box-shadow var(--animation-speed) var(--ease); }
.u-hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.u-clickable { cursor: pointer; }

/* --- Layout helpers ------------------------------------------------------ */
.u-full-height { min-height: 100%; }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }