/* Estilos dos componentes do design system. Cores, fontes, raios e espaçamentos saem só dos tokens (design-system/tokens).
Regra do projeto: nada de cor hex nem font-family escrita aqui. Dimensões que são do componente (altura de controle, tamanho da caixa)
também são tokens (--control-h-*, --check-size, --switch-*). Veja DESIGN.md. */
/* ---------- Ícone e animações ---------- */
.ds-icon { display: inline-block; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ds-icon--marca { fill: currentColor; stroke: none; }
.ds-spin { animation: ds-spin 900ms linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
@keyframes ds-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* ---------- Button ---------- */
.ds-btn {
--ds-btn-bg: var(--action-bg); --ds-btn-bg-hover: var(--action-bg-hover); --ds-btn-fg: var(--action-fg); --ds-btn-bd: transparent;
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4);
height: var(--control-h-md); padding: 0 18px; border-radius: var(--radius-pill);
border: 1px solid var(--ds-btn-bd); background: var(--ds-btn-bg); color: var(--ds-btn-fg);
font: var(--fw-medium) var(--fs-md)/1 var(--font-sans); white-space: nowrap; text-decoration: none; cursor: pointer;
transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ds-btn:hover:not(:disabled) { background: var(--ds-btn-bg-hover); color: var(--ds-btn-fg); }
.ds-btn:active:not(:disabled) { transform: scale(.98); }
.ds-btn:focus-visible { box-shadow: var(--focus-ring); }
.ds-btn:disabled { opacity: .45; cursor: not-allowed; }
.ds-btn.is-loading { cursor: progress; opacity: .8; }
.ds-btn--sm { height: var(--control-h-sm); padding: 0 14px; font-size: var(--fs-sm); }
.ds-btn--lg { height: var(--control-h-lg); padding: 0 var(--space-8); font-size: var(--fs-ml); }
.ds-btn--full { display: flex; width: 100%; }
.ds-btn--accent { --ds-btn-bg: var(--surface-accent); --ds-btn-bg-hover: var(--gold-300); --ds-btn-fg: var(--text-on-accent); }
.ds-btn--secondary { --ds-btn-bg: var(--surface-card); --ds-btn-bg-hover: var(--surface-sunken); --ds-btn-fg: var(--text-primary); --ds-btn-bd: var(--border-default); box-shadow: var(--shadow-xs); }
.ds-btn--ghost { --ds-btn-bg: transparent; --ds-btn-bg-hover: var(--surface-hover); --ds-btn-fg: var(--text-primary); }
.ds-btn--danger { --ds-btn-bg: var(--status-danger); --ds-btn-bg-hover: color-mix(in srgb, var(--status-danger) 82%, var(--ink-950)); --ds-btn-fg: var(--text-inverse); }
.ds-btn--danger-soft { --ds-btn-bg: transparent; --ds-btn-bg-hover: var(--status-danger-bg); --ds-btn-fg: var(--text-danger); --ds-btn-bd: color-mix(in srgb, var(--status-danger) 35%, transparent); }
/* ---------- IconButton ---------- */
.ds-iconbtn {
--ds-ib-bg: var(--surface-card); --ds-ib-bg-hover: var(--surface-sunken); --ds-ib-fg: var(--text-primary); --ds-ib-bd: var(--border-subtle);
position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; padding: 0;
width: var(--control-h-md); height: var(--control-h-md); border-radius: 50%;
border: 1px solid var(--ds-ib-bd); background: var(--ds-ib-bg); color: var(--ds-ib-fg); cursor: pointer;
transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.ds-iconbtn:hover:not(:disabled) { background: var(--ds-ib-bg-hover); }
.ds-iconbtn:active:not(:disabled) { transform: scale(.96); }
.ds-iconbtn:focus-visible { box-shadow: var(--focus-ring); }
.ds-iconbtn:disabled { opacity: .45; cursor: not-allowed; }
.ds-iconbtn--sm { width: var(--control-h-sm); height: var(--control-h-sm); }
.ds-iconbtn--lg { width: var(--control-h-lg); height: var(--control-h-lg); }
.ds-iconbtn--ghost { --ds-ib-bg: transparent; --ds-ib-bg-hover: var(--surface-hover); --ds-ib-fg: var(--icon-muted); --ds-ib-bd: transparent; }
.ds-iconbtn--primary { --ds-ib-bg: var(--action-bg); --ds-ib-bg-hover: var(--action-bg-hover); --ds-ib-fg: var(--action-fg); --ds-ib-bd: transparent; }
.ds-iconbtn--accent { --ds-ib-bg: var(--surface-accent); --ds-ib-bg-hover: var(--gold-300); --ds-ib-fg: var(--text-on-accent); --ds-ib-bd: transparent; }
.ds-iconbtn__badge { position: absolute; top: 18%; right: 20%; width: 8px; height: 8px; border-radius: 50%; background: var(--status-danger); border: 2px solid var(--ring-gap); box-sizing: content-box; }
/* ---------- Badge ---------- */
.ds-badge {
--ds-badge-bg: var(--neutral-100); --ds-badge-fg: var(--neutral-600); --ds-badge-dot: var(--neutral-400);
display: inline-flex; align-items: center; gap: 5px; height: var(--control-h-badge); padding: 0 9px; border-radius: var(--radius-pill);
background: var(--ds-badge-bg); color: var(--ds-badge-fg); font: var(--fw-medium) var(--fs-2xs)/1 var(--font-sans); white-space: nowrap;
}
.ds-badge--sm { height: var(--control-h-badge-sm); padding: 0 var(--space-3); font-size: var(--fs-3xs); }
.ds-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ds-badge-dot); }
.ds-badge--success { --ds-badge-bg: var(--green-50); --ds-badge-fg: var(--green-700); --ds-badge-dot: var(--green-500); }
.ds-badge--danger { --ds-badge-bg: var(--red-50); --ds-badge-fg: var(--red-700); --ds-badge-dot: var(--red-500); }
.ds-badge--warning { --ds-badge-bg: var(--amber-50); --ds-badge-fg: var(--amber-700); --ds-badge-dot: var(--amber-500); }
.ds-badge--info { --ds-badge-bg: var(--blue-50); --ds-badge-fg: var(--blue-700); --ds-badge-dot: var(--blue-500); }
.ds-badge--gold { --ds-badge-bg: var(--gold-50); --ds-badge-fg: var(--gold-700); --ds-badge-dot: var(--gold-400); }
.ds-badge--ink { --ds-badge-bg: var(--surface-inverse); --ds-badge-fg: var(--text-inverse); --ds-badge-dot: var(--gold-400); }
/* ---------- Avatar ---------- */
.ds-avatar {
display: inline-flex; flex: none; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%;
width: var(--ds-avatar-size, 36px); height: var(--ds-avatar-size, 36px);
background: var(--surface-inverse); color: var(--gold-300); font: var(--fw-semibold) var(--ds-avatar-fs, 14px)/1 var(--font-sans);
}
.ds-avatar--ring { box-shadow: 0 0 0 2px var(--ring-gap), 0 0 0 4px var(--gold-400); }
.ds-avatar__img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- Tag ---------- */
.ds-tag {
display: inline-flex; align-items: center; gap: var(--space-3); height: var(--control-h-xs); padding: 0 10px; border-radius: var(--radius-sm);
border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-primary);
font: var(--fw-medium) var(--fs-xs)/1 var(--font-sans); white-space: nowrap;
transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ds-tag--interactive { cursor: pointer; }
.ds-tag--interactive:hover { background: var(--surface-sunken); }
.ds-tag--interactive:focus-visible { box-shadow: var(--focus-ring); }
.ds-tag.is-selected, .ds-tag.is-selected:hover { background: var(--action-bg); border-color: var(--action-bg); color: var(--action-fg); }
.ds-tag__remove { display: inline-flex; margin: 0 -2px 0 0; padding: 0; border: 0; background: transparent; color: inherit; opacity: .6; cursor: pointer; }
.ds-tag__remove:hover { opacity: 1; }
.ds-tag__remove:focus-visible { opacity: 1; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
/* ---------- Campos: Input e Select ---------- */
.ds-field, .ds-select { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.ds-select { display: inline-flex; }
.ds-field__label { font: var(--fw-medium) var(--fs-xs)/1.2 var(--font-sans); color: var(--text-primary); }
.ds-field__msg { font: var(--text-caption); color: var(--text-secondary); }
.ds-field.is-error .ds-field__msg { color: var(--status-danger); }
.ds-input {
display: flex; align-items: center; gap: var(--space-4); height: var(--control-h-md); padding: 0 var(--space-5);
border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--border-subtle);
transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ds-field--sm .ds-input { height: var(--control-h-field-sm); }
.ds-field--lg .ds-input { height: var(--control-h-lg); }
.ds-input:hover { border-color: var(--border-default); }
.ds-input:focus-within { border-color: var(--border-accent); box-shadow: var(--focus-ring); }
.ds-field.is-error .ds-input { border-color: var(--status-danger); }
.ds-field.is-error .ds-input:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-danger) 30%, transparent); }
.ds-field.is-disabled .ds-input { background: var(--neutral-100); cursor: not-allowed; }
.ds-input__icon { color: var(--text-secondary); }
.ds-input__control {
flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text-primary);
font: var(--fw-regular) var(--fs-md)/1 var(--font-sans);
}
.ds-input__control:focus-visible { box-shadow: none; }
.ds-input__control::placeholder { color: var(--text-tertiary); }
.ds-input__control:disabled { color: var(--text-tertiary); cursor: not-allowed; }
.ds-field--sm .ds-input__control { font-size: var(--fs-sm); }
.ds-input__kbd { display: flex; gap: var(--space-2); }
.ds-kbd {
display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px;
border-radius: var(--radius-check); border: 1px solid var(--border-default); background: var(--surface-card);
font: var(--fw-medium) var(--fs-3xs)/1 var(--font-sans); color: var(--text-secondary);
}
.ds-select__wrap { position: relative; display: flex; align-items: center; }
.ds-select__control {
appearance: none; -webkit-appearance: none; width: 100%; height: var(--control-h-md); padding: 0 36px 0 var(--space-5);
border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-sunken); color: var(--text-primary);
font: var(--fw-medium) var(--fs-md)/1 var(--font-sans); cursor: pointer; outline: none;
transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ds-select__control:hover:not(:disabled) { border-color: var(--border-default); }
.ds-select__control:focus-visible { border-color: var(--border-accent); box-shadow: var(--focus-ring); }
.ds-select__control:disabled { opacity: .45; cursor: not-allowed; }
.ds-select__control option { background: var(--surface-card); color: var(--text-primary); }
.ds-select__chevron { position: absolute; right: var(--space-5); color: var(--text-secondary); pointer-events: none; }
.ds-select--sm .ds-select__control { height: var(--control-h-field-sm); }
.ds-select--pill .ds-select__control { height: var(--control-h-xs); padding: 0 30px 0 var(--space-5); border-radius: var(--radius-pill); border-color: var(--border-default); background: var(--surface-card); font-size: var(--fs-xs); }
.ds-select--pill .ds-select__chevron { right: 10px; }
/* ---------- Checkbox, Radio, Switch ---------- */
.ds-check, .ds-radio, .ds-switch { display: inline-flex; align-items: center; cursor: pointer; color: var(--text-primary); user-select: none; }
.ds-check[aria-disabled='true'], .ds-radio[aria-disabled='true'], .ds-switch[aria-disabled='true'] { opacity: .45; cursor: not-allowed; }
.ds-check { gap: var(--space-4); font: var(--text-small); }
.ds-check:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.ds-check__box {
display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--check-size); height: var(--check-size); border-radius: var(--radius-check);
background: var(--surface-card); border: 1.5px solid var(--border-strong); color: var(--action-mark);
transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ds-check:hover:not([aria-disabled='true']) .ds-check__box { border-color: var(--text-secondary); }
.ds-check[aria-checked='true'] .ds-check__box, .ds-check[aria-checked='mixed'] .ds-check__box { background: var(--action-bg); border-color: var(--action-bg); }
.ds-check__tick, .ds-check__dash { display: none; }
.ds-check[aria-checked='true'] .ds-check__tick { display: block; }
.ds-check[aria-checked='mixed'] .ds-check__dash { display: block; }
.ds-radio { gap: 10px; }
.ds-radio--described { align-items: flex-start; }
.ds-radio:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.ds-radio__dot {
display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--check-size); height: var(--check-size); border-radius: 50%;
background: var(--surface-card); border: 1.5px solid var(--border-strong);
transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ds-radio--described .ds-radio__dot { margin-top: 1px; }
.ds-radio:hover:not([aria-disabled='true']) .ds-radio__dot { border-color: var(--text-secondary); }
.ds-radio[aria-checked='true'] .ds-radio__dot { background: var(--surface-accent); border-color: var(--surface-accent); }
.ds-radio__pip { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--text-on-accent); }
.ds-radio[aria-checked='true'] .ds-radio__pip { display: block; }
.ds-radio__text { display: flex; flex-direction: column; gap: var(--space-1); }
.ds-radio__label { font: var(--fw-medium) var(--fs-md)/1.3 var(--font-sans); }
.ds-radio__desc { font: var(--text-caption); color: var(--text-secondary); }
.ds-switch { --ds-sw-w: var(--switch-w); --ds-sw-h: var(--switch-h); gap: 10px; font: var(--text-small); }
.ds-switch--sm { --ds-sw-w: var(--switch-w-sm); --ds-sw-h: var(--switch-h-sm); }
.ds-switch:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-pill); }
.ds-switch__track { position: relative; flex: none; width: var(--ds-sw-w); height: var(--ds-sw-h); border-radius: var(--ds-sw-h); background: var(--action-off); transition: background var(--dur-base) var(--ease-out); }
.ds-switch[aria-checked='true'] .ds-switch__track { background: var(--action-bg); }
.ds-switch__knob {
position: absolute; top: var(--switch-inset); left: var(--switch-inset);
width: calc(var(--ds-sw-h) - 2 * var(--switch-inset)); height: calc(var(--ds-sw-h) - 2 * var(--switch-inset)); border-radius: 50%;
background: var(--text-inverse); box-shadow: var(--knob-shadow); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.ds-switch[aria-checked='true'] .ds-switch__knob { background: var(--action-mark); transform: translateX(calc(var(--ds-sw-w) - var(--ds-sw-h))); }
/* ---------- Interruptor nativo: mesmo visual do Switch, feito com de verdade ----------
Para formulários que já leem `input.checked` e o evento `change`:
*/
.ds-switch--nativo { position: relative; }
.ds-switch__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ds-switch__input:disabled { cursor: not-allowed; }
.ds-switch--nativo:has(.ds-switch__input:disabled) { opacity: .45; cursor: not-allowed; }
.ds-switch__input:checked + .ds-switch__track { background: var(--action-bg); }
.ds-switch__input:checked + .ds-switch__track .ds-switch__knob { background: var(--action-mark); transform: translateX(calc(var(--ds-sw-w) - var(--ds-sw-h))); }
.ds-switch__input:focus-visible + .ds-switch__track { box-shadow: var(--focus-ring); }
/* ---------- Campos nativos (formulários de HTML puro) ----------
Coloque a classe `ds-form` num contêiner (um