/**
 * TIPOGRAFIA PLAYLUDICO
 * Sistema de fontes para o tema Play Lúdico
 */

/* ====== CLASSES BASE DE TIPOGRAFIA ====== */

/* Sunny Spells - Títulos divertidos */
.title-fun,
.heading-fun,
h1.fun-title,
h2.fun-title,
.hero-title,
.section-title.fun {
    font-family: var(--font-title-fun);
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Black to Black - Títulos estilo script */
.title-script,
.heading-script,
.script-title,
.signature-title,
.accent-title {
    font-family: var(--font-title-script);
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.3;
}

/* Fredoka - Texto base */
body,
.fredoka-text,
p,
.content-text,
.description {
    font-family: var(--font-body);
    font-weight: var(--font-regular);
    line-height: 1.6;
}

/* ====== VARIAÇÕES DE PESO FREDOKA ====== */

.fredoka-light,
.text-light {
    font-family: var(--font-body);
    font-weight: var(--font-light);
}

.fredoka-regular,
.text-regular {
    font-family: var(--font-body);
    font-weight: var(--font-regular);
}

.fredoka-medium,
.text-medium {
    font-family: var(--font-body);
    font-weight: var(--font-medium);
}

.fredoka-semibold,
.text-semibold {
    font-family: var(--font-body);
    font-weight: var(--font-semibold);
}

.fredoka-bold,
.text-bold {
    font-family: var(--font-body);
    font-weight: var(--font-bold);
}

/* ====== APLICAÇÃO EM ELEMENTOS HTML ====== */

/* Headings com Sunny Spells */
h1,
.site-title,
.page-title,
.hero-heading {
    font-family: var(--font-title-fun);
    font-weight: 400;
    color: var(--primary);
    line-height: 1.2;
}

/* Subtítulos com Black to Black */
.subtitle,
.tagline,
.section-subtitle,
h2.script,
h3.script {
    font-family: var(--font-title-script);
    font-weight: 400;
    color: var(--secondary);
    line-height: 1.3;
}

/* Texto do corpo com Fredoka */
p,
.entry-content,
.post-content,
.page-content,
li,
.widget-content {
    font-family: var(--font-body);
    font-weight: var(--font-regular);
    color: var(--text-color);
    line-height: 1.6;
}

/* Botões com Fredoka Medium */
button,
.btn,
.button,
.wp-block-button__link,
.wc-button,
input[type="submit"] {
    font-family: var(--font-body);
    font-weight: var(--font-medium);
    letter-spacing: 0.5px;
}

/* Links importantes */
.btn-primary,
.btn-playludico,
.cta-button {
    font-family: var(--font-body);
    font-weight: var(--font-semibold);
}

/* ====== TAMANHOS RESPONSIVOS ====== */

/* Títulos principais */
h1,
.title-fun.large {
    font-size: clamp(2rem, 5vw, 3.5rem);
}

/* Títulos secundários */
h2,
.title-fun.medium {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
}

/* Títulos terciários */
h3,
.title-fun.small {
    font-size: clamp(1.25rem, 3vw, 2rem);
}

/* Títulos script */
.title-script.large {
    font-size: clamp(1.75rem, 4.5vw, 3rem);
}

.title-script.medium {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
}

.title-script.small {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
}

/* Texto do corpo */
p,
.fredoka-text {
    font-size: clamp(0.8rem, 2.5vw, 0.8rem);
}

/* ====== APLICAÇÕES ESPECÍFICAS DO PLAYLUDICO ====== */

/* Logo e branding */
.site-branding .site-title {
    font-family: var(--font-title-fun);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--accent-color);
}

/* Menu principal */
.main-navigation a,
.menu-item a {
    font-family: var(--font-body);
    font-weight: var(--font-medium);
    font-size: 13px;
}

/* Seções da homepage */
.hero-section h1 {
    font-family: var(--font-title-fun);
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: var(--primary);
}

.hero-section .subtitle {
    font-family: var(--font-title-script);
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    color: var(--secondary);
}

/* Cards de produtos/jogos */
.product-card h3,
.game-card h3 {
    font-family: var(--font-body);
    font-weight: var(--font-semibold);
    font-size: 1.25rem;
}

.product-card .description,
.game-card .description {
    font-family: var(--font-body);
    font-weight: var(--font-regular);
    font-size: 0.95rem;
}

/* Preços */
.price,
.woocommerce-Price-amount {
    font-family: var(--font-body);
    font-weight: var(--font-bold);
    color: var(--secondary);
}

/* Mascote - balões de fala */
.mascote-speech-bubble,
.speech-text {
    font-family: var(--font-body);
    font-weight: var(--font-medium);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Footer */
.site-footer {
    font-family: var(--font-body);
    font-weight: var(--font-regular);
    font-size: 0.9rem;
}

/* ====== EFEITOS E ANIMAÇÕES DE TEXTO ====== */

/* Efeito de destaque para títulos divertidos */
.title-fun.highlight {
    background: linear-gradient(45deg, var(--primary), var(--tertiary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Efeito de sombra para títulos script */
.title-script.shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* Animação sutil para títulos */
.title-animated {
    transition: all 0.3s ease;
}

.title-animated:hover {
    transform: translateY(-2px);
    text-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ====== CLASSES UTILITÁRIAS ====== */

/* Forçar fontes específicas */
.force-sunny-spells {
    font-family: var(--font-title-fun) !important;
}

.force-black-to-black {
    font-family: var(--font-title-script) !important;
}

.force-fredoka {
    font-family: var(--font-body) !important;
}

/* Centralização e alinhamento */
.text-center-typography {
    text-align: center;
    letter-spacing: 0.5px;
}

.text-fun-center {
    text-align: center;
    font-family: var(--font-title-fun);
    color: var(--primary);
}

/* ====== RESPONSIVIDADE MÓVEL ====== */

@media (max-width: 768px) {
    /* Ajustes para mobile */
    h1,
    .title-fun.large {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
        line-height: 1.1;
    }
    
    .title-script.large {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }
    
    p,
    .fredoka-text {
        font-size: clamp(0.9rem, 4vw, 1rem);
        line-height: 1.5;
    }
    
    /* Menu mobile */
    .mobile-menu .menu-item a {
        font-size: 1.1rem;
        font-weight: var(--font-medium);
    }
    
    /* Botões mobile */
    .btn,
    button {
        font-size: 0.95rem;
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {
    /* Ajustes para telas muito pequenas */
    .site-branding .site-title {
        font-size: 1.25rem;
    }
    
    .mascote-speech-bubble {
        font-size: 0.85rem;
    }
}