/**
 * Utilidades de Colores
 * Senda Theme
 */

/* =Colores de fondo
-------------------------------------------------------------- */
.bg-primary {
    background-color: var(--primary-color);
}

.bg-secondary {
    background-color: var(--secondary-color);
}

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

.bg-white {
    background-color: var(--white);
}

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

/* =Colores de texto
-------------------------------------------------------------- */
.text-primary {
    color: var(--primary-color);
}

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

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

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

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

/* =Bordes
-------------------------------------------------------------- */
.border-primary {
    border-color: var(--primary-color);
}

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

.border-accent {
    border-color: var(--accent-color);
}

.border-light {
    border-color: var(--light-border);
}

/* =Secciones con fondos alternados
-------------------------------------------------------------- */
.section-primary {
    background-color: var(--primary-color);
    color: var(--white);
}

.section-primary h1,
.section-primary h2,
.section-primary h3,
.section-primary h4,
.section-primary h5,
.section-primary h6,
.section-primary .heading-xl,
.section-primary .heading-l,
.section-primary .heading-m,
.section-primary .heading-s {
    color: var(--white);
}

.section-secondary {
    background-color: var(--secondary-color);
    color: var(--white);
}

.section-secondary h1,
.section-secondary h2,
.section-secondary h3,
.section-secondary h4,
.section-secondary h5,
.section-secondary h6,
.section-secondary .heading-xl,
.section-secondary .heading-l,
.section-secondary .heading-m,
.section-secondary .heading-s {
    color: var(--white);
}

.section-accent {
    background-color: var(--background-accent);
    color: var(--text-color);
}

.section-white {
    background-color: var(--white);
    color: var(--text-color);
}

/* =Overlays con transparencia
-------------------------------------------------------------- */
.overlay-primary {
    background-color: rgba(0, 77, 102, 0.9); /* #004D66 con 90% opacidad */
}

.overlay-secondary {
    background-color: rgba(0, 44, 68, 0.9); /* #002C44 con 90% opacidad */
}

.overlay-accent {
    background-color: rgba(122, 214, 210, 0.1); /* #7AD6D2 con 10% opacidad */
}

/* =Gradientes
-------------------------------------------------------------- */
.gradient-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.gradient-accent {
    background: linear-gradient(135deg, var(--accent-color) 0%, #B8E8E6 100%);
}

.gradient-overlay {
    background: linear-gradient(180deg, rgba(0, 77, 102, 0.8) 0%, rgba(0, 44, 68, 0.95) 100%);
}

/* =Utilidades de hover
-------------------------------------------------------------- */
.hover-primary:hover {
    color: var(--primary-color);
}

.hover-accent:hover {
    color: var(--accent-color);
}

.hover-bg-accent:hover {
    background-color: var(--background-accent);
}

/* =Sombras con colores del tema
-------------------------------------------------------------- */
.shadow-primary {
    box-shadow: 0 4px 6px rgba(0, 77, 102, 0.1);
}

.shadow-accent {
    box-shadow: 0 4px 6px rgba(122, 214, 210, 0.2);
}

.shadow-hover:hover {
    box-shadow: 0 8px 16px rgba(0, 77, 102, 0.15);
}