/* ==========================================================================
   utilities.css — small, reusable, single-purpose classes
   --------------------------------------------------------------------------
   These are NOT components. They're escape hatches for the rare case where
   a one-off tweak doesn't justify a new component. Keep this file tiny —
   if a utility shows up in 3+ places, it's a component.
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* Text                                                                       */
/* -------------------------------------------------------------------------- */

.text-secondary { color: var(--neutral-11); }
.text-muted     { color: var(--neutral-9); }
.text-accent    { color: var(--accent-11); }
.text-success   { color: var(--success-11); }
.text-warning   { color: var(--warning-11); }
.text-danger    { color: var(--danger-11); }

.text-mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    word-break: break-all;
}

.text-xs   { font-size: var(--text-xs);   line-height: var(--leading-xs); }
.text-sm   { font-size: var(--text-sm);   line-height: var(--leading-sm); }
.text-base { font-size: var(--text-base); line-height: var(--leading-base); }
.text-md   { font-size: var(--text-md);   line-height: var(--leading-md); }
.text-lg   { font-size: var(--text-lg);   line-height: var(--leading-lg); }

.weight-medium    { font-weight: var(--weight-medium); }
.weight-semibold  { font-weight: var(--weight-semibold); }

.uppercase {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* -------------------------------------------------------------------------- */
/* A11y                                                                       */
/* -------------------------------------------------------------------------- */

.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;
}

/* -------------------------------------------------------------------------- */
/* Visibility helpers (responsive)                                            */
/* -------------------------------------------------------------------------- */

.hidden { display: none !important; }

@media (max-width: 767.98px) {
    .hidden-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .hidden-desktop { display: none !important; }
}

/* -------------------------------------------------------------------------- */
/* Flex / grid helpers (use sparingly — prefer component-level layout)        */
/* -------------------------------------------------------------------------- */

.flex     { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-1   { flex: 1; min-width: 0; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }

.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); }

/* -------------------------------------------------------------------------- */
/* Spacing                                                                    */
/* -------------------------------------------------------------------------- */

.mt-1 { margin-top: var(--space-1); }
.mt-4 { margin-top: var(--space-4); }