/* familysmash design system v1.1.0 — generated 2026-07-07 — DO NOT EDIT, update from D:\dev\smash\design_system */
/* Shared component & utility styles. Requires familysmash-tokens.css. */
.fs-card {
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-card);
  box-shadow: var(--fs-shadow-sm);
  transition: var(--fs-transition-press);
}
.fs-card--pressable:active { transform: var(--fs-scale-press); }

.fs-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px; border: none;
  border-radius: var(--fs-radius-button);
  font-size: var(--fs-button-size); font-weight: var(--fs-button-weight);
  font-family: inherit; cursor: pointer; text-align: center; text-decoration: none;
  min-height: var(--fs-touch-min);
  transition: opacity 0.2s, transform 0.12s ease;
}
.fs-btn:active:not(:disabled) { transform: var(--fs-scale-press); }
.fs-btn:disabled { opacity: 0.5; cursor: default; }
.fs-btn--primary { background: var(--fs-accent); color: var(--fs-accent-contrast); }
.fs-btn--secondary { background: var(--fs-surface-hover); color: var(--fs-text-primary); border: 1px solid var(--fs-border-strong); }
.fs-btn--ghost { background: transparent; color: var(--fs-accent-text); }

.fs-input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--fs-border-strong);
  border-radius: var(--fs-radius-input);
  background: var(--fs-surface); color: var(--fs-text-primary);
  font-size: var(--fs-body-size); font-family: inherit;
}
.fs-input:focus { outline: none; border-color: var(--fs-accent); box-shadow: var(--fs-shadow-glow); }

.fs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--fs-radius-chip);
  font-size: var(--fs-chip-size); font-weight: var(--fs-chip-weight);
  background: var(--fs-surface-hover); color: var(--fs-text-secondary);
}