/* ==========================================================================
   TYPOGRAPHY SYSTEM - Sistema Padronizado de Cores para Títulos e Subtítulos
   ==========================================================================
   Define um padrão consistente de cores para títulos e subtítulos em toda a página.
   Permite variações mas mantém harmonia visual.
*/

/* --- 1. VARIÁVEIS DE CORES PADRONIZADAS --- */
:root {
    --title-primary: #1a1a1a; /* Preto suave para títulos principais */
    --title-secondary: #2c2c2c; /* Preto médio para títulos secundários */
    --title-accent: #b92027; /* Vermelho da marca para destaques */
    --subtitle-primary: rgba(0, 0, 0, 0.7); /* Cinza escuro para subtítulos */
    --subtitle-secondary: rgba(0, 0, 0, 0.6); /* Cinza médio */
    --subtitle-muted: rgba(0, 0, 0, 0.5); /* Cinza claro */
    
    /* Cores para fundos escuros */
    --title-light: #ffffff;
    --subtitle-light: rgba(255, 255, 255, 0.85);
    --subtitle-light-muted: rgba(255, 255, 255, 0.7);
}

/* Dark Mode */
body.dark-mode,
[data-theme="dark"] {
    --title-primary: #ffffff;
    --title-secondary: #f1f1f1;
    --subtitle-primary: rgba(255, 255, 255, 0.85);
    --subtitle-secondary: rgba(255, 255, 255, 0.7);
    --subtitle-muted: rgba(255, 255, 255, 0.6);
}

/* --- 2. TÍTULOS PRINCIPAIS (H1, H2) --- */
h1, h2,
.section-title,
.areas-title,
.hero-title-cinema,
.hero-title-boutique,
.hero-title-tech,
.cta-title-display {
    color: var(--title-primary);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Títulos em fundos escuros */
.hero-universal-wrapper h1,
.hero-universal-wrapper h2,
.cta-section-ultimate h2,
.cta-section-ultimate .cta-title-display {
    color: var(--title-light);
}

/* Títulos com acento (vermelho) */
h1.title-accent,
h2.title-accent,
.section-title.title-accent {
    color: var(--title-accent);
}

/* --- 3. SUBTÍTULOS (P, SPAN, etc) --- */
.lead,
.lead-text,
.areas-subtitle,
.hero-subtitle-cinema,
.hero-subtitle-boutique,
.hero-subtitle-tech,
.cta-subtitle {
    color: var(--subtitle-primary);
    font-weight: 300;
    line-height: 1.6;
}

/* Subtítulos em fundos escuros */
.hero-universal-wrapper .lead,
.hero-universal-wrapper p,
.cta-section-ultimate p,
.cta-section-ultimate .lead {
    color: var(--subtitle-light);
}

/* Subtítulos secundários */
.subtitle-secondary,
.areas-subtitle,
.section-subtitle {
    color: var(--subtitle-secondary);
}

/* Subtítulos muted (mais claros) */
.subtitle-muted,
.text-muted {
    color: var(--subtitle-muted);
}

/* --- 4. KICKERS/BADGES (Labels pequenos acima dos títulos) --- */
.areas-kicker,
.section-badge,
.hero-pre-tag {
    color: var(--title-accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
}

/* --- 5. APLICAÇÃO ESPECÍFICA POR SEÇÃO --- */

/* Seção de Áreas */
.areas-carousel-section .areas-title {
    color: var(--title-primary);
}

.areas-carousel-section .areas-subtitle {
    color: var(--subtitle-primary);
}

/* Seção de História */
.section-adaptive-alt .section-title {
    color: var(--title-primary);
}

.section-adaptive-alt .lead-text {
    color: var(--subtitle-primary);
}

/* CTA Section */
.cta-section-ultimate .cta-title-display {
    color: var(--title-light);
}

.cta-section-ultimate .lead {
    color: var(--subtitle-light);
}

/* --- 6. RESPONSIVIDADE --- */
@media (max-width: 991px) {
    h1, h2,
    .section-title,
    .areas-title {
        font-size: clamp(1.8rem, 5vw, 2.5rem);
    }
    
    .lead,
    .areas-subtitle {
        font-size: 1rem;
    }
}