/* =====================================================
   TIPOGRAFIA DISPLAY GIGANTE - PAPO REDAÇÃO
   Fontes muito grandes e pesadas para manchetes
   Padrão atual de mercado para landing pages
   ===================================================== */

/* =====================================================
   HEADINGS DISPLAY
   ===================================================== */
.display-heading {
    font-family: var(--font-family-heading, 'Poppins', sans-serif);
    font-weight: var(--font-weight-extrabold, 800);
    line-height: var(--line-height-tight, 1.2);
    letter-spacing: -0.02em;
    color: var(--text-main, #0f172a);
    margin: 0;
}

.display-heading--1 {
    font-size: var(--font-size-5xl, 4rem); /* 64px */
    font-weight: var(--font-weight-extrabold, 800);
}

.display-heading--2 {
    font-size: var(--font-size-4xl, 3rem); /* 48px */
    font-weight: var(--font-weight-bold, 700);
}

.display-heading--3 {
    font-size: var(--font-size-3xl, 2.25rem); /* 36px */
    font-weight: var(--font-weight-bold, 700);
}

/* =====================================================
   HERO HEADINGS (Ocupando tela inteira)
   ===================================================== */
.hero-display {
    font-family: var(--font-family-heading, 'Poppins', sans-serif);
    font-size: clamp(2.5rem, 8vw, 6rem); /* Responsivo: 40px a 96px */
    font-weight: var(--font-weight-extrabold, 800);
    line-height: var(--line-height-tight, 1.1);
    letter-spacing: -0.03em;
    color: var(--text-main, #0f172a);
    margin: 0;
    text-align: center;
}

/* Gradiente de texto para hero */
.hero-display--gradient {
    background: var(--gradient-primary, linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #06b6d4 100%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =====================================================
   RESPONSIVIDADE
   ===================================================== */
@media (max-width: 768px) {
    .display-heading--1 {
        font-size: var(--font-size-4xl, 3rem); /* 48px em mobile */
    }
    
    .display-heading--2 {
        font-size: var(--font-size-3xl, 2.25rem); /* 36px em mobile */
    }
    
    .display-heading--3 {
        font-size: var(--font-size-2xl, 1.75rem); /* 28px em mobile */
    }
    
    .hero-display {
        font-size: clamp(2rem, 10vw, 4rem); /* 32px a 64px em mobile */
    }
}

@media (max-width: 480px) {
    .display-heading--1 {
        font-size: var(--font-size-3xl, 2.25rem); /* 36px em mobile pequeno */
    }
    
    .display-heading--2 {
        font-size: var(--font-size-2xl, 1.75rem); /* 28px em mobile pequeno */
    }
    
    .hero-display {
        font-size: clamp(1.75rem, 12vw, 3rem); /* 28px a 48px em mobile pequeno */
    }
}

/* =====================================================
   DARK MODE SUPPORT
   ===================================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .display-heading,
    :root:not([data-theme="light"]) .hero-display {
        color: var(--text-main, #f1f5f9);
    }
}

[data-theme="dark"] .display-heading,
[data-theme="dark"] .hero-display {
    color: var(--text-main, #f1f5f9);
}