/**
 * FlowX4 Utilities
 * ================
 */

/* Visibility */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

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

/* Text Colors */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }

/* Background Colors */
.bg-surface { background: var(--color-surface-primary); }
.bg-secondary { background: var(--color-bg-secondary); }
.bg-tertiary { background: var(--color-bg-tertiary); }

/* Typography */
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Price Flash Animation */
@keyframes flash-up {
    0% { background-color: transparent; }
    20% { background-color: rgba(34, 197, 94, 0.4); }
    100% { background-color: transparent; }
}

@keyframes flash-down {
    0% { background-color: transparent; }
    20% { background-color: rgba(239, 68, 68, 0.4); }
    100% { background-color: transparent; }
}

.price-flash-up {
    animation: flash-up 1.5s ease-out;
    color: var(--color-bullish) !important;
}

.price-flash-down {
    animation: flash-down 1.5s ease-out;
    color: var(--color-bearish) !important;
}