/* Vokattus · Revenda — base. Tokens copiados de design-system/tokens.json (tema Preto). */

:root {
  color-scheme: dark;
  /* paleta oficial */
  --preto: #000000; --branco: #ffffff;
  --cinza-900: #1a1a1a; --cinza-800: #333333; --cinza-700: #4d4d4d; --cinza-600: #666666;
  --cinza-500: #808080; --cinza-400: #999999; --cinza-300: #b3b3b3; --cinza-200: #cccccc; --cinza-100: #e6e6e6;
  /* papéis (tema Preto) */
  --fundo: var(--preto); --superficie: var(--cinza-900);
  --texto: var(--branco); --texto-suave: var(--cinza-200); --texto-fraco: var(--cinza-400);
  --linha: var(--cinza-800); --linha-forte: var(--cinza-500);
  --linha-grade: rgba(255, 255, 255, .13); /* grafismo de fundo: um pouco mais suave que --linha (.20) */
  --acao: var(--branco); --acao-texto: var(--preto); --acao-hover: var(--cinza-200);
  --foco: var(--branco); --erro: #ff8a80;
  /* tipo */
  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-sans: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-marcador: "Permanent Marker", "Comic Sans MS", cursive;
  /* espaço */
  --espaco-1: 4px; --espaco-2: 8px; --espaco-3: 12px; --espaco-4: 16px; --espaco-6: 24px; --espaco-8: 32px;
  --espaco-12: 48px; --espaco-16: 64px; --espaco-24: 96px; --espaco-32: 128px;
  /* forma */
  --raio-0: 0px; --raio-1: 2px; --raio-disco: 50%;
  --borda-fina: 1px; --borda-media: 2px;
  --aurea: 1.618; --aurea-maior: 61.8%; --aurea-menor: 38.2%;
  --largura-pagina: 1200px; --largura-texto: 640px; --largura-form: 480px;
  --altura-header: 72px;
}

/* Seção clara: mesmo sistema, tema Branco */
.secao--claro {
  color-scheme: light;
  --fundo: var(--branco); --superficie: var(--cinza-100);
  --texto: var(--preto); --texto-suave: var(--cinza-800); --texto-fraco: var(--cinza-600);
  --linha: var(--cinza-200); --linha-forte: var(--cinza-500);
  --linha-grade: rgba(0, 0, 0, .13);
  --acao: var(--preto); --acao-texto: var(--branco); --acao-hover: var(--cinza-800);
  --foco: var(--preto); --erro: #b3261e;
}
.secao--claro .vk-tinta-branco { display: none; }
.secao--claro .vk-tinta-preto { display: block; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--altura-header) + 16px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--font-sans); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; }

/* Estrutura */
.secao { background: var(--fundo); color: var(--texto); padding-block: var(--espaco-24); position: relative; }
@media (max-width: 720px) { .secao { padding-block: var(--espaco-16); } }
.container { width: 100%; max-width: calc(var(--largura-pagina) + 2 * 24px); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 721px) { .container { padding-left: 24px; padding-right: 24px; } }

/* Títulos padrão de seção */
.eyebrow { display: inline-block; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--texto-fraco); }
.titulo-secao { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: clamp(34px, 5vw, 48px); line-height: 1.02; letter-spacing: -.005em; text-wrap: balance; }
.apoio { color: var(--texto-suave); max-width: var(--largura-texto); }

/* Espaços vazios para recursos que ainda não temos */
.placeholder {
  position: relative; width: 100%; max-width: 100%; background: var(--superficie);
  border: var(--borda-fina) dashed var(--linha-forte); display: flex; align-items: flex-end; overflow: hidden;
  aspect-ratio: var(--ph-ratio, 4 / 5);
}
.placeholder::before {
  content: ""; position: absolute; inset: 0; opacity: .6;
  background-image:
    linear-gradient(90deg, transparent 0 23.6%, var(--linha) 23.6% calc(23.6% + 1px), transparent 0 61.8%, var(--linha) 61.8% calc(61.8% + 1px), transparent 0),
    linear-gradient(180deg, transparent 0 38.2%, var(--linha) 38.2% calc(38.2% + 1px), transparent 0);
}
.placeholder__rotulo { position: relative; margin: var(--espaco-4); padding: 6px 10px; background: var(--fundo); color: var(--texto-fraco); font-size: 11px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; max-width: calc(100% - 32px); }

/* Dado ainda não confirmado: aparece destacado para o time ver na revisão */
.pendente { background: repeating-linear-gradient(-45deg, transparent 0 4px, rgba(128,128,128,.18) 4px 8px); outline: 1px dashed var(--linha-forte); outline-offset: 1px; padding-inline: 2px; }
body.publicacao .pendente { background: none; outline: 0; }

/* Acessibilidade */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular-conteudo { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--acao); color: var(--acao-texto); padding: 12px 16px; }
.pular-conteudo:focus { top: 16px; }
:focus-visible { outline: var(--borda-media) solid var(--foco); outline-offset: 2px; }

/* Espaço já preenchido com imagem real (mockup oficial ou foto) */
.placeholder.placeholder--preenchido { border: 0 !important; background: var(--superficie); }
.placeholder--preenchido::before { display: none; }
.placeholder--preenchido > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }