/**
 * NeuraKore Utility Classes
 *
 * Helper classes for common styling needs
 * All utilities reference CSS custom properties
 */

/* ========================================
   TEXT COLORS
   ======================================== */

.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-subtle { color: var(--text-subtle) !important; }
.text-very-subtle { color: var(--text-very-subtle) !important; }
.text-accent { color: var(--color-primary) !important; }
.text-shopify { color: var(--color-shopify) !important; }

/* ========================================
   BACKGROUND COLORS
   ======================================== */

.bg-dark { background: var(--color-background) !important; }
.bg-white { background: var(--color-white) !important; }
.bg-glass { background: var(--glass-base) !important; }
.bg-glass-hover { background: var(--glass-hover) !important; }
.bg-glass-strong { background: var(--glass-strong) !important; }
.bg-accent-blue { background: var(--accent-blue) !important; }

/* ========================================
   SPACING
   ======================================== */

/* Margin utilities */
.m-0 { margin: 0 !important; }
.m-xs { margin: var(--spacing-xs) !important; }
.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }
.m-xl { margin: var(--spacing-xl) !important; }

/* Margin top */
.mt-0 { margin-top: 0 !important; }
.mt-xs { margin-top: var(--spacing-xs) !important; }
.mt-sm { margin-top: var(--spacing-sm) !important; }
.mt-md { margin-top: var(--spacing-md) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }
.mt-xxl { margin-top: var(--spacing-xxl) !important; }

/* Margin bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-xs { margin-bottom: var(--spacing-xs) !important; }
.mb-sm { margin-bottom: var(--spacing-sm) !important; }
.mb-md { margin-bottom: var(--spacing-md) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }
.mb-xxl { margin-bottom: var(--spacing-xxl) !important; }

/* Padding utilities */
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--spacing-xs) !important; }
.p-sm { padding: var(--spacing-sm) !important; }
.p-md { padding: var(--spacing-md) !important; }
.p-lg { padding: var(--spacing-lg) !important; }
.p-xl { padding: var(--spacing-xl) !important; }

/* Padding top */
.pt-0 { padding-top: 0 !important; }
.pt-xs { padding-top: var(--spacing-xs) !important; }
.pt-sm { padding-top: var(--spacing-sm) !important; }
.pt-md { padding-top: var(--spacing-md) !important; }
.pt-lg { padding-top: var(--spacing-lg) !important; }
.pt-xl { padding-top: var(--spacing-xl) !important; }

/* Padding bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-xs { padding-bottom: var(--spacing-xs) !important; }
.pb-sm { padding-bottom: var(--spacing-sm) !important; }
.pb-md { padding-bottom: var(--spacing-md) !important; }
.pb-lg { padding-bottom: var(--spacing-lg) !important; }
.pb-xl { padding-bottom: var(--spacing-xl) !important; }

/* ========================================
   TYPOGRAPHY
   ======================================== */

.font-heading { font-family: var(--font-heading) !important; }
.font-body { font-family: var(--font-body) !important; }

.font-light { font-weight: var(--font-weight-light) !important; }
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }
.font-extrabold { font-weight: var(--font-weight-extrabold) !important; }

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

/* ========================================
   LAYOUT
   ======================================== */

.container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.container-narrow {
  max-width: var(--max-width-cta);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.flex { display: flex !important; }
.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.gap-sm { gap: var(--gap-small) !important; }
.gap-md { gap: var(--gap-medium) !important; }
.gap-lg { gap: var(--gap-large) !important; }

.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr) !important; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr) !important; }

/* ========================================
   DISPLAY
   ======================================== */

.hidden { display: none !important; }
.block { display: block !important; }
.inline { display: inline !important; }
.inline-block { display: inline-block !important; }

/* ========================================
   BORDERS
   ======================================== */

.border { border: 1px solid var(--border-base) !important; }
.border-subtle { border: 1px solid var(--border-subtle) !important; }
.border-strong { border: 1px solid var(--border-strong) !important; }
.border-top { border-top: 1px solid var(--border-subtle) !important; }
.border-bottom { border-bottom: 1px solid var(--border-subtle) !important; }

.rounded { border-radius: var(--radius-small) !important; }
.rounded-md { border-radius: var(--radius-medium) !important; }
.rounded-lg { border-radius: var(--radius-large) !important; }
.rounded-pill { border-radius: var(--radius-pill) !important; }
.rounded-circle { border-radius: var(--radius-circle) !important; }

/* ========================================
   POSITIONING
   ======================================== */

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

/* ========================================
   SIZING
   ======================================== */

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

.max-w-content { max-width: var(--max-width-content) !important; }
.max-w-cta { max-width: var(--max-width-cta) !important; }
.max-w-subtitle { max-width: var(--max-width-subtitle) !important; }

/* ========================================
   TRANSITIONS & ANIMATIONS
   ======================================== */

.transition-fast { transition: var(--transition-fast) !important; }
.transition-base { transition: var(--transition-base) !important; }
.transition-slow { transition: var(--transition-slow) !important; }

.hover\:lift:hover {
  transform: translateY(-2px);
}

.hover\:lift-more:hover {
  transform: translateY(-4px);
}

/* ========================================
   Z-INDEX
   ======================================== */

.z-base { z-index: var(--z-index-base) !important; }
.z-dropdown { z-index: var(--z-index-dropdown) !important; }
.z-sticky { z-index: var(--z-index-sticky) !important; }
.z-fixed { z-index: var(--z-index-fixed) !important; }
.z-overlay { z-index: var(--z-index-overlay) !important; }
.z-modal { z-index: var(--z-index-modal) !important; }

/* ========================================
   OPACITY
   ======================================== */

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

/* ========================================
   CURSOR
   ======================================== */

.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* ========================================
   OVERFLOW
   ======================================== */

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