/* =============================================================================
   NEUMORPHIC DESIGN SYSTEM - UTILITY CLASSES
   Helper classes for common neumorphic patterns
   ============================================================================= */

/* ===== Surface Utilities ===== */

/* Raised surface (convex) */
.neo-surface {
    background: var(--color-bg);
    box-shadow: var(--shadow-flat-sm);
    border-radius: var(--radius-lg);
}

.neo-surface-lg {
    background: var(--color-bg);
    box-shadow: var(--shadow-flat);
    border-radius: var(--radius-2xl);
}

.neo-surface-xs {
    background: var(--color-bg);
    box-shadow: var(--shadow-flat-xs);
    border-radius: var(--radius-md);
}

/* Inset surface (concave) */
.neo-inset {
    background: var(--color-bg);
    box-shadow: var(--shadow-pressed);
    border-radius: var(--radius-lg);
}

.neo-inset-sm {
    background: var(--color-bg);
    box-shadow: var(--shadow-pressed-sm);
    border-radius: var(--radius-md);
}

.neo-inset-xs {
    background: var(--color-bg);
    box-shadow: var(--shadow-pressed-xs);
    border-radius: var(--radius-sm);
}

/* ===== Gradient Backgrounds ===== */

.bg-gradient-light {
    background: linear-gradient(145deg, var(--color-bg-light), #E6E9EC);
}

.bg-primary-gradient {
    background: var(--color-primary-gradient);
}

.bg-success-gradient {
    background: var(--color-success-gradient);
}

/* ===== Text Utilities ===== */

.text-primary {
    color: var(--color-text-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-disabled {
    color: var(--color-text-disabled);
}

.text-placeholder {
    color: var(--color-text-placeholder);
}

.text-shadow-neo {
    text-shadow: var(--text-shadow-heading);
}

/* ===== Spacing Utilities ===== */

.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }
.gap-2xl { gap: var(--spacing-2xl); }
.gap-3xl { gap: var(--spacing-3xl); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }
.p-3xl { padding: var(--spacing-3xl); }

.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }
.m-2xl { margin: var(--spacing-2xl); }
.m-3xl { margin: var(--spacing-3xl); }

/* ===== Border Radius Utilities ===== */

.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-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ===== Transition Utilities ===== */

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

/* ===== Hover State Utilities ===== */

.hover-lift {
    transition: var(--transition-base);
}

.hover-lift:hover {
    box-shadow: var(--shadow-hover-sm);
    transform: translateY(-2px);
}

.hover-lift-lg:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}

/* ===== Flex Utilities ===== */

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }

/* ===== Display Utilities ===== */

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

/* ===== Position Utilities ===== */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* ===== Cursor Utilities ===== */

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab { cursor: grab; }

/* ===== Text Alignment ===== */

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

/* ===== Font Weight Utilities ===== */

.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* ===== Width Utilities ===== */

.w-full { width: 100%; }
.w-auto { width: auto; }

/* ===== Flex Grow/Shrink ===== */

.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow-0 { flex-grow: 0; }