/**
 * LEMP · Design Tokens e Variáveis Globais CSS
 * Extraídos com fidelidade milimétrica do documento "LEMP - SITE 2027.pdf"
 *
 * Todas as variáveis usam o prefixo --lemp- para evitar colisão com o Bootstrap.
 */

:root {
    /* ==========================================================================
       1. CORES (PALETA CROMÁTICA DO PDF)
       ========================================================================== */
    /* Fundo geral da página: branco puro ultra-limpo conforme o PDF original */
    --lemp-color-bg: #FFFFFF;

    /* Fundo de superfície pura */
    --lemp-color-surface: #FFFFFF;

    /* Header e overlay de menu: preto carvão fosco minimalista (#141414) */
    --lemp-color-header: #141414;
    --lemp-color-menu-bg: #141414;

    /* Textos escuros: grafite ultra-escuro para títulos display e linhas (#1A1A1A) */
    --lemp-color-text-main: #1A1A1A;

    /* Textos secundários: cinza médio com contraste WCAG AA/AAA para parágrafos */
    --lemp-color-text-muted: #555555;

    /* Textos claros invertidos (utilizados no header e no menu fullscreen) */
    --lemp-color-text-light: #FFFFFF;

    /* Textos secundários invertidos (links secundários e divisores no menu escuro) */
    --lemp-color-text-dim: #8E8E8E;

    /* Contorno padrão para botões pílula e linhas de separação */
    --lemp-color-border: #1A1A1A;

    /* Contorno invertido para botões ou elementos sobre superfícies escuras */
    --lemp-color-border-light: rgba(255, 255, 255, 0.4);

    /* Linhas inferiores dos campos de formulário (estado de repouso) */
    --lemp-color-line-input: #D2D2D2;

    /* Linhas inferiores dos campos de formulário quando em foco */
    --lemp-color-line-focus: #1A1A1A;

    /* Cor base de placeholder para imagens de projetos antes de carregamento */
    --lemp-color-card-placeholder: #EBEBEB;


    /* ==========================================================================
       2. TIPOGRAFIA (FONTES E PESOS)
       ========================================================================== */
    /* Família tipográfica para Títulos Display (TT Firs Neue com fallback no Outfit) */
    --lemp-font-display: 'TT Firs Neue', 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Família tipográfica para Textos Corridos e Interface (Plus Jakarta Sans) */
    --lemp-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Pesos tipográficos calibrados com a identidade visual */
    --lemp-fw-thin: 200;      /* Utilizado para obter a leveza extrema dos títulos display */
    --lemp-fw-light: 300;     /* Utilizado para textos display em telas menores */
    --lemp-fw-regular: 400;   /* Texto corrido e parágrafos */
    --lemp-fw-medium: 500;    /* Botões pílula, labels de formulário e menu links */
    --lemp-fw-bold: 700;      /* Legendas dos cards de projetos (BOSSA, INCLUIR+, ALVE) */


    /* ==========================================================================
       3. ESCALA TIPOGRÁFICA FLUIDA COM CLAMP()
       Garante proporções perfeitas sem quebras abruptas do mobile ao desktop 4K
       ========================================================================== */
    /* Título principal do Hero: imponente, fino e proporcional à largura da tela */
    --lemp-font-hero: clamp(2.1rem, 4.8vw, 4.25rem);

    /* Título "VAMOS CONVERSAR" e links do menu em tela cheia */
    --lemp-font-display-lg: clamp(2.4rem, 6.2vw, 5.25rem);

    /* Título de Serviços ("SOMOS APAIXONADOS EM...") */
    --lemp-font-services-hero: clamp(1.8rem, 3.8vw, 3.25rem);

    /* Cabeçalhos de pilares (BRANDING, DESIGN, WEB) */
    --lemp-font-pillar-title: clamp(1.2rem, 2vw, 1.65rem);

    /* Legendas dos cards de projeto sobrepostas na imagem */
    --lemp-font-card-label: clamp(0.95rem, 1.4vw, 1.25rem);

    /* Texto corrido / Parágrafos descritivos da seção contato */
    --lemp-font-body-size: clamp(0.92rem, 1.1vw, 1.05rem);

    /* Botões em pílula (SOLICITE SUA PROPOSTA, FALE COM O ESTÚDIO, + PROJETOS) */
    --lemp-font-btn: clamp(0.68rem, 0.8vw, 0.8rem);

    /* Rótulos de campos de formulário (NOME:, TELEFONE:, etc.) */
    --lemp-font-label: clamp(0.72rem, 0.85vw, 0.82rem);

    /* Micro-tipografia (PT/EN, tags e copyright) */
    --lemp-font-micro: 0.75rem;


    /* ==========================================================================
       4. ENTRELINHAS (LINE-HEIGHT) E ESPAÇAMENTO DE LETRAS (LETTER-SPACING)
       ========================================================================== */
    /* Entrelinha compacta e arquitetônica dos títulos em caixa alta do PDF */
    --lemp-lh-display: 1.08;

    /* Entrelinha para subtítulos e cabeçalhos intermediários */
    --lemp-lh-heading: 1.25;

    /* Entrelinha confortável para leitura de parágrafos */
    --lemp-lh-body: 1.6;

    /* Letter-spacing levemente negativo para títulos display grandes */
    --lemp-ls-tight: -0.025em;

    /* Letter-spacing padrão para corpo de texto */
    --lemp-ls-normal: 0;

    /* Letter-spacing aberto para botões pílula e rótulos em caixa alta */
    --lemp-ls-wide: 0.07em;

    /* Letter-spacing expressivo para logotipo e links de rodapé */
    --lemp-ls-extra-wide: 0.12em;


    /* ==========================================================================
       5. ESPAÇAMENTOS VERTICAIS E GUTTERS
       ========================================================================== */
    --lemp-space-xs: 0.5rem;   /* 8px */
    --lemp-space-sm: 1rem;     /* 16px */
    --lemp-space-md: 1.5rem;   /* 24px */
    --lemp-space-lg: 2.5rem;   /* 40px */
    --lemp-space-xl: clamp(3rem, 6vw, 6rem);   /* Espaçamento entre seções */
    --lemp-space-xxl: clamp(4.5rem, 9vw, 8.5rem);

    /* Altura da barra superior fixa */
    --lemp-header-height: 72px;

    /* Margem lateral fluida do layout */
    --lemp-padding-x: clamp(1.25rem, 4.5vw, 4rem);


    /* ==========================================================================
       6. RAIOS DE BORDA (BORDER-RADIUS)
       ========================================================================== */
    /* Pílula perfeita para botões e chips de canais */
    --lemp-radius-pill: 9999px;

    /* Raio expressivo dos cards de projeto (BOSSA, INCLUIR+, ALVE) */
    --lemp-radius-card: 22px;

    /* Raio ligeiramente reduzido para dispositivos móveis */
    --lemp-radius-card-sm: 16px;


    /* ==========================================================================
       7. TRANSIÇÕES E ANIMAÇÕES REFINADAS
       ========================================================================== */
    /* Transição rápida e responsiva para botões e links */
    --lemp-trans-fast: 0.22s cubic-bezier(0.16, 1, 0.3, 1);

    /* Transição suave para abertura do menu overlay e modais */
    --lemp-trans-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* Transição cinemática para efeito de leve zoom nos cards ao hover */
    --lemp-trans-card: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}