/* Base: papel frio, texto em Prússia, sem sombra, alinhado à esquerda */
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-display); font-size: 15px; line-height: 24px; }
.vt-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Logo: "vaart" em Libre Baskerville, com o canal (duas linhas finas) nos dois "a" */
.vt-logo { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: 0.075em; white-space: nowrap; color: var(--ink); display: inline-block; }
.vt-logo .vt-aa { position: relative; display: inline-block; }
.vt-logo .vt-aa::before, .vt-logo .vt-aa::after { content: ""; position: absolute; left: 0; right: 0.075em; height: 1px; background: var(--canal); }
/* as duas linhas do canal são sempre iguais: 1px, alinhadas ao pixel inteiro */
.vt-logo .vt-aa::before { top: round(down, 0.02em, 1px); }
.vt-logo .vt-aa::after { bottom: round(up, -0.16em, 1px); }
.vt-logo--reduzido .vt-aa::before, .vt-logo--reduzido .vt-aa::after { height: 1px; }
.vt-logo--deep { color: var(--on-deep); }
.vt-logo--deep .vt-aa::before, .vt-logo--deep .vt-aa::after { background: var(--canal-deep); }

/* Botões: quase retos, sem sombra, sem gradiente */
.vt-btn { font-family: var(--font-ui); font-size: 14px; line-height: 20px; font-weight: 500; padding: var(--space-3) var(--space-5); border-radius: var(--radius-1); border: 1px solid transparent; cursor: pointer; transition: background-color 120ms, border-color 120ms, color 120ms; display: inline-flex; align-items: center; gap: var(--space-2); }
.vt-btn--primario { background: var(--action); color: var(--on-action); }
.vt-btn--primario:hover { background: var(--action-hover); }
.vt-btn--secundario { background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.vt-btn--secundario:hover { border-color: var(--ink); }
.vt-btn--texto { background: transparent; color: var(--action); padding-left: 0; padding-right: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.vt-btn--texto:hover { color: var(--action-hover); }
.vt-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Campos */
.vt-field { display: grid; gap: var(--space-1); max-width: 360px; }
.vt-field__label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.6px; color: var(--ink-muted); }
.vt-field__input { font-family: var(--font-ui); font-size: 15px; line-height: 24px; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-1); padding: var(--space-2) var(--space-3); }
.vt-field__input.vt-num { font-family: var(--font-mono); }
.vt-field__input:hover { border-color: var(--ink); }
.vt-field__hint { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.vt-field--erro .vt-field__input { border-color: var(--danger); }
.vt-field--erro .vt-field__hint { color: var(--danger); }

/* Etiqueta de estado: marcador e palavra, sem fundo colorido (nada de pílula) */
.vt-tag { font-family: var(--font-ui); display: inline-flex; align-items: center; gap: var(--space-2); font-size: 13px; line-height: 20px; font-weight: 500; white-space: nowrap; color: var(--ink); }
.vt-tag::before { content: ""; width: 8px; height: 8px; box-sizing: border-box; flex: none; }
.vt-tag--ok::before { background: var(--success); }
.vt-tag--erro { color: var(--danger); }
.vt-tag--erro::before { background: var(--danger); }
.vt-tag--pendente::before { border: 1.5px solid var(--action); }
.vt-tag--neutro { color: var(--ink-muted); }
.vt-tag--neutro::before { border: 1.5px solid var(--ink-muted); }

/* Cartão de cotação */
.vt-quote { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-2); padding: var(--space-5); display: grid; gap: var(--space-4); max-width: 420px; }
.vt-quote__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.vt-quote__pair { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.6px; color: var(--ink-muted); }
.vt-quote__rates { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.vt-quote__rates > div { padding-top: var(--space-3); display: grid; gap: var(--space-1); }
.vt-quote__rates > div + div { border-left: 1px solid var(--line); padding-left: var(--space-4); }
.vt-quote__k { font-family: var(--font-ui); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.6px; color: var(--ink-muted); }
.vt-quote__v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 28px; line-height: 32px; color: var(--ink); }
.vt-quote__foot { font-family: var(--font-ui); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); font-size: 13px; line-height: 20px; color: var(--ink-muted); }

/* Tabela de operações: sem caixa em volta, filete de abertura em ink e linhas em line */
.vt-table { font-family: var(--font-ui); width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); font-size: 14px; line-height: 20px; }
.vt-table th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.6px; color: var(--ink-muted); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.vt-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.vt-table tr:last-child td { border-bottom: 0; }
.vt-table .vt-r { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.vt-table tbody tr:hover td { background: var(--aguada-soft); }

/* Textura da marca: grade fina de cianotipia (papel de projeto), só sobre surface-deep */
.vt-cianotipia { background-color: var(--surface-deep); background-image: linear-gradient(var(--grade) 1px, transparent 1px), linear-gradient(90deg, var(--grade) 1px, transparent 1px); background-size: var(--space-4) var(--space-4); }