/* Core — Icon, Button, IconButton, Logo, Badge, Tag, Card.
 * Port fiel dos style={{...}} dos .jsx; todo valor vem de token (tokens/*.css).
 * Estados forçados (.is-hover/.is-active/.is-focus) existem para o showcase mostrar
 * cada estado parado — em produção quem dispara é :hover/:active/:focus-visible. */

/* ── Icon ─────────────────────────────────────────────────────────────── */
.vz-icon{
  display:inline-flex;flex:0 0 auto;
  width:var(--vz-icon-size,var(--vz-size-icon));height:var(--vz-icon-size,var(--vz-size-icon));
  background-color:currentColor;
  -webkit-mask:var(--vz-icon-src) center/contain no-repeat;
          mask:var(--vz-icon-src) center/contain no-repeat;
}

/* ── Spinner (estado loading) ─────────────────────────────────────────── */
.vz-spinner{
  width:var(--vz-size-spinner);height:var(--vz-size-spinner);flex:0 0 auto;
  border-radius:var(--radius-pill);
  border:var(--border-thick) solid currentColor;border-right-color:transparent;
  animation:vz-spin var(--vz-spin-duration) linear infinite;
}
@keyframes vz-spin{to{transform:rotate(1turn)}}

/* ── Button ───────────────────────────────────────────────────────────── */
.vz-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:var(--weight-semibold);
  line-height:var(--vz-leading-control);letter-spacing:var(--vz-tracking-button);white-space:nowrap;
  border-radius:var(--radius-pill);border:var(--border-hair) solid transparent;
  cursor:pointer;text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.vz-btn--sm{padding:var(--vz-pad-btn-sm);font-size:var(--text-body-sm);gap:var(--vz-gap-sm)}
.vz-btn--md{padding:var(--vz-pad-btn-md);font-size:var(--text-body);gap:var(--vz-gap-md)}
.vz-btn--lg{padding:var(--vz-pad-btn-lg);font-size:var(--text-body-lg);gap:var(--vz-gap-lg)}
.vz-btn--full{display:flex;width:100%}
/* Nunca mais largo que o contêiner. Em tela estreita o rótulo quebra em vez de vazar — no desktop
   a linha de botões quebra antes (flex-wrap) e o rótulo continua numa linha só. */
.vz-btn{max-width:100%}
@media (max-width:30em){.vz-btn{white-space:normal;text-align:center}}

/* CTA coral: on-accent sobre coral dá 3.11:1 — passa no AA só como "texto grande" (WCAG: ≥ 14pt em
   negrito). Por isso o primário é sempre negrito e, no tamanho lg, sobe para --vz-btn-cta-lg (19px). */
.vz-btn--primary{background:var(--surface-accent);color:var(--text-on-accent);font-weight:var(--weight-bold)}
.vz-btn--primary.vz-btn--lg{font-size:var(--vz-btn-cta-lg)}
.vz-btn--brand{background:var(--vz-mint);color:var(--vz-petrol-deep)}
.vz-btn--solid{background:var(--surface-brand);color:var(--text-on-brand)}
.vz-btn--secondary{
  background:var(--surface-glass-strong);color:var(--text-primary);border-color:var(--border-glass);
  -webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));
}
.vz-btn--ghost{background:transparent;color:var(--text-secondary)}

.vz-btn:is(:hover,.is-hover):not(:disabled,[aria-disabled="true"]){transform:scale(var(--hover-scale))}
.vz-btn--primary:is(:hover,.is-hover):not(:disabled,[aria-disabled="true"]){background:var(--surface-accent-hover);box-shadow:var(--glow-coral)}
.vz-btn--brand:is(:hover,.is-hover):not(:disabled,[aria-disabled="true"]){background:var(--vz-mint-bright);box-shadow:var(--glow-mint)}
.vz-btn--solid:is(:hover,.is-hover):not(:disabled,[aria-disabled="true"]){background:var(--surface-brand-hover);box-shadow:var(--glow-teal-sm)}
.vz-btn--secondary:is(:hover,.is-hover):not(:disabled,[aria-disabled="true"]){border-color:var(--interactive-hover);color:var(--interactive-hover-soft)}
.vz-btn--ghost:is(:hover,.is-hover):not(:disabled,[aria-disabled="true"]){color:var(--interactive-hover-soft)}
.vz-btn:is(:active,.is-active):not(:disabled,[aria-disabled="true"]){transform:scale(var(--press-scale));transition-duration:var(--dur-instant)}
.vz-btn.is-focus{outline:var(--border-thick) solid var(--border-focus);outline-offset:var(--border-thick)}
.vz-btn:is(:disabled,[aria-disabled="true"]){cursor:not-allowed;opacity:var(--vz-opacity-disabled)}
.vz-btn.is-loading{cursor:progress;opacity:1}
.vz-btn.is-loading .vz-btn__label{opacity:var(--vz-opacity-dismiss)}

/* ── IconButton ───────────────────────────────────────────────────────── */
.vz-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  border-radius:var(--radius-pill);border:var(--border-hair) solid transparent;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.vz-iconbtn--sm{width:var(--vz-size-iconbtn-sm);height:var(--vz-size-iconbtn-sm)}
.vz-iconbtn--md{width:var(--vz-size-iconbtn-md);height:var(--vz-size-iconbtn-md)}
.vz-iconbtn--lg{width:var(--vz-size-iconbtn-lg);height:var(--vz-size-iconbtn-lg)}
.vz-iconbtn--glass{
  background:var(--surface-glass);color:var(--text-primary);border-color:var(--border-glass);
  -webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));
}
.vz-iconbtn--light{background:var(--vz-offwhite);color:var(--vz-graphite)}
.vz-iconbtn--outline{background:transparent;color:var(--text-secondary);border-color:var(--border-strong)}
.vz-iconbtn:is(:hover,.is-hover):not(:disabled){transform:scale(var(--hover-scale))}
.vz-iconbtn--glass:is(:hover,.is-hover):not(:disabled){background:var(--surface-glass-strong)}
.vz-iconbtn--light:is(:hover,.is-hover):not(:disabled){background:var(--vz-white)}
.vz-iconbtn--outline:is(:hover,.is-hover):not(:disabled){background:var(--surface-glass)}
.vz-iconbtn:is(:active,.is-active):not(:disabled){transform:scale(var(--press-scale))}
.vz-iconbtn.is-focus{outline:var(--border-thick) solid var(--border-focus);outline-offset:var(--border-thick)}
.vz-iconbtn:disabled{cursor:not-allowed;opacity:var(--vz-opacity-disabled)}
.vz-iconbtn.is-loading{cursor:progress;opacity:1}

/* ── Logo ─────────────────────────────────────────────────────────────── */
.vz-logo{display:block;width:auto;max-width:100%}
.vz-logo--invert{filter:brightness(0) invert(1)}

/* ── Badge ────────────────────────────────────────────────────────────── */
.vz-badge{
  display:inline-flex;align-items:center;gap:var(--vz-gap-xs);white-space:nowrap;
  padding:var(--vz-pad-badge);border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:var(--text-caption);font-weight:var(--weight-semibold);
  line-height:var(--vz-leading-badge);border:var(--border-hair) solid transparent;
}
.vz-badge__dot{width:var(--vz-size-xs);height:var(--vz-size-xs);border-radius:var(--radius-pill);background:currentColor}
.vz-badge--neutral{background:var(--surface-glass);color:var(--text-secondary);border-color:var(--border-subtle)}
.vz-badge--brand{background:var(--vz-tint-teal-20);color:var(--vz-mint-bright);border-color:var(--border-glass)}
.vz-badge--accent{background:var(--vz-tint-coral-18);color:var(--vz-on-tint-coral);border-color:var(--vz-tint-coral-32)}
.vz-badge--success{background:var(--vz-mint);color:var(--status-success-ink);border-color:transparent}
.vz-badge--warning{background:var(--vz-tint-amber-18);color:var(--vz-on-tint-amber);border-color:var(--vz-tint-amber-34)}
.vz-badge--danger{background:var(--vz-tint-error-18);color:var(--vz-on-tint-error);border-color:var(--vz-tint-error-34)}

/* ── Tag ──────────────────────────────────────────────────────────────── */
.vz-tag{
  display:inline-flex;align-items:center;gap:var(--vz-gap-sm);
  padding:var(--vz-pad-tag);border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--weight-medium);
  background:var(--surface-glass);color:var(--text-secondary);
  border:var(--border-hair) solid var(--border-subtle);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.vz-tag--interactive{cursor:pointer}
.vz-tag:is(:hover,.is-hover):not(.is-selected,.is-disabled){background:var(--surface-glass-strong)}
.vz-tag.is-selected{background:var(--vz-petrol);color:var(--vz-offwhite);border-color:var(--border-brand)}
.vz-tag.is-focus{outline:var(--border-thick) solid var(--border-focus);outline-offset:var(--border-thick)}
.vz-tag.is-disabled,.vz-tag:disabled{opacity:var(--vz-opacity-disabled-soft);cursor:not-allowed}
.vz-tag__remove{
  display:inline-flex;background:none;border:0;padding:0;cursor:pointer;color:inherit;
  opacity:var(--vz-opacity-dismiss);transition:opacity var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.vz-tag__remove:hover:not(:disabled){opacity:1;color:var(--interactive-hover-soft)}
.vz-tag__remove:disabled{cursor:not-allowed}

/* ── Card ─────────────────────────────────────────────────────────────── */
.vz-card{
  position:relative;display:block;text-decoration:none;
  border:var(--border-hair) solid transparent;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);
}
.vz-card--pad-none{padding:0}
.vz-card--pad-sm{padding:var(--space-4)}
.vz-card--pad-md{padding:var(--space-6)}
.vz-card--pad-lg{padding:var(--space-8)}
.vz-card--r-none{border-radius:0}
.vz-card--r-md{border-radius:var(--radius-md)}
.vz-card--r-lg{border-radius:var(--radius-lg)}
.vz-card--r-xl{border-radius:var(--radius-xl)}
.vz-card--r-2xl{border-radius:var(--radius-2xl)}
.vz-card--dark{background:var(--surface-raised);color:var(--text-primary);border-color:var(--border-subtle)}
.vz-card--glass{
  background:var(--surface-glass);color:var(--text-primary);border-color:var(--border-glass);
  -webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));
}
.vz-card--light{background:var(--vz-offwhite);color:var(--vz-graphite);box-shadow:var(--shadow-md)}
.vz-card--petrol{background:var(--vz-petrol);color:var(--vz-offwhite);border-color:var(--vz-tint-mint-18)}
.vz-card--interactive:is(:hover,.is-hover,:focus-visible){transform:translateY(var(--hover-lift))}
.vz-card--interactive.vz-card--dark:is(:hover,.is-hover,:focus-visible),
.vz-card--interactive.vz-card--glass:is(:hover,.is-hover,:focus-visible){box-shadow:var(--glow-teal-sm)}
.vz-card--interactive.vz-card--light:is(:hover,.is-hover,:focus-visible){box-shadow:var(--shadow-lg)}
.vz-card--interactive.vz-card--petrol:is(:hover,.is-hover,:focus-visible){box-shadow:var(--glow-teal)}
.vz-card.is-focus{outline:var(--border-thick) solid var(--border-focus);outline-offset:var(--border-thick)}
.vz-card__index{
  position:absolute;right:var(--space-4);bottom:var(--space-3);
  font-family:var(--font-body);font-size:var(--text-micro);letter-spacing:var(--tracking-wide);color:var(--text-muted);
}
.vz-card--light .vz-card__index{color:var(--vz-graphite-60)}