/* ==========================================================================
   UTILITY CLASSES
   Extracted from styles.css for modularity and reuse
   ========================================================================== */

/* ==========================================================================
   FONT SIZES
   ========================================================================== */
.text-2xs { font-size: var(--font-size-2xsm); }
.text-xs { font-size: var(--font-size-sm); }
.text-sm { font-size: var(--font-size-md); }
.text-base { font-size: var(--font-size-lg); }
.text-lg { font-size: var(--font-size-xl); }
.text-xl { font-size: var(--font-size-1_5xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

/* ==========================================================================
   FONT WEIGHTS
   ========================================================================== */
.font-thin { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* ==========================================================================
   LINE HEIGHTS
   ========================================================================== */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.1; }
.leading-snug { line-height: 1.3; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.7; }

/* ==========================================================================
   MARGIN BOTTOM
   ========================================================================== */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mb-10 { margin-bottom: 40px; }
.mb-12 { margin-bottom: 48px; }

/* ==========================================================================
   TEXT COLORS
   ========================================================================== */
.text-white { color: var(--color-text); }
.text-dark { color: var(--color-text-dark); }
.text-muted { color: var(--color-text-muted); }
.text-primary { color: var(--color-primary); }

/* ==========================================================================
   FONT FAMILY
   ========================================================================== */
.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-monocal); }

/* ==========================================================================
   LIST UTILITIES
   ========================================================================== */
.list-none { list-style: none; }
.list-reset {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ==========================================================================
   SPACING
   ========================================================================== */
.p-0 { padding: 0; }
.m-0 { margin: 0; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.pl-6 { padding-left: 24px; }

/* ==========================================================================
   POSITIONING
   ========================================================================== */
.relative { position: relative; }

/* ==========================================================================
   DISPLAY
   ========================================================================== */
.hidden { display: none; }

/* ==========================================================================
   HOVER TRANSFORM UTILITIES
   ========================================================================== */

/* Hover lift effect - subtle upward movement */
.hover-lift {
    transition: transform var(--timing-fast) var(--ease-default);
}
.hover-lift:hover {
    transform: translateY(calc(var(--translate-sm) * -1));
}

/* Hover slide effect - horizontal movement */
.hover-slide {
    transition: transform var(--timing-fast) var(--ease-default);
}
.hover-slide:hover {
    transform: translateX(var(--translate-sm));
}

.hover-slide-md {
    transition: transform var(--timing-fast) var(--ease-default);
}
.hover-slide-md:hover {
    transform: translateX(var(--translate-md));
}

/* ==========================================================================
   ARROW PREFIX
   For list items with arrow bullets
   ========================================================================== */
.arrow-prefix {
    position: relative;
    padding-left: 24px;
}
.arrow-prefix::before {
    content: '\2192';
    position: absolute;
    left: 0;
    color: var(--color-primary);
}