/**
 * Utilidades de Tipografía con Livvic
 * Senda Theme
 */

/* =Clases de utilidad para aplicar estilos de texto específicos
-------------------------------------------------------------- */

/* Heading XL (56px, 600) */
.heading-xl {
    font-family: var(--font-family);
    font-size: var(--font-size-heading-xl);
    font-weight: var(--font-weight-heading-xl);
    line-height: 1.2;
}

/* Heading L (48px, 600) */
.heading-l {
    font-family: var(--font-family);
    font-size: var(--font-size-heading-l);
    font-weight: var(--font-weight-heading-l);
    line-height: 1.2;
}

/* Heading M (40px, 600) */
.heading-m {
    font-family: var(--font-family);
    font-size: var(--font-size-heading-m);
    font-weight: var(--font-weight-heading-m);
    line-height: 1.25;
}

/* Heading S (24px, 500) */
.heading-s {
    font-family: var(--font-family);
    font-size: var(--font-size-heading-s);
    font-weight: var(--font-weight-heading-s);
    line-height: 1.3;
}

/* Primary Text (24px, 600) */
.text-primary {
    font-family: var(--font-family);
    font-size: var(--font-size-primary);
    font-weight: var(--font-weight-primary);
    line-height: 1.3;
}

/* Secondary Text (20px, 600) */
.text-secondary {
    font-family: var(--font-family);
    font-size: var(--font-size-secondary);
    font-weight: var(--font-weight-secondary);
    line-height: 1.4;
}

/* Normal Text (16px, 400) */
.text-normal {
    font-family: var(--font-family);
    font-size: var(--font-size-text);
    font-weight: var(--font-weight-text);
    line-height: 1.6;
}

/* Accent Text (16px, 500) */
.text-accent {
    font-family: var(--font-family);
    font-size: var(--font-size-accent);
    font-weight: var(--font-weight-accent);
    line-height: 1.6;
}

/* =Variaciones de peso
-------------------------------------------------------------- */
.font-weight-400 {
    font-weight: 400;
}

.font-weight-500 {
    font-weight: 500;
}

.font-weight-600 {
    font-weight: 600;
}

.font-weight-700 {
    font-weight: 700;
}

/* =Tamaños adicionales
-------------------------------------------------------------- */
.text-xs {
    font-size: 14px;
}

.text-sm {
    font-size: 15px;
}

.text-lg {
    font-size: 18px;
}

.text-xl {
    font-size: 22px;
}

.text-2xl {
    font-size: 28px;
}

/* =Estilos de texto
-------------------------------------------------------------- */
.text-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.text-capitalize {
    text-transform: capitalize;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* =Line Heights
-------------------------------------------------------------- */
.leading-none {
    line-height: 1;
}

.leading-tight {
    line-height: 1.2;
}

.leading-normal {
    line-height: 1.6;
}

.leading-relaxed {
    line-height: 1.8;
}

/* =Letter Spacing
-------------------------------------------------------------- */
.tracking-tight {
    letter-spacing: -0.025em;
}

.tracking-normal {
    letter-spacing: 0;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

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

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

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

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

.text-muted {
    opacity: 0.7;
}

/* =Responsive Typography
-------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        /* Headings responsive */
        --font-size-heading-xl: 40px;  /* 56px → 40px */
        --font-size-heading-l: 36px;   /* 48px → 36px */
        --font-size-heading-m: 32px;   /* 40px → 32px */
        --font-size-heading-s: 20px;   /* 24px → 20px */
        
        /* Text responsive */
        --font-size-primary: 20px;
        --font-size-secondary: 18px;
        --font-size-text: 15px;
        --font-size-accent: 15px;
    }
}

@media (max-width: 480px) {
    :root {
        /* Headings mobile */
        --font-size-heading-xl: 32px;  
        --font-size-heading-l: 28px;   
        --font-size-heading-m: 24px;   
        --font-size-heading-s: 18px;   
    }
}