/* ===== UTILITY CLASSES ===== */

/* DISPLAY */
.inline { display: inline; }
.inline-block { display: inline-block; }
.visible { display: block; }

@media (max-width: 768px) {
    .hidden-mobile { display: none; }
    .visible-mobile { display: block; }
}

@media (min-width: 769px) {
    .hidden-desktop { display: none; }
    .visible-desktop { display: block; }
}

/* POSITION */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

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

.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* WIDTH */
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }

.max-w-xs { max-width: 320px; }
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 800px; }
.max-w-xl { max-width: 1024px; }
.max-w-2xl { max-width: 1280px; }
.max-w-full { max-width: 100%; }

/* HEIGHT */
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }

.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }

/* OVERFLOW */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* CURSOR */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* OPACITY */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* VISIBILITY */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* BORDER */
.border { border: 1px solid #ddd; }
.border-t { border-top: 1px solid #ddd; }
.border-r { border-right: 1px solid #ddd; }
.border-b { border-bottom: 1px solid #ddd; }
.border-l { border-left: 1px solid #ddd; }

.border-gold { border-color: var(--color-gold); }
.border-dark { border-color: var(--color-dark); }
.border-light { border-color: var(--color-light); }

.border-0 { border-width: 0; }
.border-1 { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }

.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-round); }

/* SHADOW */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.shadow-md { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.shadow-lg { box-shadow: 0 10px 25px rgba(0,0,0,0.15); }
.shadow-xl { box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
.shadow-inner { box-shadow: inset 0 2px 4px rgba(0,0,0,0.06); }

/* GRADIENT */
.gradient-dark {
    background: linear-gradient(135deg, var(--color-dark), var(--color-black));
}

.gradient-gold {
    background: linear-gradient(135deg, var(--color-gold), #B8860B);
}

.gradient-overlay {
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
}

/* TEXT TRANSFORM */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* FONT WEIGHT */
.font-thin { font-weight: 100; }
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }

/* LETTER SPACING */
.tracking-tight { letter-spacing: -0.05em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.05em; }
.tracking-wider { letter-spacing: 0.1em; }
.tracking-widest { letter-spacing: 0.2em; }

/* LINE HEIGHT */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.6; }
.leading-relaxed { line-height: 1.75; }
.leading-loose { line-height: 2; }

/* WHITESPACE */
.whitespace-normal { white-space: normal; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-line { white-space: pre-line; }
.whitespace-pre-wrap { white-space: pre-wrap; }