/* Card: branco, borda, raio médio, sem sombra por padrão. */
.card {
  position: relative; overflow: hidden;
  padding: var(--space-5);
  border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-card);
}
.card > * + * { margin-top: var(--space-3); }
.card--rule { padding-top: calc(var(--space-5) + var(--rule-height)); }
.card--rule::before { content: ''; position: absolute; inset: 0 0 auto 0; height: var(--rule-height); background: var(--wp-gradient); }
.card--tint { background: color-mix(in srgb, var(--accent) 8%, var(--wp-white)); border-color: color-mix(in srgb, var(--accent) 16%, var(--wp-white)); --text-heading: var(--wp-ink); --text-body: var(--wp-ink); --text-secondary: var(--wp-ink-muted); }
.card--solid { background: var(--accent); border-color: var(--accent); --text-heading: var(--on-accent); --text-body: var(--on-accent); --text-secondary: var(--on-accent); color: var(--on-accent); }
.card--elevated { box-shadow: var(--shadow-card); }
.card--interactive { transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
.card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); border-color: var(--accent); }
.card__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent); }
.card__icon .icon { width: 22px; height: 22px; }