@keyframes editor-flash {
  0% { background-color: var(--color-surface); }
  30% { background-color: var(--accent-flash-bg); }
  100% { background-color: var(--color-surface); }
}

@keyframes undo-appear {
  from {
    opacity: 0.3;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.undo-btn.just-enabled {
  animation: undo-appear 200ms var(--ease-out);
}

@keyframes toast-in-out {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  12%, 80% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-4px);
  }
}

.toast.show {
  animation: toast-in-out 2s var(--ease-out) forwards;
}

/* Theme transition — scoped to key elements only */
/* Buttons excluded: they define their own transitions in components.css */
body,
.editor,
.sheet,
.sheet-search {
  transition-property: color, background-color, border-color;
  transition-duration: var(--duration-normal);
  transition-timing-function: var(--ease-out);
}