/**
 * Porta — kit de componentes.
 * Traduzido dos componentes React do "Porta Design System" (claude.ai/design)
 * para classes CSS que consomem os tokens de assets/ds/. Fonte da verdade é o
 * projeto de design; ao mudar lá, atualize aqui.
 *
 * Sumário:
 *   .btn          — Actions/Button   (primary, cta, secondary, ghost · sm/md/lg)
 *   .field        — Forms/Input+Select (label, controle, hint, erro)
 *   .checkbox     — Forms/Checkbox
 *   .card         — Content/Card      (lace, beige, green)
 *   .badge        — Content/Badge     (green, soft, orange, cta)
 */

/* ── Button ──────────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	line-height: 1;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-label);
	border: 1.5px solid transparent;
	border-radius: var(--radius-pill);
	cursor: pointer;
	text-decoration: none;
	/* tamanho padrão = md */
	padding: 12px 24px;
	font-size: var(--fs-body);
	transition: background-color 140ms ease, color 140ms ease,
		border-color 140ms ease, transform 80ms ease;
}
.btn:active { transform: translateY(1px); }

/* tamanhos */
.btn--sm { padding: 8px 16px; font-size: var(--fs-sm); }
.btn--md { padding: 12px 24px; font-size: var(--fs-body); }
.btn--lg { padding: 16px 32px; font-size: var(--fs-body-lg); }

/* variantes */
.btn--primary { background: var(--action-primary); color: var(--text-on-green); }
.btn--primary:hover { background: var(--action-primary-hover); }

.btn--cta { background: var(--action-cta); color: var(--text-on-orange); }
.btn--cta:hover { background: var(--action-cta-hover); color: var(--text-on-orange); }

.btn--secondary {
	background: transparent;
	color: var(--fence-green);
	border-color: var(--fence-green);
}
.btn--secondary:hover { background: var(--fence-green); color: var(--text-on-green); }

.btn--ghost { background: transparent; color: var(--fence-green); }
.btn--ghost:hover { background: var(--fence-green-12); }

.btn:disabled,
.btn.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}
.btn:disabled:hover,
.btn.is-disabled:hover { background: inherit; }

/* ── Field (Input / Select) ──────────────────────────────── */
.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-family: var(--font-sans);
}
.field__label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--text-primary);
}
.field__control {
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	color: var(--text-primary);
	background: var(--venetian-lace);
	padding: 12px 16px;
	border-radius: var(--radius-md);
	border: 1.5px solid var(--border-default);
	outline: none;
	transition: border-color 140ms ease;
}
.field__control:focus { border-color: var(--fence-green); }
.field--error .field__control { border-color: var(--fiery-glow); }

.field__hint {
	font-size: var(--fs-xs);
	color: var(--text-muted);
}
.field--error .field__hint { color: var(--action-cta); }

/* Select: mesma moldura do Input + chevron.
   NOTA: extrapolado do Input.jsx (Select.jsx não pôde ser lido na sincronização);
   confirmar contra o componente Select do design. */
select.field__control {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23204333' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

/* ── Checkbox ────────────────────────────────────────────── */
.checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	color: var(--text-primary);
	cursor: pointer;
}
.checkbox__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.checkbox__box {
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	border-radius: var(--radius-sm);
	border: 1.5px solid var(--border-strong);
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 120ms ease, border-color 120ms ease;
}
.checkbox__box svg { opacity: 0; transition: opacity 120ms ease; }
.checkbox__input:checked + .checkbox__box {
	border-color: var(--fence-green);
	background: var(--fence-green);
}
.checkbox__input:checked + .checkbox__box svg { opacity: 1; }
.checkbox__input:disabled + .checkbox__box { opacity: 0.5; }
.checkbox:has(.checkbox__input:disabled) { opacity: 0.5; cursor: not-allowed; }

/* ── Card ────────────────────────────────────────────────── */
.card {
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	font-family: var(--font-sans);
	color: var(--text-primary);
	background: var(--venetian-lace); /* tone padrão = lace */
}
.card--lace { background: var(--venetian-lace); }
.card--beige { background: var(--macadamia-beige); }
.card--green { background: var(--fence-green); color: var(--text-on-green); }

/* ── Badge ───────────────────────────────────────────────── */
.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	line-height: 1.4;
	background: var(--fence-green); /* tone padrão = green */
	color: var(--text-on-green);
}
.badge--green { background: var(--fence-green); color: var(--text-on-green); }
.badge--soft { background: var(--surface-soft); color: var(--fence-green); }
.badge--orange { background: var(--pumpkin-vapor); color: var(--fence-green); }
.badge--cta { background: var(--action-cta); color: var(--text-on-orange); }