@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&family=Outfit:wght@700&display=swap');
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 24px; background: var(--surface); color: var(--ink); }
.wc-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-6); }
.wc-stack { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); max-width: 420px; }

/* Button */
.wc-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 40px; font-family: var(--font-sans); font-weight: 800; font-size: 14px; line-height: 20px; border-radius: var(--radius-none); border: 2px solid transparent; cursor: pointer; padding: 8px var(--space-4); text-decoration: none; }
.wc-btn-sm { min-height: 32px; font-size: 12px; padding: 4px var(--space-3); }
.wc-btn-primary { background: var(--gradient-button); color: var(--on-gradient); }
/* Seta de avanço: <span class="wc-btn-arrow" aria-hidden="true"></span> depois do rótulo */
.wc-btn-arrow::before { content: "\2192"; font-weight: 400; font-size: 1.15em; line-height: 1; }
.wc-btn-accent { background: var(--accent); color: var(--on-accent); }
.wc-btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.wc-btn-ghost { background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; padding-left: var(--space-2); padding-right: var(--space-2); }
.wc-btn:hover { filter: brightness(1.06); }
.wc-btn-secondary:hover { border-color: var(--ink); }
.wc-btn:focus-visible, .wc-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wc-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }

/* Tag */
.wc-tag { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 800; font-size: 12px; line-height: 16px; letter-spacing: .06em; text-transform: uppercase; padding: 4px var(--space-2); border-radius: var(--radius-none); color: var(--on-accent); }
.wc-tag-neutral { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.wc-tag-lime { background: var(--lime); }
.wc-tag-teal { background: var(--teal); }
.wc-tag-mint { background: var(--mint); }
.wc-tag-warning { background: var(--warning); }
.wc-tag-danger { background: var(--danger-fill); }

/* Card */
.wc-card { background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-none); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.wc-eyebrow { font-weight: 800; font-size: 12px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.wc-card-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 28px; }
.wc-card-body { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.wc-card-footer { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); display: flex; gap: var(--space-3); align-items: center; }

/* TextField */
.wc-field { display: flex; flex-direction: column; gap: var(--space-2); }
.wc-field-label { font-weight: 800; font-size: 12px; line-height: 16px; color: var(--ink); }
.wc-input { box-sizing: border-box; min-height: 40px; font: inherit; font-size: 14px; line-height: 20px; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-none); padding: var(--space-2) var(--space-3); }
.wc-input::placeholder { color: var(--ink-muted); }
.wc-field-hint { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.wc-field-error .wc-input { border-color: var(--danger); }
.wc-field-error .wc-field-hint { color: var(--danger); }

/* CheckerStrip */
.wc-strip { display: flex; width: 100%; }
.wc-strip-bar { flex: 1; }
.wc-strip-checker { display: block; flex: none; }
.wc-strip-ink .wc-strip-bar { background: var(--ink); } .wc-strip-ink rect { fill: var(--ink); }
.wc-strip-mint .wc-strip-bar { background: var(--mint); } .wc-strip-mint rect { fill: var(--mint); }
.wc-strip-lime .wc-strip-bar { background: var(--lime); } .wc-strip-lime rect { fill: var(--lime); }
.wc-strip-blue .wc-strip-bar { background: var(--blue); } .wc-strip-blue rect { fill: var(--blue); }

/* Gradient — degradê da marca (azul → lime) */
.wc-grad { background: var(--gradient); color: var(--on-accent); }
.wc-grad-bar { display: block; height: 4px; background: var(--gradient); border: 0; }
.wc-grad-text { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (max-width: 768px) {
  .wc-btn, .wc-input { min-height: 44px; font-size: 14px; }
}