/* ============================================
   UTILITY CLASSES - Phase 3 Extraction
   Extracted from 457 inline styles
   ============================================ */

/* Typography - Micro Text (23 occurrences) */
.text-micro-muted {
    font-size: 10px;
    color: var(--color-text-muted);
}

/* Typography - XS Muted (12 occurrences) */
.text-xs-muted {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Typography - Secondary (6 occurrences) */
.text-xs-secondary {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

/* Typography - Base with margin (11 occurrences) */
.text-base-block {
    font-size: var(--text-base);
    margin-bottom: var(--space-3);
}

/* Typography - Micro Uppercase (6+5=11 occurrences) */
.text-micro-label { /* 6 occ */
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-1);
}

.text-micro-label-lg { /* 5 occ */
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-2);
}

/* Typography - 9px secondary (5 occurrences) */
.text-2xs-secondary {
    font-size: 9px;
    color: var(--color-text-secondary);
    margin-top: 4px;
}

.text-2xs-muted {
    font-size: 9px;
    color: var(--color-text-muted);
}

/* Typography - Semibold (5 occurrences) */
.font-semibold {
    font-weight: 600;
}

.text-sm {
    font-size: var(--text-sm);
}

/* Typography - Centered Muted (5 occurrences) */
.text-center-muted {
    text-align: center;
    color: var(--color-text-muted);
}

/* Spacing - Margin Top */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }

/* Spacing - Margin Bottom */
.mb-3 { margin-bottom: var(--space-3); }

/* Layout - Display */
.hidden {
    display: none !important;
}

.flex {
    display: flex;
}

.flex-1 {
    flex: 1;
}

/* Layout - Flex patterns */
.flex-center-gap { /* 7 occ */
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.flex-between-center { /* 5 occ */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-col-gap { /* 5 occ */
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Layout - Width */
.w-full {
    width: 100%;
}

.w-0 {
    width: 0%;
}

/* Layout - Height */
.h-250 {
    height: 250px;
}

/* Layout - Scroll */
.scroll-y {
    max-height: 200px;
    overflow-y: auto;
}

/* Layout - Text Align */
.text-center {
    text-align: center;
}

.text-center-padded {
    text-align: center;
    padding: var(--space-2);
}

.text-center-block {
    text-align: center;
    padding: var(--space-4);
}

/* Layout - Centered muted block (5 occ) */
.center-muted-box {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-4);
}

/* Components - Card patterns */
.card-elevated { /* 6 occ */
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.card-block { /* 5 occ */
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    text-align: center;
}

/* Color utilities */
.text-muted {
    color: var(--color-text-muted);
}

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

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