/* ═══════════ Elevação UI/UX compartilhada — sutil luxuoso (2026-06-08) ═══════════
   Companion do cca-system.css. Foco a11y, reveal, sombras, sublinhado de link.
   Tokens com fallback pra não quebrar. */

/* Sombras em camadas (profundidade discreta) */
:root {
  --shadow-card: 0 1px 2px rgba(10,10,10,.05), 0 4px 16px rgba(10,10,10,.06);
  --shadow: 0 2px 4px rgba(10,10,10,.05), 0 16px 48px rgba(10,10,10,.12);
  --e-lift: 0 10px 22px rgba(10,10,10,.08), 0 28px 60px rgba(10,10,10,.14);
}

/* Foco acessível (a11y CRÍTICO) — dourado, canto curvo, digno de teclado */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.cta-gold:focus-visible, .cta-terra:focus-visible, .cta-light:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent-gold, #a07a3f);
  outline-offset: 3px; border-radius: 6px;
}

/* Números tabulares em tabelas de dados (não dançam) */
.post-body table td, .post-body table th, table.formal td { font-variant-numeric: tabular-nums; }

/* Botões: press mais nítido (curva luxuosa tokenizada) */
.btn { transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .25s cubic-bezier(.2,.7,.2,1), background .2s cubic-bezier(.2,.7,.2,1); }
.btn:active { transform: translateY(1px) scale(.99); }

/* Links de conteúdo: sublinhado fino e elegante (escopado ao corpo do post)
   Sem color-mix (compat): rgba fixo quente. */
.post-body a:not(.btn):not(.cta-gold):not(.cta-terra):not(.cta-light) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(160,122,63,.45);
  transition: text-decoration-color .2s cubic-bezier(.2,.7,.2,1);
}
.post-body a:not(.btn):not(.cta-gold):not(.cta-terra):not(.cta-light):hover { text-decoration-color: var(--accent-gold, #a07a3f); }

/* CTA do post: profundidade premium + ícones de share com leve lift */
.post-cta { box-shadow: var(--e-lift); }
.share-btn { transition: transform .18s cubic-bezier(.2,.7,.2,1), color .18s ease; }
.share-btn:hover { transform: translateY(-2px); }

/* Reveal no scroll (classe só adicionada via reveal.js; sem JS nada esconde)
   Refino 2026-07: deslocamento menor (16px), entrada mais macia. */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { scroll-behavior: auto !important; }
}