/* ========================================
   PHASE 3 BATCH 4: EXTRACTED UTILITY CLASSES
   Safe patterns: text styling, margins, grid layouts
   ======================================== */

/* Text: margin-top + xs muted (2 occurrences) */
.text-xs-mt-muted {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Text: margin-top + micro muted (2 occurrences) */
.text-micro-mt-muted {
    margin-top: var(--space-2);
    font-size: 10px;
    color: var(--color-text-muted);
}

/* Margin bottom: xsmall (2 occurrences) */
.mb-1 {
    margin-bottom: var(--space-1);
}

/* Text: xs secondary with mt-1 (2 occurrences) */
.text-xs-secondary-mt-1 {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}

/* Text: sm with mt-2 (2 occurrences) */
.text-sm-mt-2 {
    font-size: var(--text-sm);
    margin-top: var(--space-2);
}

/* Text: sm warning bold (2 occurrences) */
.text-sm-warning-bold {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-warning);
}

/* Text: sm muted (2 occurrences) */
.text-sm-muted {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Text: lg bold (2 occurrences) */
.text-lg-bold {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
}

/* Icon: 48px (2 occurrences) */
.icon-48 {
    font-size: 48px;
    margin-bottom: var(--space-3);
}

/* Icon: 48px with mb-2 variant (extracted inline style) */
.icon-48-mb-2 {
    font-size: 48px;
    margin-bottom: var(--space-2);
}

/* Text: 28px bold (2 occurrences) */
.text-28-bold {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text);
}

/* Text: 24px warning (2 occurrences) */
.text-24-warning {
    font-size: 24px;
    font-weight: 700;
    color: #f59e0b;
}

/* Text: 24px bold (2 occurrences) */
.text-24-bold {
    font-size: 24px;
    font-weight: 700;
}

/* Text: 20px warning (2 occurrences) */
.text-20-warning {
    font-size: 20px;
    font-weight: 700;
    color: #f59e0b;
}

/* Text: 20px (2 occurrences) */
.text-20 {
    font-size: 20px;
}

/* Text: micro uppercase with letter-spacing (2 occurrences) */
.text-micro-uppercase-spaced {
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

/* Grid: auto-fit 250px (2 occurrences) */
.grid-auto-250 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-3);
}

/* Grid: auto-fit 200px (2 occurrences) */
.grid-auto-200 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-3);
}

/* Flex: wrap with gap (2 occurrences) */
.flex-wrap-gap-1 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

/* Color: warning (2 occurrences) */
.text-warning {
    color: var(--color-warning);
}

/* Background: purple (2 occurrences) */
.bg-purple {
    background: var(--color-purple);
}

/* Card: alert variant (2 occurrences) */
.card-alert {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

/* Card: elevated with padding (2 occurrences) */
.card-elevated-padded {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

/* Card: centered with bg (2 occurrences) */
.card-centered-bg {
    background: var(--color-bg);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    text-align: center;
}

/* Card: simple padded (2 occurrences) */
.card-padded {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

/* Legend line: red (1 occurrence) */
.legend-line-red {
    width: 20px;
    height: 3px;
    background: #ff4757;
    border-radius: 2px;
}

/* Legend line: orange dotted (1 occurrence) */
.legend-line-orange-dotted {
    width: 20px;
    height: 3px;
    background: #fb8500;
    border-radius: 2px;
    border-top: 2px dotted #fb8500;
}

/* Legend line: gray (1 occurrence) */
.legend-line-gray {
    width: 20px;
    height: 3px;
    background: #94a3b8;
    border-radius: 2px;
    opacity: 0.5;
}

/* Legend line: purple dashed (1 occurrence) */
.legend-line-purple-dashed {
    width: 20px;
    height: 3px;
    background: #7c4dff;
    border-radius: 2px;
    border-top: 2px dashed #7c4dff;
}

/* Legend line: green (1 occurrence) */
.legend-line-green {
    width: 20px;
    height: 3px;
    background: #22c55e;
    border-radius: 2px;
}