/* =====================================================
   UTILITIES
   Small, Reusable, Non-Intrusive Utility Classes
   Prefix: u-
   ===================================================== */


/* =========================================
   1) Display Utilities
   ========================================= */

.u-block { display: block; }
.u-inline { display: inline; }
.u-inline-block { display: inline-block; }
.u-flex { display: flex; }
.u-grid { display: grid; }
.u-none { display: none !important; }


/* Responsive Display (optional & lightweight) */
@media (min-width: 768px) {
    .u-md-flex { display: flex; }
    .u-md-block { display: block; }
    .u-md-none { display: none !important; }
}

@media (min-width: 1000px) {
    .u-lg-flex { display: flex; }
    .u-lg-block { display: block; }
    .u-lg-none { display: none !important; }
}


/* =========================================
   2) Text Colors
   Based on design tokens
   ========================================= */

.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-inverse   { color: var(--text-inverse) !important; }

.u-text-brand     { color: var(--brand-blue) !important; }
.u-text-success   { color: var(--brand-green) !important; }
.u-text-danger    { color: var(--brand-red) !important; }
.u-text-warning   { color: var(--brand-yellow) !important; }


/* =========================================
   3) Background Colors
   ========================================= */

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

.u-bg-brand       { background-color: var(--brand-blue) !important; }
.u-bg-success     { background-color: var(--brand-green) !important; }
.u-bg-danger      { background-color: var(--brand-red) !important; }
.u-bg-warning     { background-color: var(--brand-yellow) !important; }


/* =========================================
   4) Borders
   ========================================= */

.u-border        { border: 1px solid var(--border-color); }
.u-border-0      { border: 0 !important; }
.u-border-top    { border-top: 1px solid var(--border-color); }
.u-border-bottom { border-bottom: 1px solid var(--border-color); }
.u-border-dark   { border-color: var(--border-dark) !important; }
.u-border-light  { border-color: var(--border-light) !important; }


/* =========================================
   5) Border Radius
   ========================================= */

.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-radius-xl { border-radius: var(--radius-xl); }
.u-radius-full { border-radius: 999px; }


/* =========================================
   6) Shadows (based on your tokens)
   ========================================= */

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


/* =========================================
   7) Text Align
   ========================================= */

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


/* =========================================
   8) Width / Height Helper Classes
   ========================================= */

.u-w-100 { width: 100% !important; }
.u-h-100 { height: 100% !important; }

.u-max-w-sm { max-width: 480px; }
.u-max-w-md { max-width: 720px; }
.u-max-w-lg { max-width: 960px; }
.u-max-w-xl { max-width: 1140px; }

.u-h-auto { height: auto; }
.u-w-auto { width: auto; }


/* =========================================
   9) Overflow
   ========================================= */

.u-overflow-hidden { overflow: hidden !important; }
.u-overflow-auto   { overflow: auto !important; }
.u-overflow-scroll { overflow: scroll !important; }


/* =========================================
   10) Position Helpers
   ========================================= */

.u-relative { position: relative !important; }
.u-absolute { position: absolute !important; }
.u-fixed    { position: fixed !important; }
.u-sticky   { position: sticky !important; }