/* =========================================================================
   Belavolta · tokens de design v1.1
   Fonte única de verdade. Valores marcados [guia] vêm do guia de marca;
   [novo] foram definidos agora para cobrir estados e componentes.
   Carregar as fontes antes:
   https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Manrope:wght@400;500;600;700&display=swap
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---------- Cores base [guia] ---------- */
  --bv-fundo: #F7F5F0;          /* linho, fundo principal */
  --bv-superficie: #FFFFFF;     /* cards, campos, barra inferior */
  --bv-areia: #E9E1D3;          /* faixas suaves, avatar de iniciais */
  --bv-linha: #DDD8CE;          /* bordas e divisórias, nunca texto */
  --bv-grafite: #1A1A1A;        /* texto principal, títulos, botão principal */
  --bv-pedra: #6B6760;          /* texto secundário, legendas (5:1) */
  --bv-latao: #9A7B4F;          /* marca: logo, símbolo, anel, texto >= 24px */
  --bv-latao-texto: #7A5F38;    /* latão para texto pequeno e links (5,4:1) */

  /* ---------- Estados do produto [guia] + fundos [novo] ---------- */
  --bv-voltou: #2E6A4F;
  --bv-voltou-fundo: #E3EFE8;   /* 5,4:1 com o texto voltou */
  --bv-sumindo: #95591A;
  --bv-sumindo-fundo: #F5ECDF;  /* 4,8:1 */
  --bv-erro: #A33A2E;
  --bv-erro-fundo: #F6E4E1;     /* 5,3:1 */
  --bv-neutro-fundo: var(--bv-areia); /* selo neutro: "Nova", "Sem visita" */

  /* ---------- Superfícies escuras dentro do tema claro [novo] ----------
     Card de destaque grafite (Início), card de Stories, aviso (toast). */
  --bv-escuro-fundo: #1A1A1A;
  --bv-escuro-texto: #F7F5F0;
  --bv-escuro-texto-2: #D8D2C6;  /* secundário sobre grafite (11,5:1) */
  --bv-escuro-latao: #CDAF7F;    /* número e itálico sobre grafite (8,3:1) */
  --bv-escuro-linha: #3A3732;

  /* ---------- Interação [novo] ---------- */
  --bv-botao-fundo: var(--bv-grafite);
  --bv-botao-texto: var(--bv-fundo);
  --bv-botao-fundo-hover: #33302C;
  --bv-botao-fundo-ativo: #000000;
  --bv-superficie-hover: #F0EDE6;     /* linha de lista, card clicável, item de menu */
  --bv-superficie-ativa: #E9E4DA;
  --bv-selecionado-fundo: var(--bv-areia);  /* item de navegação ativo no computador, linha selecionada */
  --bv-borda-hover: #C9C2B5;          /* campo com mouse em cima */
  --bv-borda-forte: var(--bv-grafite);/* campo em foco, botão secundário */
  --bv-foco: #7A5F38;                 /* anel de foco visível, 5,4:1 sobre fundo */
  --bv-desabilitado-fundo: #ECE9E2;
  --bv-desabilitado-texto: #9C978E;   /* isento de contraste (WCAG 1.4.3), nunca para texto ativo */
  --bv-desabilitado-borda: #E2DED6;
  --bv-overlay: rgba(26, 26, 26, 0.48);   /* atrás de folha inferior e diálogo */
  --bv-skeleton: #ECE7DE;

  /* ---------- Tipografia [guia] ---------- */
  --bv-fonte-display: "Fraunces", Georgia, serif;
  --bv-fonte-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;

  /* ---------- Espaçamento: base 4px [guia] + 64 [novo] ---------- */
  --bv-espaco-1: 4px;
  --bv-espaco-2: 8px;
  --bv-espaco-3: 12px;
  --bv-espaco-4: 16px;
  --bv-espaco-5: 24px;
  --bv-espaco-6: 32px;
  --bv-espaco-7: 48px;
  --bv-espaco-8: 64px;
  --bv-margem-tela: 20px;            /* celular; 32px a partir de 768px */
  --bv-largura-app: 1120px;          /* conteúdo do app no computador */
  --bv-largura-leitura: 640px;       /* formulários, mensagem, textos longos */
  --bv-alvo-toque: 44px;             /* mínimo para TUDO que é clicável */

  /* ---------- Raios [guia] ---------- */
  --bv-raio-xs: 6px;    /* [novo] caixa de seleção */
  --bv-raio-sm: 8px;
  --bv-raio-md: 12px;   /* botões e campos */
  --bv-raio-lg: 16px;   /* cards, área de mensagem */
  --bv-raio-xl: 22px;   /* card de destaque, folha inferior, card de Stories */
  --bv-raio-pill: 999px;

  /* ---------- Sombras [novo] ----------
     A marca é plana: cards usam borda, não sombra. Sombra só para o que flutua. */
  --bv-sombra-flutuante: 0 1px 2px rgba(26, 26, 26, 0.06), 0 8px 24px rgba(26, 26, 26, 0.10); /* menu, popover, seletor */
  --bv-sombra-aviso: 0 10px 30px rgba(26, 26, 26, 0.16);   /* toast */
  --bv-sombra-folha: 0 -8px 32px rgba(26, 26, 26, 0.12);   /* folha inferior */
  --bv-sombra-dialogo: 0 24px 64px rgba(26, 26, 26, 0.20); /* diálogo central (computador) */

  /* ---------- Movimento [novo] ---------- */
  --bv-duracao-rapida: 120ms;   /* hover, toque, cor */
  --bv-duracao-media: 200ms;    /* interruptor, selo, abas, campo */
  --bv-duracao-lenta: 320ms;    /* folha inferior, diálogo, troca de tela */
  --bv-duracao-anel: 900ms;     /* preenchimento do anel */
  --bv-curva-padrao: cubic-bezier(0.2, 0, 0, 1);        /* entra rápido, assenta suave */
  --bv-curva-saida: cubic-bezier(0.4, 0, 1, 1);         /* elementos saindo */
  --bv-curva-enfatica: cubic-bezier(0.65, 0, 0.35, 1);  /* anel, números contando */
  --bv-curva-mola: cubic-bezier(0.34, 1.56, 0.64, 1);   /* ponto entrando na abertura, confirmação */

  /* ---------- Camadas [novo] ---------- */
  --bv-z-navegacao: 10;
  --bv-z-flutuante: 20;
  --bv-z-overlay: 30;
  --bv-z-aviso: 40;
}

/* ---------- Tema escuro [guia] + estados [novo] ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bv-fundo: #141414;
  --bv-superficie: #222120;
  --bv-areia: #2E2A24;
  --bv-linha: #3A3732;
  --bv-grafite: #F7F5F0;
  --bv-pedra: #B3AEA5;
  --bv-latao: #B89766;
  --bv-latao-texto: #CDAF7F;
  --bv-voltou: #6FBF95;
  --bv-voltou-fundo: #1C3328;
  --bv-sumindo: #E0A25A;
  --bv-sumindo-fundo: #3A2C1A;
  --bv-erro: #E58475;
  --bv-erro-fundo: #3A1F1B;
  --bv-escuro-fundo: #222120;
  --bv-escuro-linha: #3A3732;
  --bv-botao-fundo: #F7F5F0;
  --bv-botao-texto: #1A1A1A;
  --bv-botao-fundo-hover: #E4DFD5;
  --bv-botao-fundo-ativo: #FFFFFF;
  --bv-superficie-hover: #2A2826;
  --bv-superficie-ativa: #33302C;
  --bv-borda-hover: #55514A;
  --bv-foco: #CDAF7F;
  --bv-desabilitado-fundo: #2A2826;
  --bv-desabilitado-texto: #6E6A63;
  --bv-desabilitado-borda: #33302C;
  --bv-overlay: rgba(0, 0, 0, 0.6);
  --bv-skeleton: #2A2826;
  --bv-sombra-flutuante: 0 0 0 1px #3A3732, 0 8px 24px rgba(0, 0, 0, 0.5);
  --bv-sombra-aviso: 0 0 0 1px #3A3732, 0 10px 30px rgba(0, 0, 0, 0.5);
  --bv-sombra-folha: 0 -1px 0 #3A3732;
  --bv-sombra-dialogo: 0 0 0 1px #3A3732, 0 24px 64px rgba(0, 0, 0, 0.6);
}

@media (min-width: 768px) {
  :root { --bv-margem-tela: 32px; }
}

/* ---------- Estilos de texto [guia] + [novo] ---------- */
.bv-display      { font: 380 44px/1.1 var(--bv-fonte-display); letter-spacing: -0.8px; font-optical-sizing: auto; }
.bv-titulo       { font: 420 28px/1.2 var(--bv-fonte-display); letter-spacing: -0.4px; font-optical-sizing: auto; }
.bv-saudacao     { font: 400 30px/1.15 var(--bv-fonte-display); letter-spacing: -0.5px; } /* [novo] "Bom dia, Carla." */
.bv-nome-cliente { font: 420 22px/1.2 var(--bv-fonte-display); }
.bv-numero       { font: 400 34px/1 var(--bv-fonte-display); font-variant-numeric: lining-nums tabular-nums; } /* [novo] R$ 840 */
.bv-subtitulo    { font: 600 18px/1.4 var(--bv-fonte-sans); }
.bv-secao        { font: 700 15px/1.3 var(--bv-fonte-sans); }  /* [novo] título de bloco dentro da tela */
.bv-corpo        { font: 400 16px/1.5 var(--bv-fonte-sans); }
.bv-item         { font: 700 15px/1.3 var(--bv-fonte-sans); }  /* [novo] nome em linha de lista */
.bv-rotulo       { font: 600 14px/1.3 var(--bv-fonte-sans); }  /* [novo] rótulo de campo, botão pequeno */
.bv-botao        { font: 600 15px/1 var(--bv-fonte-sans); }
.bv-legenda      { font: 400 13px/1.4 var(--bv-fonte-sans); color: var(--bv-pedra); }
.bv-selo         { font: 700 12px/1 var(--bv-fonte-sans); letter-spacing: 0.1px; }
.bv-nav          { font: 500 12px/1 var(--bv-fonte-sans); }    /* ativo: 700 */
.bv-destaque     { font-style: italic; color: var(--bv-latao-texto); } /* uma vez por título, no máximo */

@media (min-width: 1024px) {
  .bv-display { font-size: 56px; letter-spacing: -1.2px; } /* só landing page */
}

/* ---------- Foco visível, igual em tudo [novo] ---------- */
:where(a, button, input, select, textarea, [role="button"], [role="switch"], [tabindex]):focus-visible {
  outline: 2px solid var(--bv-foco);
  outline-offset: 2px;
}

/* ---------- Reduzir movimento [novo] ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}