/* website/static/css/base/utils.css */

/* ------------------------------------------------------------
   GLOBAL UTILITY SYSTEM (Unified + Theme-Aware)
   website/static/css/base/utils.css
------------------------------------------------------------
   PURPOSE:
   A clean, predictable, atomic utility library used across the
   entire application. Complements layout.css and variables.css.

   GOALS:
   ✓ Zero hardcoded colors
   ✓ 100% variable-driven
   ✓ No duplication with layout.css
   ✓ Mobile-friendly
   ✓ Consistent naming + behavior
------------------------------------------------------------ */


/* ============================================================
   1) SPACING UTILITIES
   ------------------------------------------------------------
   Uses global spacing variables from variables.css
============================================================ */
.m-0 { margin: 0 !important; }

.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }

.mb-1 { margin-bottom: var(--space-1) !important; }
.mb-2 { margin-bottom: var(--space-2) !important; }
.mb-3 { margin-bottom: var(--space-3) !important; }

.p-1 { padding: var(--space-1) !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }



/* ============================================================
   2) TEXT UTILITIES
============================================================ */
.text-center { text-align: center !important; }
.text-left   { text-align: left !important; }
.text-right  { text-align: right !important; }

.text-muted   { color: var(--color-muted) !important; }
.text-accent  { color: var(--color-accent) !important; }
.text-gold    { color: var(--color-gold) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger  { color: var(--color-danger) !important; }



/* ============================================================
   3) DISPLAY UTILITIES
============================================================ */
.d-block        { display: block !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex !important; }
.d-grid         { display: grid !important; }
.hidden         { display: none !important; }



/* ============================================================
   4) FLEX UTILITIES
============================================================ */
.flex-center {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex !important;
  flex-direction: column;
}



/* ============================================================
   5) POSITION UTILITIES
============================================================ */
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed    { position: fixed !important; }
.sticky   { position: sticky !important; }



/* ============================================================
   6) WIDTH & HEIGHT UTILITIES
============================================================ */
.w-100      { width: 100% !important; }
.h-100      { height: 100% !important; }
.max-w-100  { max-width: 100% !important; }
.max-h-100  { max-height: 100% !important; }



/* ============================================================
   7) OVERFLOW UTILITIES
============================================================ */
.overflow-hidden { overflow: hidden !important; }
.overflow-auto   { overflow: auto !important; }



/* ============================================================
   8) CURSOR UTILITIES
============================================================ */
.cursor-pointer      { cursor: pointer !important; }
.cursor-default      { cursor: default !important; }
.cursor-not-allowed  { cursor: not-allowed !important; }



/* ============================================================
   9) Z-INDEX UTILITIES
============================================================ */
.z-0    { z-index: 0 !important; }
.z-10   { z-index: 10 !important; }
.z-50   { z-index: 50 !important; }
.z-100  { z-index: 100 !important; }
.z-max  { z-index: 999 !important; }