/* ============================================================
   FLEASTS � UTILITIES
   File: css/core/utilities.css

   Single-purpose helper classes. All use !important to win
   specificity battles (this is intentional for utility classes).
   Keep this file additive only � never remove a class.
============================================================ */


/* ============================================================
   1. DISPLAY
============================================================ */

.d-none         { display: none !important; }
.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; }


/* ============================================================
   2. FLEX
============================================================ */

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

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

.flex-column  { flex-direction: column !important; }
.flex-wrap    { flex-wrap: wrap !important; }
.flex-1       { flex: 1 !important; }
.flex-shrink-0{ flex-shrink: 0 !important; }

.gap-1  { gap: var(--space-1) !important; }
.gap-2  { gap: var(--space-2) !important; }
.gap-3  { gap: var(--space-3) !important; }
.gap-4  { gap: var(--space-4) !important; }
.gap-5  { gap: var(--space-5) !important; }
.gap-6  { gap: var(--space-6) !important; }


/* ============================================================
   3. SPACING � MARGIN
============================================================ */

.m-0  { margin: 0 !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.mt-0 { margin-top: 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; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-5 { margin-top: var(--space-5) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mt-7 { margin-top: var(--space-7) !important; }

.mb-0 { margin-bottom: 0 !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; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-5 { margin-bottom: var(--space-5) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.mb-7 { margin-bottom: var(--space-7) !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: var(--space-1) !important; }
.ml-2 { margin-left: var(--space-2) !important; }
.ml-auto { margin-left: auto !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: var(--space-1) !important; }
.mr-2 { margin-right: var(--space-2) !important; }
.mr-auto { margin-right: auto !important; }


/* ============================================================
   4. SPACING � PADDING
============================================================ */

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

.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }

.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
.py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }


/* ============================================================
   5. TEXT
============================================================ */

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

.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize{ text-transform: capitalize !important; }

.text-nowrap    { white-space: nowrap !important; }
.text-truncate  {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.font-bold      { font-weight: 700 !important; }
.font-normal    { font-weight: 400 !important; }

.text-xs  { font-size: 12px !important; }
.text-sm  { font-size: 13px !important; }
.text-md  { font-size: 16px !important; }
.text-lg  { font-size: 20px !important; }
.text-xl  { font-size: 26px !important; }

.tracking-wide  { letter-spacing: 0.1em !important; }
.tracking-wider { letter-spacing: 0.2em !important; }


/* ============================================================
   6. COLOR
============================================================ */

.text-cream  { color: var(--cream) !important; }
.text-black  { color: var(--black) !important; }
.text-gold   { color: var(--gold) !important; }
.text-muted  { color: var(--gray-400) !important; }

.bg-black  { background: var(--black) !important; color: var(--cream) !important; }
.bg-cream  { background: var(--cream) !important; color: var(--black) !important; }
.bg-soft   { background: var(--cream-soft) !important; color: var(--black) !important; }
.bg-gold   { background: var(--gold) !important; color: var(--black) !important; }


/* ============================================================
   7. SIZE
============================================================ */

.w-100  { width: 100% !important; }
.w-auto { width: auto !important; }
.h-100  { height: 100% !important; }
.max-w-full { max-width: 100% !important; }

/* Square icon / avatar helpers */
.size-8  { width: 32px !important; height: 32px !important; }
.size-10 { width: 40px !important; height: 40px !important; }
.size-12 { width: 48px !important; height: 48px !important; }


/* ============================================================
   8. POSITIONING
============================================================ */

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

.inset-0  { inset: 0 !important; }
.top-0    { top: 0 !important; }
.left-0   { left: 0 !important; }
.right-0  { right: 0 !important; }
.bottom-0 { bottom: 0 !important; }


/* ============================================================
   9. Z-INDEX
============================================================ */

.z-0   { z-index: 0 !important; }
.z-1   { z-index: 1 !important; }
.z-10  { z-index: 10 !important; }
.z-100 { z-index: 100 !important; }
.z-999 { z-index: 999 !important; }


/* ============================================================
   10. BORDER + RADIUS
============================================================ */

.rounded-sm   { border-radius: var(--radius-sm) !important; }
.rounded      { border-radius: var(--radius-md) !important; }
.rounded-lg   { border-radius: var(--radius-lg) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

.border       { border: 1px solid var(--color-border) !important; }
.border-none  { border: none !important; }
.border-gold  { border-color: var(--gold) !important; }


/* ============================================================
   11. SHADOWS
============================================================ */

.shadow-sm { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important; }
.shadow-md { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important; }
.shadow-lg { box-shadow: 0 8px 28px rgba(0, 0, 0, 0.38) !important; }


/* ============================================================
   12. OVERFLOW
============================================================ */

.overflow-hidden { overflow: hidden !important; }
.overflow-auto   { overflow: auto !important; }
.overflow-x-auto { overflow-x: auto !important; }

/* Hide scrollbar visually but keep scrollable */
.no-scrollbar {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.no-scrollbar::-webkit-scrollbar {
    display: none !important;
}


/* ============================================================
   13. OPACITY
============================================================ */

.opacity-0   { opacity: 0 !important; }
.opacity-25  { opacity: 0.25 !important; }
.opacity-50  { opacity: 0.5 !important; }
.opacity-75  { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }


/* ============================================================
   14. POINTER
============================================================ */

.pointer         { cursor: pointer !important; }
.pointer-none    { pointer-events: none !important; }
.pointer-auto    { pointer-events: auto !important; }
.select-none     { user-select: none !important; -webkit-user-select: none !important; }


/* ============================================================
   15. ACCESSIBILITY
============================================================ */

/* Screen-reader only � visually hidden but announced */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Focus ring (used on interactive elements) */
.focus-ring:focus-visible {
    outline: 2px solid var(--gold) !important;
    outline-offset: 3px !important;
}