/**
 * AbhiHub — 05_utilities.css
 * Atomic helper classes. No page-specific logic here.
 * Depends on: 01_tokens.css
 */

/* ── Spacing ── */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

/* ── Text Alignment ── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ── Text Colors ── */
.text-primary-color { color: var(--text-primary); }
.text-secondary-color { color: var(--text-secondary); }
.text-muted         { color: var(--text-tertiary); }
.text-blue          { color: var(--primary-600); }
.text-green         { color: var(--accent-green); }
.text-red           { color: var(--accent-red); }

/* ── Font Weights ── */
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* ── Font Sizes ── */
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }

/* ── Display ── */
.d-flex        { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid        { display: grid; }
.d-none        { display: none; }
.d-block       { display: block; }

/* ── Flex Utilities ── */
.flex-col       { flex-direction: column; }
.flex-row       { flex-direction: row; }
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1; }

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

/* ── Border Radius ── */
.rounded      { 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-full { border-radius: var(--radius-full); }

/* ── Shadows ── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* ── Borders ── */
.border          { border: 1px solid var(--border-light); }
.border-medium   { border: 1px solid var(--border-medium); }
.border-primary  { border-color: var(--primary-600); }

/* ── Gradient Text ── */
.gradient-text {
    background: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gradient-text-brand {
    background: var(--gradient-brand);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── Glass Effect ── */
.glass {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.2);
}

/* ── Width / Height Helpers ── */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.w-auto  { width: auto; }

/* ── Overflow ── */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* ── Position ── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }

/* ── Z-index ── */
.z-10   { z-index: 10; }
.z-100  { z-index: 100; }
.z-1000 { z-index: 1000; }

/* ── Cursor ── */
.cursor-pointer { cursor: pointer; }

/* ── Animations ── */
.animate-fade-in  { animation: fadeIn  0.3s ease-out; }
.animate-slide-up { animation: slideUp 0.4s ease-out; }
.animate-pulse    { animation: pulse   2s ease-in-out infinite; }
.animate-float    { animation: float   6s ease-in-out infinite; }

/* ── Line Clamp ── */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Aspect Ratio ── */
.aspect-square { aspect-ratio: 1 / 1; }