/* =================================================================
   _UTILITIES.CSS - Clases de Utilidad
   ================================================================= */

/* -----------------------------------------------------------------
   CONTAINER
   ----------------------------------------------------------------- */
.container-refined {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-px-mobile);
    padding-right: var(--container-px-mobile);
}

@media (min-width: 768px) {
    .container-refined {
        padding-left: var(--container-px-tablet);
        padding-right: var(--container-px-tablet);
    }
}

@media (min-width: 1024px) {
    .container-refined {
        max-width: var(--container-max-lg);
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 1440px) {
    .container-refined {
        max-width: var(--container-max-xl);
    }
}

/* -----------------------------------------------------------------
   BACKGROUND COLORS
   ----------------------------------------------------------------- */
.bg-bunker-white {
    background-color: var(--bunker-blanco);
}

.bg-bunker-black {
    background-color: var(--bunker-negro);
    color: var(--text-on-dark);
}

.bg-bunker-accent {
    background-color: var(--bunker-lavanda);
    color: var(--bunker-negro);
}

.bg-bunker-beige {
    background-color: var(--bunker-beige);
    color: var(--bunker-negro);
}

.bg-bunker-oliva {
    background-color: var(--bunker-oliva);
    color: var(--text-on-dark);
}

.bg-bunker-carbon {
    background-color: var(--bunker-carbon);
    color: var(--text-on-dark);
}

/* -----------------------------------------------------------------
   TEXT COLORS
   ----------------------------------------------------------------- */
.text-bunker-black {
    color: var(--bunker-negro);
}

.text-bunker-white {
    color: var(--bunker-blanco);
}

.text-bunker-accent {
    color: var(--bunker-lavanda);
}

.text-bunker-oliva {
    color: var(--bunker-oliva);
}

.text-bunker-beige {
    color: var(--bunker-beige);
}

/* Grises semánticos */
.text-primary {
    color: var(--text-primary);
}

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

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

/* Overrides para texto gris en fondos claros (contrast fix) */
.text-gray-400 {
    color: #717171;
    /* WCAG AA Large Text safe on white */
}

.text-gray-500 {
    color: #555555;
    /* Darkened for better contrast */
}

/* -----------------------------------------------------------------
   BUTTON OVERRIDES POR CONTEXTO
   NOTA: Estos overrides fueron removidos para permitir que los 
   estilos inline de Tailwind tengan prioridad.
   Si necesitas overrides específicos, agrégalos directamente 
   en el HTML con clases de Tailwind.
   ----------------------------------------------------------------- */

/* -----------------------------------------------------------------
   SPACING UTILITIES
   ----------------------------------------------------------------- */
.section-padding {
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
}

.mb-section {
    margin-bottom: var(--space-24);
}

/* -----------------------------------------------------------------
   TYPOGRAPHY UTILITIES
   ----------------------------------------------------------------- */
.text-hero {
    font-size: var(--text-hero);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
}

.text-display {
    font-size: var(--text-display);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

.text-title {
    font-size: var(--text-h2);
    font-weight: var(--font-extrabold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

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