/* 
   Atlantida DMC - Typography Hierarchy
   Version: 1.0
   Source: https://www.fontshare.com/fonts/generalsans
   
   Hierarquia de tamanhos:
   • Títulos: 30-50px
   • Subtítulos: 24-30px
   • Corpo de texto: 16-20px
   • Legendas e outro texto: 12-14px
*/

/* ===== BASE FONT FAMILY ===== */
body, 
button, 
input, 
select, 
textarea {
    font-family: var(--font-family, 'General Sans', sans-serif);
}

/* ===== RESPONSIVE TYPOGRAPHY SYSTEM ===== */

/* Títulos principais (h1) - 46-50px em desktop */
h1, .h1-style {
    font-size: var(--font-title, 50px);
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 0.5em;
}

/* Títulos secundários (h2) - 36-40px em desktop */
h2, .h2-style {
    font-size: var(--font-subtitle, 30px);
    line-height: 1.25;
    font-weight: 600;
    margin-bottom: 0.5em;
}

/* Títulos terciários (h3) - 30-32px em desktop */
h3, .h3-style {
    font-size: calc(var(--font-subtitle, 30px) * 0.83);
    line-height: 1.3;
    font-weight: 600;
    margin-bottom: 0.5em;
}

/* Subtítulos (h4) - 24-28px em desktop */
h4, .h4-style {
    font-size: calc(var(--font-subtitle, 30px) * 0.67);
    line-height: 1.35;
    font-weight: 500;
    margin-bottom: 0.5em;
}

/* Subtítulos menores (h5) - 20-22px em desktop */
h5, .h5-style {
    font-size: calc(var(--font-body, 18px) * 1.11);
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 0.5em;
}

/* Subtítulos pequenos (h6) - 18px em desktop */
h6, .h6-style {
    font-size: var(--font-body, 18px);
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 0.5em;
}

/* Corpo de texto padrão - 16px em desktop */
body, p, .body-text {
    font-size: var(--font-body, 18px);
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 1em;
}

/* Texto destacado/lead - 18-20px em desktop */
.lead-text {
    font-size: var(--font-body, 18px);
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 1em;
}

/* Texto pequeno/legendas - 14px em desktop */
.small-text, figcaption, .caption {
    font-size: var(--font-caption, 14px);
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 0.5em;
}

/* Texto muito pequeno - 12px em desktop */
.micro-text, .footnote {
    font-size: calc(var(--font-caption, 14px) * 0.86);
    line-height: 1.5;
    font-weight: 400;
}

/* Links, destacados e botões */
a, .link {
   
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover, .link:hover {
    color: #b5141b;
    text-decoration: none;
}

/* Botões de texto grande */
.btn-large {
    font-size: var(--font-body, 18px);
    font-weight: 500;
}

/* Botões de texto padrão */
.btn, button {
    font-size: calc(var(--font-body, 18px) * 0.89);
    font-weight: 500;
}

/* Botões de texto pequeno */
.btn-small {
    font-size: var(--font-caption, 14px);
    font-weight: 500;
}

/* ===== RESPONSIVIDADE ===== */

/* Tablets e telas médias */
@media screen and (max-width: 992px) {
    h1, .h1-style {
        font-size: var(--font-title, 50px);
    }
    
    h2, .h2-style {
        font-size: var(--font-subtitle, 30px);
    }
    
    h3, .h3-style {
        font-size: calc(var(--font-subtitle, 30px) * 0.83);
    }
    
    h4, .h4-style {
        font-size: calc(var(--font-subtitle, 30px) * 0.67);
    }
    
    h5, .h5-style {
        font-size: calc(var(--font-body, 18px) * 1.11);
    }
    
    .lead-text {
        font-size: var(--font-body, 18px);
    }
}

/* Dispositivos móveis maiores e tablets pequenos */
@media screen and (max-width: 768px) {
    h1, .h1-style {
        font-size: var(--font-title, 50px) !important;
    }
    
    h2, .h2-style {
        font-size: var(--font-subtitle, 30px) !important;
    }
    
    h3, .h3-style {
        font-size: calc(var(--font-subtitle, 30px) * 0.83) !important;
    }
    
    h4, .h4-style {
        font-size: calc(var(--font-subtitle, 30px) * 0.67) !important;
    }
    
    h5, .h5-style, h6, .h6-style {
        font-size: var(--font-body, 18px) !important;
    }
    
    body, p, .body-text {
        font-size: var(--font-body, 18px) !important;
    }
}

/* Dispositivos móveis pequenos */
@media screen and (max-width: 576px) {
    h1, .h1-style {
        font-size: var(--font-title, 50px) !important;
    }
    
    h2, .h2-style {
        font-size: var(--font-subtitle, 30px) !important;
    }
    
    h3, .h3-style {
        font-size: calc(var(--font-subtitle, 30px) * 0.83) !important;
    }
    
    h4, .h4-style {
        font-size: calc(var(--font-subtitle, 30px) * 0.67) !important;
    }
    
    h5, .h5-style, h6, .h6-style {
        font-size: var(--font-body, 18px) !important;
    }
    
    body, p, .body-text {
        font-size: var(--font-body, 18px) !important;
    }
    
    .small-text, figcaption, .caption {
        font-size: var(--font-caption, 14px) !important;
    }
    
    .lead-text {
        font-size: var(--font-body, 18px) !important;
    }
}