/**
 * design-tokens.css — Depiladoras.com.br
 *
 * Fonte da verdade visual do projeto, extraída de MANUAL_DEIDENTIDADE_VISUAL.pdf
 * (oficial) + decisão de tipografia secundária (Inter). Ver identidade-visual.md
 * para o racional de cada escolha.
 *
 * COMO USAR: inclua este arquivo em toda página (<link rel="stylesheet" href="/assets/css/design-tokens.css">)
 * e use sempre var(--cor-x) / var(--fonte-x) em vez de hex/nome de fonte direto no CSS.
 */

@import url('https://fonts.googleapis.com/css2?family=Epilogue:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* ============ Paleta Padrão (perfil gratuito, marca institucional) ============ */
    --cor-amarelo: #FFC400;
    --cor-amarelo-80: #FFD033;
    --cor-amarelo-60: #FFDC66;
    --cor-amarelo-40: #FFE799;
    --cor-amarelo-20: #FFF3CC;

    --cor-marrom: #422622;
    --cor-marrom-80: #68514E;
    --cor-marrom-60: #8E7D7A;
    --cor-marrom-40: #B3A8A7;
    --cor-marrom-20: #D9D4D3;

    --cor-branco: #FFFFFF;

    /* ============ Paleta Premium (espelha plan_planos.slug = 'premium') ============ */
    --cor-premium-azul-escuro: #050D10;
    --cor-premium-azul-escuro-80: #373D40;
    --cor-premium-azul-escuro-60: #696E70;
    --cor-premium-azul-escuro-40: #9B9E9F;
    --cor-premium-azul-escuro-20: #CDCFCF;

    --cor-premium-dourado: #C6A76B;
    --cor-premium-dourado-80: #D1B989;
    --cor-premium-dourado-60: #DDCAA6;
    --cor-premium-dourado-40: #E8DCC4;
    --cor-premium-dourado-20: #F4EDE1;

    --cor-premium-branco: #FFFFFF;

    /* ============ Semânticas (use estas no dia a dia, não as cores cruas acima) ============ */
    --cor-fundo: var(--cor-branco);
    --cor-texto: var(--cor-marrom);
    --cor-texto-suave: var(--cor-marrom-60);
    --cor-destaque: var(--cor-amarelo);
    --cor-destaque-hover: #E6AF00; /* amarelo ~10% mais escuro, para hover/active de botão */
    --cor-borda: var(--cor-marrom-20);

    /* Ativar quando o contexto é especificamente premium (ex.: classe .premium no card/perfil) */
    --cor-premium-fundo: var(--cor-premium-azul-escuro);
    --cor-premium-texto: var(--cor-premium-branco);
    --cor-premium-destaque: var(--cor-premium-dourado);

    /* ============ Tipografia ============ */
    --fonte-display: 'Epilogue', sans-serif;   /* títulos, wordmark, destaques */
    --fonte-corpo: 'Inter', sans-serif;          /* texto corrido, formulários, UI */

    --peso-display-padrao: 600;  /* Semi Bold — peso usado no wordmark oficial */
    --peso-corpo-padrao: 400;
    --peso-corpo-medio: 500;

    /* ============ Espaçamento de logo (arejamento / clear space) ============ */
    /* Nunca posicione outro elemento mais próximo do logo do que esta margem. */
    --logo-clearspace: 1em;

    /* ============ Raio de borda — hexágono inspira formas levemente angulares,
       mas para componentes de UI (cards, botões, inputs) um raio moderado mantém
       a interface legível sem virar pílula nem ficar quadrada demais. ============ */
    --raio-padrao: 8px;
    --raio-grande: 16px;
}

/* Reset tipográfico mínimo usando os tokens acima */
body {
    font-family: var(--fonte-corpo);
    font-weight: var(--peso-corpo-padrao);
    color: var(--cor-texto);
    background-color: var(--cor-fundo);
}

h1, h2, h3, h4, .fonte-display {
    font-family: var(--fonte-display);
    font-weight: var(--peso-display-padrao);
}

/* Estado premium — aplicar a classe .premium no card/seção do perfil
   (ver seção 10 da arquitetura: "selo premium visual") */
.premium {
    background-color: var(--cor-premium-fundo);
    color: var(--cor-premium-texto);
}
.premium .fonte-display,
.premium .destaque {
    color: var(--cor-premium-destaque);
}